Form Design
Designing the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
UI ComponentsEvery 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
You may ask
Frequently Asked Questions
Should form labels be above or beside the field?
Above, in a single column. It reads fastest, survives translation into longer languages, and works without change on mobile. Side labels save vertical space and cost alignment, wrapping and scan speed.
When should form validation run?
On blur for each field, so people learn about a problem while they are still looking at it, then again on submit as a backstop. Validating on every keystroke flags an email as invalid before anyone finishes typing it.
How many fields should a form have?
As few as the next step genuinely requires. There is no universal number, but every optional field costs completions, and fields added “for the CRM” are the cheapest thing to cut when conversion matters.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us