Product & UX
Form Design That Increases Completion
Updated September 16, 2015By the CalliArc team
Key takeaway
Remove fields before optimising anything else — every field costs completions. Then use a single column, labels above the fields, validation that helps rather than scolds, and never clear what the user typed when something fails.
Forms are where intent turns into a record, and where most of it leaks away. The improvements are unglamorous and measurable, which makes them some of the best-value design work available.
Ask for less
- Justify every field. If nobody can name what happens with the answer, delete it.
- Move optional questions after the submission, when the user has already committed.
- Derive what you can: postcode lookup for addresses, card type from the number, country from the phone prefix.
- Split genuinely long forms into short steps with visible progress — but don't split a four-field form into four screens.
Layout and labels
- One column. Multi-column forms cause skipped fields and ambiguous reading order.
- Labels above the input, always visible. Placeholder text as a label disappears the moment someone types and is a persistent accessibility failure.
- Group related fields, and match field width to expected content — a postcode field the width of the screen is a small lie about what's expected.
- Mark optional fields rather than required ones when most are required, and be consistent.
Validation and errors
- Validate on leaving a field, not on every keystroke, and confirm success where it reassures.
- Say what's wrong and how to fix it: "postcode should look like SW1A 1AA", not "invalid input".
- Show errors next to the field, and summarise at the top for long forms with links to each problem.
- Never clear the form on error. Losing what someone typed is the single most reliable way to lose them.
- Accept messy input and clean it yourself — spaces in card numbers, different phone formats, mixed case emails.
Mobile specifics
- Set the input type so the right keyboard appears — numeric for numbers, email for email addresses.
- Use autocomplete attributes so browsers and password managers can fill fields correctly.
- Large touch targets, and avoid dropdowns with long lists — a filtered search or plain text entry is faster.
- Keep the submit button reachable and visible when the keyboard is open, and disable it after tapping to prevent duplicates.