Forms people actually finish
Cut fields, validate at the right moment, write errors in plain language and stop fighting autofill: a step-by-step look at forms.
A form is where someone’s interest turns into action: a lead, an order, a signup. It’s also where you lose people most often. Not because the form is hard, but because it’s mildly annoying many times in a row.
Remove fields
The most effective thing you can do to a form is make it shorter. Go through each field and ask: who reads this answer, and what do they do with it? If the answer is “might be nice to have”, the field goes.
Common candidates:
- “Confirm password” (a show-password toggle does the job better);
- separate first, middle and last name fields where one would do;
- “How did you hear about us?” on the payment step;
- a phone number nobody plans to call.
Optional fields aren’t free either. People read them, think, and decide to skip. If a field is optional, maybe it shouldn’t be there at all.
Order and grouping
Split a long form into meaningful groups: contact, address, payment. A multi-step form is good when the steps really differ and people can see how many are left. It’s bad when each step is one field and a Next button. That’s the same long form, only slower.
One column almost always beats two. The eye moves top to bottom and nothing gets missed on the right.
Validate as you go, not on every keystroke
Reporting errors after Submit, then scrolling to a list of problems at the top, is too late. Saying “invalid email” after the first character is too early, and annoying.
What works: validate a field when the person leaves it, and once an error is showing, clear it the moment the value becomes valid. Then validate everything again on the server. Browser validation is for convenience, not protection.
Error messages
A good message says what’s wrong and how to fix it, in plain words, next to the field.
- Not “Invalid format” but “This phone number is missing digits.”
- Not “Error 422” but “This email is already registered. Sign in?”
- Not the whole form in red, but the one field that needs attention.
And never wipe what someone typed after an error. A form that clears every field because one was wrong is the most reliable way to get someone to close the tab. Same for server failures: the request failed, the data stays put.
Autofill and keyboards
Browsers and phones can fill in name, email, address, phone and even card details on their own, as long as you don’t get in the way. Fields just need the right attributes:
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input name="code" inputmode="numeric" autocomplete="one-time-code">
type and inputmode also bring up the right keyboard on a phone: one with @ for email, a number pad for a code. With autocomplete="one-time-code", an SMS code fills in with a single tap.
A frequent failure in generated forms: custom input components that look like regular fields but aren’t recognized by the browser, so autofill doesn’t work at all. Test on a phone, not just a laptop.
The submit button
The button names the action: “Place order”, “Send request”, not “Submit” or “OK”. Don’t disable it until the form is complete; people can’t tell why it’s gray. Let them press it and show what’s missing.
Once pressed, the button shows that something is happening and prevents a second submission. A duplicate order caused by a slow connection is a headache for both the customer and support.
How to test it
Fill in your own form on a phone, one-handed, first with autofill off and then with it on. Make a mistake in each field in turn. Submit on a bad connection. Whatever annoys you annoys everyone else too. They just won’t write to tell you. They’ll leave.
SUBXCAT goes through a product’s key forms field by field and gets them to the point where people finish them.