Form Design and Validation, Done Properly
The structure, labeling, error handling and submission behavior of the places where people give you information.
Marcus Adeyemi
The key figures
- Label requirement
- a visible label associated with every control
- Autocomplete
- autocomplete attributes let browsers fill known fields
- Input types
- email, tel and url bring the right mobile keyboard
- Error guidance
- identify the field, describe the problem, and say how to fix it
- Validation timing
- validate on blur and on submit; validating every keystroke punishes typing
- Server-side validation
- required regardless of what the client does
Why this is worth getting right
Forms are where most conversions are won or lost, and most form abandonment is caused by avoidable friction rather than reluctance to buy.
Do this, not that
Do
- Use one column, because a two-column form invites people to miss fields
- Keep labels visible rather than relying on placeholder text that disappears
- Set the right input type and autocomplete attribute on every field
- Write errors that say what to do, next to the field they concern
- Preserve what the person typed when validation fails
Don’t
- Placeholder text as the only label
- Clearing the form on an error
- Asking for information you do not need for this step
- Validating aggressively on every keystroke before the person has finished
When to bring in help
Our advice Bring in help when analytics show a specific field where people abandon, when a checkout or application form converts far below sector norms, or when accessibility testing flags the form as a blocker.
Where this comes from
- Baymard Institute — Checkout and form usability
- MDN Web Docs — Client-side form validation
- GOV.UK Design System — Form components and error messages
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
