How to Add Placeholder Text and Default Values to WordPress Forms

You want your WordPress form to feel friendly, with a little grey placeholder text in the Email box and a dropdown that opens on “Choose one” instead of barging in with the first option. So where is that setting hiding, and why does every field seem to call it something different? And why did the “Choose one” prompt you added so carefully just land in your inbox as somebody’s answer?

Search for help and you get a pile of HTML tutorials about the placeholder attribute, which is great if you hand-code your forms and not much use when you’re dragging fields around a builder. Half the answers use “placeholder” and “default value” like they mean the same thing. Pick the wrong one and you end up with hints nobody fills in, or answers nobody gave you.

Yes, it’s fiddly. But it’s also a five-minute job once you know where to look. Below, we’ll show you where placeholder text and default values live in Ninja Forms for each common field type, which one to reach for, and the small trick that stops a “Choose one” prompt from ever being submitted.

What you’ll need

• Ninja Forms (free)

Placeholder text or a default value: which one do you need?

Placeholder text is a hint. It shows in grey inside an empty field, disappears as soon as the visitor starts typing, and is never submitted.

A default value is a real answer. It pre-fills the field, and it gets submitted with the form unless the visitor changes it.

Here’s how that looks on our demo form, a soak request for a capybara hot spring:

The grey text in the name, email, and phone boxes is placeholder text. The 2 guests, the Medium towel, and the SPRING-SOAK promo code are default values. If a visitor sends the form without touching them, those are the answers you get.

So which one should you use? Our rule of thumb:

• Use a placeholder to show the format you want, like an example email or phone number.
• Use a default value when most people will give the same answer anyway, and you’re happy to receive it if they skip the field.

How to add placeholder text to a field in Ninja Forms

Placeholder text lives in each text-type field’s Display settings. That covers Single Line Text, First Name, Last Name, Email, Phone, Paragraph Text, Number, Address, and friends. It takes four clicks:

1. Open your form. On the Form Fields tab, click the field (Email, for example) to open its field settings window.
2. Expand the Display settings accordion.
3. Find Placeholder and type your hint, like you@example.com.
4. Click Publish, top right of the builder.

That’s all there is to it. On the live form, your text shows in grey inside the empty box. If the visitor types nothing, the field submits empty, so you’ll never mistake a hint for an answer.

Placeholder text and accessibility: keep your hints friendly

Placeholder text is at its best as a small extra beside a clear label. Asked to do more than that, it can trip up visitors who use a screen reader, who need stronger contrast, or who just looked away for a second. Here’s what to steer clear of:

• Don’t let the placeholder stand in for the label. Once a visitor starts typing, the hint is gone, and so is the reminder of what the field asked for. Screen readers don’t treat a placeholder as a label either. Keep the label visible and let the placeholder add an example.
• Don’t put rules in it. “Eight characters, one number” vanishes on the first keystroke, right when your visitor needs it. Rules belong in the field’s Description setting, which stays on screen.
• Don’t write a hint that looks like an answer. A City field showing Chicago can look like it’s already filled in, and visitors skip right past it. That’s why our demo form says e.g. Purple and you@example.com.
• Don’t rely on it for anything a visitor has to read. Browsers usually show placeholder text in a pale grey that many people find hard to see. If it matters, put it in the label or the description.

Get those right and a placeholder does exactly what you want it to: one quick example that saves your visitor a guess. The W3C’s guide to form instructions goes deeper if you’d like more.

Pre-fill a field with a default value

A default value goes in the same Display settings accordion, directly above Placeholder (pictured above). Click the field, expand Display settings, type into Default Value, and publish. On our form, that’s 2 in the Number of guests field and SPRING-SOAK in the Promo code field.

The visitor sees the value when the page loads and can edit it or delete it. If they leave it alone, it’s saved with their submission as-is.

Want the default to fill itself in? Default Value accepts merge tags. We put {other:date} in a Hidden field and every submission arrived stamped with that day’s date.

The same approach works for a logged-in visitor’s details, like {wp:user_email}, or for a value passed in the page address with query strings. On a Hidden field, Default Value sits right at the top of the field settings window, no accordion to open.

Two fields do things their own way. The Date/Time field has no Default Value box; it has a Default To Current Date toggle instead. And list fields don’t use this box at all, which brings us to dropdowns.

Set a default choice on dropdowns, radio buttons, and checkboxes

Select, Radio List, Checkbox List, Multi-Select, and Select Image fields have no Placeholder or Default Value setting. You set their default in the Options list instead, by ticking the option you want pre-selected.

1. On the Form Fields tab, click the list field to open its field settings window. Options sits at the top.
2. Find the option you want selected when the page loads.
3. Tick the checkbox near the end of its row, just before the remove (x) icon.
4. Publish.

Each row shows a Label box, a Calc Value box, and that checkbox. If you also see a Value box, you have Developer Mode on; more on why that matters below. On our form, Medium is ticked on the Towel size radio list, so it loads pre-selected.

The Single Checkbox is the odd one out. Its Default Value setting sits at the top of its field settings window, with two choices: Checked or Unchecked.

Still building the dropdown itself? Our guide to adding a dropdown select field in WordPress covers single and multi-select setup from scratch.

How do you stop a dropdown from submitting “Choose one”?

Add a first option like “Choose a soak”, tick it as the default, leave its Value blank, and make the field required. A visitor who leaves the prompt selected gets “This is a required field.” and the form won’t send until they pick a real option.

The blank Value is the part everyone misses. Ticking a prompt option and turning on Required Field isn’t enough on its own.

Without Developer Mode, the builder hides the Value box and fills it in from your label, so your prompt gets a value like choose-a-soak. The form sees an answer and sends it along, required or not. We tested it both ways, and that blank Value is the whole difference.

So before you start, switch on Developer Mode. New installs have it off; if your site has run Ninja Forms for years, it may already be on. Then it’s seven quick steps:

1. In your WordPress admin, go to Ninja Forms > Settings. In the Advanced Settings section, tick Form Builder “Dev Mode” and click Save Settings.
2. Open your form and click the Select field. Next to Options, click the blue (+) Add New, then drag the new row to the top.
3. Type your prompt in the row’s Label box, like Choose a soak.
4. Clear the row’s Value box so it’s empty. Do this after typing the label, because typing a label fills the Value box for you.
5. Tick the checkbox near the end of the row so the prompt is selected when the page loads.
6. Turn on Required Field, next to Label at the top of the field settings window.
7. Click Publish.

Now test it. Leave the prompt selected and hit submit, and here’s what your visitor sees:

Pick a real soak and the form goes through. The option’s Value is what shows up in your submissions and emails, so give the real options values you’ll recognize. If you ever retype the prompt’s label later, check that its Value box is still empty before you publish.

This trick is for dropdowns. On a Checkbox List, a pre-ticked “please choose” option would make visitors untick it, so pre-select a real answer there, or nothing at all.

Give every field on your form a helpful head start

Like we said at the top, placeholders and default values sound like the same thing until one of them lands in your inbox. Now you know better. Hints go in Placeholder, likely answers go in Default Value, lists get a ticked option, and a dropdown that needs a real choice gets a prompt with no value.

Use them together and your form tells visitors what you want before they have to ask. We think every form deserves at least one of each.

Pop open your form, give one field a placeholder and another a default, and see the difference for yourself. Questions? The comments are below, and we read every one.