Design

Form design: the fastest route to more completions

Forms are where most digital transactions succeed or fail. A handful of well-established practices lift completion measurably.

Key takeaways

  • Every field costs completions — justify each one.
  • Visible labels above single-column fields prevent errors.
  • Validate on blur with specific messages and never clear input.
  • Correct input types and autofill make mobile completion far easier.

Ask for less

Every field costs completions. Review each one and ask what happens if it is not collected now — a surprising number can be gathered later, inferred, or dropped entirely.

Where a field is genuinely needed but unusual, explain why. People abandon forms that appear to ask for more than the task warrants.

Layout and labelling

  • Labels above fields, always visible — placeholder-only labels disappear when typing.
  • One column; multi-column forms cause skipped fields.
  • Group related fields with clear headings.
  • Match field width to expected content as an affordance.

Validate helpfully

Validate on blur rather than on every keystroke, which is distracting, and show errors next to the field with a specific message. “Invalid input” helps nobody; “Enter a date in the past” does.

Never clear what someone has already typed. Losing entered data on a validation error is a reliable way to lose the submission entirely.

Respect the device

Set the correct input type so mobile keyboards match — numeric for numbers, email for addresses. Enable autofill with proper autocomplete attributes.

Test the whole form on a phone with one hand. Interactions that are effortless with a mouse can be difficult on a small screen, and most traffic is now mobile.

Accessibility in forms

Forms are where accessibility failures have the highest consequence, because a form that cannot be completed blocks the task entirely.

  • Every input needs a programmatically associated label, not just adjacent text.
  • Errors must be announced to assistive technology, not only shown visually.
  • Do not convey requirements by colour alone.
  • Group related inputs with a fieldset and legend.
  • Keep focus visible and move it to the first error on failed submission.

These also improve the experience for everyone. Clear labels and specific errors help sighted mouse users as much as anyone else.


Frequently asked questions

Often yes. Multi-step forms with a progress indicator feel more manageable and let you save partial progress. Keep steps logical rather than arbitrary.

Mark whichever set is smaller. If most fields are required, mark the optional ones instead.

Aligned with the field column, after the last field, with a label describing the action Send enquiry rather than Submit .

Working on this?

A conversation with our team, no charge and no obligation.

Book a conversation