The first rule is fewer fields
Every field is a small negotiation, and some of them lose. Before designing a form, go through it field by field and ask what would break if this were removed — and whether it could be asked later, once the person has a reason to care.
- Do we act on this in the next month? If not, it's not needed at signup
- Can it be derived? Country from a phone number, city from a postcode, company from an email domain
- Can it be asked in context later, when it's relevant and the value is obvious?
- Is it optional? Then say so on the label rather than marking everything else required
Layout and labels
- One column. Multi-column forms cause people to miss fields and read in the wrong order — the exception is genuinely paired data like city and postcode
- Labels above fields, always visible. Placeholder-only labels vanish on typing and take the field's meaning with them
- Field width should hint at expected length. A postcode field as wide as an address field is a small, constant confusion
- Group related fields with proximity — closer to each other than to the next group
- One primary submit button. A cancel next to it should look quieter, not identical
Use the right input type. A numeric type brings up a number keypad on a phone; an email type brings up the @ key. It's one attribute and it removes real friction on the device most people are using.
Validation timing
Timing matters more than the messages. Validating on every keystroke tells someone their email is invalid while they're typing the third character, which is both wrong and irritating. Validating only on submit means finding six problems at once, after committing.
| Moment | Check |
|---|---|
| While typing | Nothing — except positive confirmation like password strength |
| On leaving a field | Format of that field, once it's had a real value |
| On submit | Everything, plus anything only the server can know |
| After a failed submit | Then live validation per field is welcome — they're fixing |
- Put each error next to its field, not only in a summary at the top
- Move focus to the first field with an error on a failed submit
- Say what would be valid, not that the input was wrong
- Never clear fields on error — losing a user's typing is worse than any wording
- Disable the submit button while submitting and say so, so nobody double-submits
Patterns that quietly lose people
| Pattern | Why it costs you |
|---|---|
| "Confirm password" | Doesn't prevent typos in a password manager era; a show/hide toggle does |
| Blocking paste in fields | Breaks password managers and helps nobody |
| Silent format rules | Rejecting spaces in a card number the user was never told about |
| Rigid date input | Three dropdowns instead of one typed field the code can parse |
| Required account before value | Asking for signup before the user has seen anything work |
| No autocomplete attributes | The browser can't fill it, so everyone types their address again |
<label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" inputmode="email" required/>Those three attributes let the browser fill the field, show the right keyboard, and tell assistive technology what it's for. It's the cheapest improvement on this page and it's routinely missing.
Common mistakes
- Collecting fields nobody will act on for months
- Placeholder text used instead of a label
- Validating on every keystroke, so a field is invalid while being typed
- Errors shown only in a summary far from the field
- Missing autocomplete attributes, so browsers can't help
Key takeaways
- The best form improvement is removing a field
- One column, labels above, right input type, sensible field widths
- Validate on blur and on submit — not on every keystroke
- Never clear a user's input on an error
Try it yourself
Take your signup form and remove every field you won't act on within a month. Then complete the form on a phone with a password manager. Whatever fought you is what your users are fighting too.