AI Summary
Want to add form placeholder text in WordPress? Placeholders make it easy for your visitors to fill in each field correctly.
It sits inside a field and shows people exactly what to type before they type it, which cuts down on guesswork and the back-and-forth emails that follow.
In this article, I’ll walk you through adding placeholder text to every field on your WordPress contact form by using the simplest solution available with WPForms!
Create Your WordPress Form Now! 🙂
What Is Placeholder Text?
Placeholder text is the text inside a form field that shows the user what to type in. It was introduced in the HTML5 specification, so you’ll sometimes see it referred to as the ‘HTML5 placeholder attribute’.
Placeholders are helpful for any field that has a specific format, like an email address. It shows your visitor how to format their entry is super important to make sure every field is valid.
That means there’s less chance of form abandonment because the visitor won’t have to keep go back and correcting what they typed. It’s especially helpful for fields like:
- URLs: You can add
https://example.comas placeholder text to show the visitor how to type their website address correctly - Phone numbers: For example, if you want to get the user’s country code along with their regular number, you can add placeholder text to show them how to type it in.
- Social media usernames: Placeholder text can show people how to type their username correctly. For example, adding
@exampleas placeholder text for a Twitter field shows that you want them to type the leading@
You can probably think of other ways to use placeholder text to help your visitors. Placeholder text is a little different from a default value.
When the user starts typing in a field with a placeholder, the placeholder text disappears. In contrast, a default value will be submitted along with the form entry unless the user changes it.
How to Add Placeholder Text to WordPress Forms
Once your form exists, placeholder text takes a couple of clicks per field, and you don’t need to touch a line of code or CSS to do it. Follow the steps below to get started:
Step 1: Install the WPForms Plugin
WPForms is a drag and drop form builder for WordPress with over 2,100+ form templates, so you can start from a ready-made contact form instead of building from scratch.
Every field you drag in has its own options panel, and placeholder text lives in the same spot on all of them. What I like most about WPForms for this particular job is that the placeholder preview updates live.
All versions of WPForms let you add placeholders to form fields, including WPForms Lite. Keep in mind that the Pro version lets you add advanced fields to your forms, so it’s a lot more powerful than the free version.
Download the zip file from the Downloads tab in your WPForms account and upload it to your WordPress site. Here’s a step-by-step guide on how to install a WordPress plugin if you need help with this step.
Get Started With WPForms Today
Step 2: Create Your Contact Form
In WPForms, you can make and embed a form in less than 5 minutes, thanks to its library of 2,100+ form templates and advanced AI form building capabilities.
You can start by going to WPForms » Add New and pick the Simple Contact Form template or ask the WPForms AI to build the form for you.
Once you’ve selected a template or built your form using WPForms AI, you’ll be redirected to the form builder. Here you can see a list of fields to add on the left and a live preview of your form on the right.
It’s easy to customize your form and add whatever fields you need. You can even add a GDPR agreement easily by dragging the GDPR field over to the form preview.
Need more help? We’ve got a detailed guide showing how to create a simple contact form in WordPress. When your form is ready, click Save at the top of the form builder to save your progress so far.
Step 3: Add Placeholder Text to a Text or Email Field
Now we’re ready to add placeholder text to your WordPress form. We’ll show you 2 useful ways to use this feature to make your forms easier to fill in.
Let’s use the email field as the first example. In the form builder, click on the email field on the right to open up the settings.
Then on the left-hand side, expand the Advanced Options sub-menu. You’ll see a field for the Placeholder Text.
Type in the placeholder text you want to use. As you type, you’ll see the same text appear in the form preview on the right so you can see what it’ll look like on your WordPress form.
If you want, you can also click the Hide Label checkbox. This will hide the label above the field to make the form more compact.
However, keep in mind that screen readers can’t read the HTML5 placeholder attribute, so you might want to leave the field label in place for accessibility.
For now, we’re going to uncheck Hide Label so we have both the label and the placeholder text. Repeat this for each field that needs a hint.
Step 4: Add Placeholder Text to a Dropdown Field
You can use placeholder text on any field, but the dropdown is especially handy. By default, a dropdown list will default to the first choice on the list, but we can use a placeholder to prevent this.
If you read our comparison of WPForms Lite vs Contact Form 7, you’ll know that Contact Form 7 lets you add a blank line at the top of a dropdown.
However, it will only show 3 dashes ( – – – ) as the placeholder, and you can’t customize the actual placeholder text. So WPForms gives you more control over the way your placeholders look.
Let’s start with a dropdown example. We added 3 answer choices to this dropdown. When we publish the form, the 1st option will be the default selection.
This can be a problem on any form, and particularly on survey forms and questionnaires. On any kind of survey, you want to make sure your visitor consciously chooses an answer.
We can easily solve this problem by adding a placeholder to the dropdown field. Under Advanced Options, we typed in the placeholder text on the left. The change is instantly shown in the preview on the right.
Now the form will show the placeholder instead of the 1st choice.
When the list is expanded, you can see that the placeholder text is grayed out to show that it isn’t a valid selection.
If you don’t want to use placeholder text, but you want a blank line at the top of the dropdown, you can leave the placeholder blank.
Just press space in the Placeholder Text field. This will show the dropdown field as empty until the visitor makes a selection.
All WPForms Fields that Support Placeholder Text
Not every field can hold placeholder text, and knowing which ones can saves you hunting through settings that aren’t there.
For the full reference on every field type, WPForms has placeholder text documentation that covers the details.
| Field | Notes |
|---|---|
| Single Line Text | Standard placeholder |
| Paragraph Text | Standard placeholder |
| Name | Separate placeholder per sub-field (first, middle, last) |
| Separate placeholder for the confirmation field | |
| Website / URL | Standard placeholder |
| Phone | Standard placeholder |
| Number | Standard placeholder |
| Dropdown | Doubles as a way to stop the first choice being preselected |
| Address | Separate placeholder per line, city, state, ZIP, and country |
| Date / Time | Separate placeholder for the date and time pickers |
| Password | Separate placeholder for the confirmation field |
| Custom Captcha | Standard placeholder |
Anything the reader clicks rather than types into has no placeholder option, since there’s no empty text box to put a hint in. This covers Checkboxes, Multiple Choice, Rating, Signature, File Upload, Number Slider, and Rich Text.
Six of the fields above ship with free WPForms Lite, including Single Line Text, Name, Email, Paragraph Text, Dropdown, and Number. Phone, Address, Date / Time, and Custom Captcha are advanced fields that need a paid license.
Moving From Contact Form 7 to WPForms
If you landed here from Contact Form 7, you already know why. Placeholders there mean opening the Form tab and typing a placeholder attribute into the form-tag shortcode by hand for every single field, or ticking the “use this text as the placeholder” box under Default Value.
Either way you’re editing markup, and every new field means going back into the shortcode again. Dropdowns run into a harder ceiling, because Contact Form 7 can give you a blank first line but shows it as three dashes with no setting to change what it says.
You can’t write “Choose a department” or “Select your budget,” and no amount of shortcode editing changes that. Our WPForms Lite vs Contact Form 7 comparison goes through the rest of the differences if you want the full picture.
That gap is the honest reason to switch for this particular job. Placeholder text in WPForms is a box you type into, with a live preview, on every field that supports one.
You can import your existing Contact Form 7 forms rather than rebuilding them, which makes WPForms a straightforward Contact Form 7 alternative if the shortcode editing has worn thin.
FAQs on Contact Form Placeholder Text
Placeholder text comes up a lot among WordPress users setting up contact forms. Here are the questions that come up most.
What is placeholder text?
It’s the hint text inside a form field that shows what to type and disappears once someone starts typing.
It comes from the HTML5 placeholder attribute, and in WPForms you add it from the Advanced tab of any supported field.
What is the difference between placeholder text and a default value?
Placeholder text is only a visual hint, so it never gets submitted with the form. A default value is real content sitting in the field, and it gets submitted unless the person changes it first.
Use a placeholder to show the format you want, and a default value when you want to pre-fill an actual answer.
Can screen readers read placeholder text?
Not reliably, which is why placeholder text shouldn’t be the only description a field has.
Keep the field label visible rather than ticking Hide Label, and put anything genuinely important in the field description where it stays on screen.
Why does my dropdown select the first option automatically?
Because it’s set to the Classic style, which always preselects the first choice.
Add placeholder text in the Advanced tab and that stops, or switch Style to Modern under the General tab, since Modern dropdowns don’t preselect at all.
Can I add placeholder text in Contact Form 7?
You can, by typing a placeholder attribute into the form-tag shortcode or using the Default Value checkbox.
Dropdowns are the limit, because Contact Form 7 only offers a blank line shown as three dashes with no way to customize the wording.
Next Step: Style Your Placeholder Text
By default, your WordPress contact form placeholder text will be grey. If you’d like to add some contrast, you can use CSS to style it.
Check out the code snippets in our documentation: how to style placeholder text. We also have some great examples of contact us pages if you’d like some design inspiration.
Build a Better Contact Form Now
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
