Form Labels: The Invisible Barrier Blocking Your Signups

Every website funnel narrows to a form. Whatever you spent on ads, content, and design, at the end there’s a box asking for an email address, and everything depends on whether the visitor fills it in. Which is why it amazes me how often the boxes at the bottom of the funnel are broken in a way their owners cannot see: the fields have no labels.

I don’t mean they look unlabeled. Visually there’s usually text right there — gray words inside the box saying “Email address” or “Your name.” That’s a placeholder, and a placeholder is not a label. The distinction sounds pedantic, so let me make the case that it’s anything but.

A label, in HTML, is a specific element with a specific job: it’s tied to a form field through markup, so that software knows this text describes that box. When the connection exists, three things happen. A screen reader announces “Email address” when a blind user reaches the field, instead of announcing “edit text” — which is like handing someone a stack of blank paper forms and saying “you’ll figure it out.” Clicking the label focuses the field, which turns a small tap target into a big one — a real gift on phones, where fingers are imprecise and every miss costs a fumble. And browsers use labels to figure out what a field wants so autofill can fill it, and autofill, for many people, is the difference between completing your form and abandoning it.

A placeholder does none of this reliably, and it adds a failure all its own: it vanishes the moment the visitor starts typing. Think about what that means in practice. You’re filling out a five-field form, you get interrupted, you come back. Which box was which? The text that told you is gone from every field you touched. Anyone with a shaky short-term memory, anyone distracted, anyone who paused to hunt for their VAT number in another tab now has to delete their own input to see what the field wanted. And the standard gray of placeholder text usually fails minimum contrast anyway, so plenty of visitors could barely read the hint even before it disappeared. The placeholder-as-label pattern manages to be worst at exactly the moment the user is trying hardest.

How did such a broken pattern become the default? Aesthetics, mostly. Labels above fields make a form taller. Putting the text inside the boxes makes the form look shorter, and short forms are supposed to convert better. But notice the sleight of hand: the form isn’t shorter. It has exactly as many fields as before. It just looks shorter in the design mockup, while becoming harder to actually complete. This trade — looking easier at the cost of being harder — runs through a great deal of web design, and forms are where it does the most damage, because a form isn’t something visitors look at. It’s something they do.

Now put the accessibility lens back on, and consider who the unlabeled form excludes completely rather than just annoys. A blind user tabbing through fields that announce nothing is filling out a form by guesswork; most will reasonably give up. And here’s the business arithmetic that I think gets missed: think about where in the funnel this failure sits. A person on your signup form has already done the expensive part. They found you, read your pitch, and decided to say yes. Marketing’s whole job is over and it worked. Losing a visitor on the homepage costs you a maybe; losing them on the form costs you a yes. The unlabeled field is a barrier placed at the single most valuable square foot of your entire site.

What makes this failure so persistent is that it’s invisible from the inside. The founder testing the signup flow is sighted, knows what every field wants because they designed it, types on a full keyboard, and never gets interrupted. For that person the form works flawlessly, forever. No error is thrown, no complaint arrives — people who can’t complete a form rarely write in; they were, after all, not yet customers. This is a big part of why I built form checks into GazeSite: the connection between a label and its field is right there in the HTML, checkable by a machine, even though no amount of looking at the rendered page will reveal whether it exists.

The fix is almost embarrassingly small. Give every field a visible label element, properly associated with its input. Keep placeholders if you like them, but demote them to what they’re good at: format hints, like showing an example phone number. Tell the browser what each field expects so autofill works. For a typical signup form this is minutes of work per field. Against that, weigh what the form is for. You built the entire site to get people to this box. It seems worth telling them what goes in it.