Contact Form Placeholders

I can see in the labels you’ve dealt with that via margin

That’s correct. It allows site owners to customize the look of the form without having to edit code. Adding a space in the code would make it more difficult to customize, if folks wanted the “required” term to be aligned with other terms.

Are you having trouble customizing the form on your site?

Or even better, is there any way to control the placeholder via the shortcode?

There is no such option I’m afraid.

Are you having trouble customizing the form on your site?

Well, the problem is that there should be a space in the placeholder between the Field Name and the Required Caption where you cannot apply any styling… Apart from that I don’t have any problems with the label and the span margin, although I do think that a space its way better than having to handle such a simple thing with styling…

the Required Caption where you cannot apply any styling

You can style that caption by targeting the span, like so:

.contact-form div label span

Jetpack actually comes with some default styles to add a little space:

.contact-form label span {
    color: #AAA;
    margin-left: 4px;
    font-weight: 400;
}

To add more space, you can try something like this:

.contact-form div label span {
	margin-left: 50px;
}

`

I hope this helps.

Hey Jeremy, I really appreciate your help, but I think that I’m probably not explaining myself correctly. The problem is not in the form’s label but in the input placeholder.

That being the text that appears within the input before typing anything into the field. It doesn’t have a space between the Field’s name and the required caption.

Please see this:
https://birchalltea.co.uk/free-sample/

Look at the first field “First Name”, where the placeholder appears as:

First Name(required)

… all glued together. That’s what I’m referring to. Hope you can fix that tiny minuscule annoying detail.

Oh, that makes a lot more sense, thank you.

You have total control over the placeholder content. You can define your own custom placeholder in the contact form shortcode and add as many spaces as you want, like so:

[contact-form][contact-field label='First Name' type='name' required='1' placeholder='First Name (required)'/][/contact-form]

https://i.wpne.ws/dLIa

:$

Awesome! Lets pretend this thread never existed.