Forms templates

4 templates

A form is the point where a visitor becomes a customer, and it is usually the least-tested part of a site. These have real labels, visible focus, inline validation and states for error and success.

The form is where a visitor becomes a customer

It is also, on most sites, the least-tested part of the page. These templates all have real labels, visible focus, inline validation that fires at the right moment, and states for error and success — because those four things are where completion rates are won and lost.

A placeholder is not a label. It disappears the moment someone starts typing, so anyone who is interrupted loses the context. It usually fails colour contrast. And it gives you a much smaller click target, because clicking a real label focuses its field.

Validate on blur, not on every keystroke. Telling someone their email address is invalid while they are still typing the first letter is hostile. Validate when they leave the field, then re-validate on input only for a field that has already failed, so the error clears the moment it is fixed.

Move focus to the first invalid field on submit. Without it, a keyboard or screen reader user is told the form failed and has no idea which of eight fields is the problem.

Autocomplete is the cheapest win available

The autocomplete attribute lets browsers and password managers fill a form in one tap. name, email, tel, street-address, postal-code and cc-number are all standard tokens, and using them measurably improves completion on mobile — where typing an address is the single most abandoned step in most checkouts.

On sign-in forms specifically, autocomplete="username" on the email field paired with current-password is what password managers look for. On sign-up, use new-password so they offer to generate one. Getting these two wrong is why some login forms will not autofill, and it is one attribute each.

Never block paste on a password field. It breaks password managers, which pushes people back to passwords they can remember — the opposite of what the restriction is meant to achieve.

Other categories