Form Design
Designing the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
Every field in a form is a request, and the person filling it in is deciding whether to keep going. That makes the first question about scope, not layout: which fields genuinely have to be answered now, and which were added because somebody in marketing might want the data later. Removing a field reliably outperforms redesigning one. The order matters nearly as much — easy and obviously-relevant first, sensitive last, because commitment accrues as people progress.
After scope come the mechanics that decide whether a willing user succeeds. One column, because multi-column forms get read in the wrong order. Labels above fields and never placeholder-as-label, which vanishes the moment someone types and strands anybody who gets interrupted. Validation on blur rather than on submit. Correct `autocomplete` attributes and input types, which is the difference between a phone field that summons a number pad and one that does not. And an explicit statement of what happens after submission.
Long forms are flows, not pages
Past roughly ten fields, a form is a user flow: split it into steps with a stepper, give each step a URL, and save progress between them. A single page of 30 fields loses everyone who gets interrupted, and everyone gets interrupted.
In practice
A lending product asked for employment details before showing the rate. 62% of applicants dropped at that step. Moving the rate estimate before employment — same fields, reordered — brought drop-off at that point down to 24%, because people now knew what they were filling the form in for.
Where teams get it wrong
- Fields nobody needs yet, collected because a report might want them one day.
- Placeholder text used as the label, which disappears on focus and takes the question with it.
- Validation only on submit, so errors surface after the relevant field has scrolled away.
- Missing `autocomplete` and input types, forcing manual typing of data the browser already has.
- No indication of length. People abandon a form they cannot see the end of.
( Learn more )
Related terms
All terms- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
- Stepper (UI)A control that breaks a task into ordered steps and shows where somebody is in the sequence.
- Conversion Rate Optimization (CRO)The practice of systematically increasing the share of visitors who complete a desired action, using research and experiments rather than opinion.