Moving the labels on a contact form to inside the fields is as easy as replacing the word “Label” with the word “Placeholder.” Really. We’ll use a simple Jetpack contact form as our example, but it’s basically the same procedure for MailChimp sign up forms or any other forms you can access the HTML or shortcodes for.
Technically, we’re not moving the labels, we are replacing them with placeholders (which is even easier!). A label is out side the form, a placeholder is inside.
How to move name and email from outside a form to inside it:
- Place your contact form by clicking the “Add Contact Form” button. If you need to change the fields on the form, do that by clicking on the contact form that was added, and then selecting the little pencil icon to edit it. Once you have it how you’d like it, click “Update form” at the bottom.
- Now we’re going to hop over to the “Text” (HTML) view of your post or page so we can see the shortcode or HTML. (In Jetpack’s case, it is shortcode.)
- Find the fields you want to change.
They will look likelabel="Name" - Highlight label for each one, and replace it with the word placeholder.
They will now look likeplaceholder="Name" - Save your work, you’re done!
Here’s a side-by-side of the Jetpack form before-and-after:
Labels:
[contact-form][contact-field label=”Name” type=”name”][contact-field label=”Email” type=”email”][contact-field label=”Website” type=”url”][contact-field label=”How can I help you?” type=”textarea”][/contact-form]
Placeholders:
[contact-form][contact-field placeholder=”Name” type=”name”][contact-field placeholder=”Email” type=”email”][contact-field placeholder=”Website” type=”url”][contact-field placeholder=”How can I help you?” type=”textarea”][/contact-form]
And here’s a video if you would rather watch instead of read:
