Label or placeholder: the form detail that costs conversions

It's a fashion that returns with every redesign: remove the labels above the fields and write the field name directly inside it, in grey text. The form looks shorter, cleaner, more “designed”. The problem: that grey text — the placeholder — disappears at the exact moment the user needs it, which is when they click and start typing. On a landing page whose form is the single conversion point, this aesthetic choice is paid for in abandonment. Here is what web form research says, and how to get a form that is both clean and usable.

Why the placeholder alone is a problem

• Working memory is taxed for nothing — the label disappears as soon as typing starts: on a multi-field form, the user must remember what each field asked, or delete their input to re-read the prompt.
• Reviewing before submitting becomes impossible — a filled form shows only values, without the questions: there's no way to check that the right content went into the right field without erasing everything.
• Filled fields look like empty ones — a grey placeholder resembles a typed value; users skip fields they believe are already filled, especially on autopilot on mobile.
• Accessibility suffers — placeholder contrast is usually insufficient, some screen readers ignore them, and the absence of a programmatic label violates the accessibility criteria covered in our article on accessibility standards.
• Error correction becomes laborious — after an error message, the user returns to a field whose name is no longer visible: they correct blind.

What web form studies say

Research on form usability is surprisingly rich, and remarkably consistent. The reference work by Bargas-Avila and his team at the University of Basel, synthesised in “Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design” (2011), explicitly recommends placing the label above the field, as permanent text, and reserving the placeholder for a format example (“jane.doe@email.com”) rather than the label itself. These guidelines were then validated empirically: the study by Seckler, Heinz, Bargas-Avila, Opwis and Tuch presented at CHI 2014 (“Designing Usable Web Forms: Empirical Evaluation of Web Form Improvement Guidelines”) measured that forms following these rules are completed faster, with fewer errors and higher satisfaction — with the clearest gap precisely on the points that concern label clarity.

Best practices, field by field

• Permanent label above the field — above rather than to the left: vertical reading is faster on desktop and it's the only layout that works well on mobile.
• Placeholder reserved for format examples — phone number, date format, email structure: an example, not an instruction, and never information that exists nowhere else.
• Floating label if aesthetics demand it — a label that starts inside the field then shrinks and moves up on focus is an acceptable compromise: the information stays permanently visible. Watch the contrast and reduced size of the floated label.
• Requirements visible before typing — an “optional” mention on non-required fields (rather than asterisks everywhere), format instructions before the field and not after the error, as detailed in our guide on form microcopy.

What about “the form looks longer with labels”?

The concern is real but misdirected: what discourages users isn't the form's height in pixels, it's the number of decisions and inputs requested. A four-field form with clear labels is completed faster — and with fewer abandonments — than a “clean” four-field form where every field requires guesswork. If perceived length is genuinely an issue, the effective levers are elsewhere: reduce the number of fields, switch to a multi-step form, or move secondary questions to after the conversion. Removing labels doesn't shorten the form, it only hides the questions.

On a landing page, the form is the exact spot where conversion happens: it's the worst place to sacrifice clarity for aesthetics. The forms in LanderKit templates (€89 each, €229 for the 10-template bundle) apply these rules out of the box — permanent labels, placeholders reserved for examples, error messages under the relevant field — so the remaining work is the one that matters: choosing the right questions. To go further, our guides on error messages and form abandonment complement this one.