Forms That Don't Lose People: Labels, Errors and Input Design

A form is often the most important screen in a product. It's where a visitor becomes a lead, a shopper becomes a customer and a download becomes an account. It's also where a lot of people quietly give up. The good news is that most form problems have well-known fixes.

Ask for less

Every field is a small cost for the person filling it in. Before adding one, ask whether you really need that information right now.

• Remove fields you could collect later, or not at all.
• Mark optional fields clearly, or better still, remove them.
• Don't ask for the same thing twice, like typing an email address a second time to confirm it.

Labels that stay visible

Placeholder text inside an empty field looks clean, but it disappears the moment someone starts typing, and then they're left wondering what the field was for. Use real labels that stay visible. A floating label that moves above the text as you type is a good compromise between tidy and clear.

Be specific, too. "Name" is ambiguous on a business form. "Your full name" isn't.

Use the right input for the job

Small technical choices make a big difference on a phone:

• use the email input type, so phones show a keyboard with an @ key
• use a numeric keyboard for phone numbers and verification codes
• allow autofill, with the right autocomplete hints so browsers can help
• don't split a phone number or a date across several boxes without a strong reason

When should a form show errors?

Shouting "invalid email" while someone is still typing is irritating. Waiting until they submit a long form and then showing ten errors at once is worse.

A balanced approach: check each field when the person moves on from it, and show the error right next to the field it belongs to. When the form is submitted with problems, move focus to the first one.

Write error messages like a helpful person

Compare "Invalid input" with "Phone numbers need 11 digits, like 03001234567". A good error message says what went wrong and how to fix it, in plain language, without blaming anyone. And never clear the whole form because one field had a problem.

Don't forget accessibility

• connect every label to its input, so screen readers announce it
• announce errors to assistive technology, not only with red text
• make sure the whole form works with a keyboard alone

Confirm what happened

After submitting, tell people clearly that it worked and what happens next. "Your order is confirmed. We've emailed your receipt." is far more reassuring than a bare "Success".

Behind the scenes, make sure a submission can't be lost. On our own site, enquiries are saved before they're emailed, so a problem with email never loses a message.

Our product design work treats forms as the high-stakes screens they are.