How to Add HTML5 Placeholder Text in Your WordPress Forms

Are your website visitors confused about how to complete your forms? Providing examples of properly formatted answers will help your visitors to easily fill your forms out. We’ll walk you through each step to add HTML5 placeholder text in your WordPress forms.

What is HTML5 Placeholder Text?

HTML5 placeholder text is an example of how the form field should be formatted.  It shows visitors exactly the type of data that they should enter.

Placeholder text appears within your form fields, but disappears automatically as soon as your users enter their own answers.

Here you can see the placeholder text “John Doe” disappear as soon as the user starts typing:

an example of placeholder text in a name field

Why is placeholder text important?

Have you ever been asked for your phone number on a form, filled it in, and had to redo it?  Often that frustration results in many ways to submit your phone number. For example, you could write your number in any of these ways…

  • 555-5555
  • 555 5555
  • 555.555.5555
  • (555) 555-5555

…and none of those account for country codes!

By providing users with an example of the answer and how it needs to be formatted, you’ll increase the quality of your form results by gathering better data.

Ready to create your own placeholder text with WPForms? Let’s get started.

Adding HTML5 Placeholder Text

The first thing you need to do is install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Also, you’ll need to have a form created. See our tutorial on How to Create a Simple Contact Form as an example to get started.

After you’ve created your fields, it’s time to add your placeholder text.

First, you’ll need to go to the WPForms builder right-hand preview panel.  Click on the field that that you want to add placeholder text to.

email html5 input placeholder text

Then on the left-hand side, expand the Advanced Options sub-menu.

After that, you’ll type your placeholder text as shown below and save your form.

input html5 form placeholder text

You’ll notice what you type in to the placeholder text field will display automatically in the right-hand preview panel.

html5 form placeholder text preview

Then preview your published form.  It should look something like this:

published html5 placeholder text

Styling Your HTML5 Placeholder Text

By default, your placeholder text will look grey.  If you’d like to add some color to your form, you’ll need to add a little bit of CSS code.

You can copy and modify the code provided below to change your placeholder text color to red. You can change red to a color that matches your website.


::-webkit-input-placeholder {
  color: red;
}

:-moz-placeholder { /* Firefox 18- */
  color: red; 
}

::-moz-placeholder { /* Firefox 19+ */
  color: red; 
}

:-ms-input-placeholder { 
  color: red; 
}

Next, go to Appearance » Customize » Additional CSS in your WordPress dashboard and paste the code. You’ll see it appear in the Customizer right-hand preview panel.  Save your changes and view your published form.

how to style html5 placeholder text

That’s it! You’ve just added HTML5 placeholder text to your form.

Want to customize your form’s style even more? You might also want to check out our guide on how to style contact forms in WordPress.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. I added in placeholder text in my plugin which showed up in the preview, but then when I made it live on my website the placeholders aren’t visible. Do you know why they might not show up? Thanks.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.