Why Placeholder Text Makes Web Forms Harder to Fill In

A friend who runs a small pottery studio asked me last spring why so many people abandoned the booking form on her new site. The form had five fields, a pleasant sage green button, and no labels. Each field held light grey text inside it: "Your name", "Email", "Preferred date", "Number of people", "Anything we should know?". It looked clean in the mockup. In practice, people were typing a date into the email field and giving up when the error message appeared.

That form is extremely common, and the cause is almost always the same. Placeholder text is doing a job it was never built for. It looks like a label, it sits where a label might go, and then it vanishes the moment someone starts typing. If you are designing or fixing a web form, this is one of the cheapest problems to solve and one of the most expensive to ignore.

What goes wrong when the hint disappears

The moment a person clicks into a field and types the first character, the placeholder is gone. That is fine for a single search box. It is a real problem for a form with several fields, because people do not fill forms in one clean pass. They tab ahead, come back, get interrupted by a child or a delivery, and return to a column of filled boxes with no labels left to tell them which box was which.

Checking work becomes guesswork. Was that second box the email or the phone number? On the pottery form, the date field and the people field both held short numbers once filled in, so "12" could mean either. People had to delete their entry to see the hint again, which is a strange thing to ask anyone to do.

Memory load matters most for people who are already stretched: older visitors, anyone using a screen magnifier that shows only part of the form at a time, and people filling things in on a phone in a noisy place. The Nielsen Norman Group published research on exactly this back in 2014, and the findings still hold. Placeholders in place of labels strain short term memory and make errors harder to spot.

The contrast trap

Here is where my usual territory of type and color comes in. Placeholder text is styled pale so that it reads as a hint rather than a value someone already entered. That paleness is the whole point, and it is also why it fails.

The WCAG 2.1 guideline for normal body text asks for a contrast ratio of at least 4.5:1 against the background. The most popular placeholder grey I see in themes is #999999, which comes out at about 2.85:1 on white. Go lighter to #aaaaaa and you are down to roughly 2.32:1. Both fail, and both are hard to read in sunlight on a phone.

So you are stuck. Make the placeholder dark enough to pass, around #767676 at 4.54:1, and it starts to look like a filled in value, which confuses people into skipping the field. Keep it pale, and a good share of your visitors cannot read it. There is no shade of grey that does both jobs well, which tells you the element is being asked to do too much.

If contrast is new to you, my earlier piece on why contrast matters more than color choice walks through how the ratio is calculated and why a pretty palette can still be unreadable.

"But labels make the form look cluttered"

This is the objection I hear most, usually from someone who designed the form at 1440 pixels wide and never looked at it on a phone. Visible labels do add height. A five field form gains around 100 to 120 pixels. That is the price, and it is smaller than it sounds.

Clutter comes from inconsistency far more than from the presence of words. A form where every label sits in the same spot, in the same size and weight, reads as calm. Here is the setup I give to people who ask:

• Labels above the field, left aligned, so the eye moves straight down one column.
• Label text at 14 or 15 pixels, medium weight, in the same color as body text, not grey.
• About 6 pixels between a label and its field, and 20 to 24 pixels between one field group and the next, so each label clearly belongs to the box beneath it.
• Placeholders only for examples of format, like "e.g. 14 March" or "[email protected]", never for the field's name.
• Help text that people need while typing, such as password rules, placed below the field in small but readable text, so it stays visible.

Floating labels, the kind that shrink and slide up into the border when you click, are a reasonable middle ground if a client insists on the minimal look. They keep the label visible after typing. My reservation is that the shrunken label often drops to 11 or 12 pixels in a pale grey, and you are back to the contrast problem in a smaller font. If you use them, check the floated state against the 4.5:1 ratio, not only the resting state.

The pottery form, after

We changed four things and nothing else. Every field got a visible label above it in #333333 at 15 pixels. The placeholder in the date field became "e.g. Saturday 9 May", which told people the format without pretending to be a label. The "Anything we should know?" box became a labeled field marked "(optional)", because people had been unsure whether it was required. And the error message moved from the top of the form to just under the field that caused it.

Over the following six weeks, completed bookings rose from 41 to 63 against similar visitor numbers. I would not claim the labels alone did all of that, since spring is a busier season for her anyway, but the wrong field errors dropped almost to zero, which is the part I can tie directly to the change.

Form fields follow the same rules as any other text on a page. Line length, spacing, and grouping still apply, and I have written about how line length decides whether people keep reading if you want the typographic side in more depth.

Check one form this week

Pick a single form on a site you look after, the contact page is usually the best place to start. Fill it in on your phone, then tab back to the top and see whether you can still tell every field apart without deleting anything. If you cannot, add visible labels and move the placeholder text to format examples only. It takes perhaps half an hour. More practical pieces like this sit in the web design section.