Forms

Keep a name above every box

Write a short name above each box, like “Email” or “Phone number”, and keep it there. Some forms put the name inside the box in light grey letters instead. It looks neat, but the grey words disappear as soon as you start typing. If the phone rings halfway through, you come back and can’t remember what the box was asking for. Those pale letters are also hard to read, and some screen readers for blind people skip them.

If people need a hint, like the format of a phone number, write it in small normal text under the name. It stays visible the whole time.

One box under another

Put the boxes in one column, one under the other. People read a form from top to bottom. When boxes sit in two columns, people miss some or fill them in the wrong order. A small pair that obviously belongs together, like postcode and city, can share a line.

Ask things in the order people think about them. First who they are, then how to reach them, then the details of the order or booking.

Ask for less

Before you add a box, ask yourself who will read the answer. If nobody will, leave it out. One box for the full name is usually enough. There is no need to ask for the email twice; show it back to the person on the next screen so they can check it. Don’t ask for a phone number unless someone is really going to call.

Some boxes may be optional. Write “(optional)” next to their names. Most forms have fewer optional boxes than required ones, so this is less clutter than putting a star next to every required box.

Let the phone help

On a phone, the keyboard changes depending on what the box expects. A box for an email address can bring up a keyboard with the @ sign already on it. A box for a phone number can show big number keys. Developers do this with the type setting of the box, for example type="email" or type="tel".

Phones and browsers can also fill in a name, address or email for people with one tap, if the form tells them what each box is for. This is the autocomplete setting, with words like name, email, tel and postal-code. Please don’t switch this off. For many older people and for anyone with shaky hands, it saves a lot of typing.

Error messages that help

Don’t show an error while someone is still typing. A red warning that pops up after the first letter of an email address feels like being told off. Check the box when the person moves on to the next one.

Put the message right under the box it is about. Say plainly what is wrong and how to fix it. “Enter a date like 14/11/2026” helps. “Invalid input” doesn’t. Use a small warning sign or the word “Error” as well as the red colour, because some people can’t see red well. And never wipe out what the person typed. If one digit is wrong, they should only have to fix one digit.

On a long form, also show a short note at the top that lists the problems, with a link to each box.

Don’t ask twice

If someone already gave you their address, don’t make them type it again a few steps later. Offer a tick box like “Same as delivery address”. The accessibility rules added this in 2023 as a rule called Redundant Entry.

The same thinking applies to signing in. Let people paste their password and use a password manager. A sign-in that makes you copy a code by hand or solve a picture puzzle is very hard for people with a poor memory or stiff fingers.