Form Design Best Practices
Forms are how users give you information — sign-ups, checkouts, requests, feedback. They are also one of the most friction-prone parts of any digital product. Good form design reduces abandonment and errors.
Layout Principles
- Single column: Users complete single-column forms faster and with fewer errors than multi-column layouts. Exceptions: short related pairs (First Name / Last Name, City / Postcode).
- Labels above fields: Labels positioned above fields are easier to read on mobile and clearer in context than placeholder-only labels, which disappear when the user starts typing.
- Group related fields: Visually group fields that belong together (e.g. all address fields together).
- Progress indicators for long forms: If a form has multiple steps, show users how many steps there are and where they are in the process.
Validation and Error Handling
- Validate inline, not on submit: Show errors as soon as the user leaves a field, not after submitting the whole form.
- Be specific about errors: "Invalid email" is better than "Error". "Password must be at least 8 characters and include a number" is better than "Password invalid".
- Mark required fields clearly: Use an asterisk (*) on required fields with a legend, not on optional ones.
- Preserve input on error: Never clear the form on submission error. Users should only need to correct the specific fields with problems.