Start with the task, not the fields

A form is often the point where a visitor decides whether they can complete a task. They might be requesting a callback, signing up for an event, or sending a question. Before designing the fields, write down what the visitor expects to happen after submission and what information your organization truly needs to make that happen. A contact form, for example, may need a name, a way to reply, and a message. Asking for a mailing address without a clear purpose adds work and may discourage someone from finishing.

Sketch the form in the order a person would naturally answer it. Put related questions together and choose familiar words instead of internal terminology. If a field is optional, say so next to its label. If most fields are required, a short note at the start can explain that optional fields are marked. Either approach is easier to follow than leaving people to guess.

Give every field a clear, persistent label

A label should tell people exactly what belongs in a field. “Email address” is clearer than “Contact details” when the form requires an email address. Keep the label visible while someone types; placeholder text inside an empty field is not a reliable substitute because it disappears as soon as the person starts entering a value. A visible label also gives someone a reference point when they review their answers.

Use the appropriate input type when a field has a specific purpose, such as an email address or phone number. Where supported, autocomplete can help people fill in familiar details without retyping them. These choices can make a form more convenient, but they do not replace a meaningful label. Make sure the visible label is connected to its field in the form’s implementation so that assistive technology can identify it.

If several controls answer one question, introduce them as a group. For example, “How would you prefer us to reply?” can sit above choices for email and phone. Each choice still needs its own label. Grouping helps visitors understand the relationship between options rather than encountering a list of disconnected controls.

Put instructions where they help

Instructions are most useful when they prevent a predictable mistake. Place a brief note near the field it concerns, rather than hiding all guidance in a paragraph at the top of the page. An event registration form might say “Enter the name you want on your badge” beside the name field. If a message has a length limit, state the limit before someone begins writing. Explain a required format only when the format matters; accepting a reasonable range of input is often easier for visitors than enforcing a rigid pattern.

Distinguish between information needed to complete the task and background detail. A contact form does not need a long explanation beside every field. It may, however, need a short statement explaining what happens next, such as whether the visitor should expect a reply by email. This sets expectations without making someone search elsewhere on the site.

Avoid relying on color, an icon, or position alone to communicate an instruction. A red border without words does not explain what is wrong, and a note that says only “See above” becomes hard to follow in a long form. Write instructions that remain understandable when read on their own.

Help people recover from mistakes

Even a well-designed form will sometimes receive incomplete or unexpected entries. When that happens, keep the person’s answers in place where practical and show a specific message near the affected field. “Enter an email address so we can reply” is more useful than “Invalid input.” If the form also shows a summary of problems at the top, make each item clearly identify the field that needs attention.

Explain how to fix the issue without blaming the visitor. If a date is needed in a particular format, show an example next to the field before submission and repeat the expected format in any error message. After a successful submission, show a clear confirmation so the person knows the form went through and does not submit it again out of uncertainty.

Check the form in everyday conditions

Review the finished form as a visitor would. Try completing it using only a keyboard: can you reach every field and button in a sensible order, and can you tell which control has focus? Zoom in and check whether labels, instructions, and errors remain readable without covering the fields they describe. Submit it with a required field empty, then confirm that the error is understandable and easy to find.

Ask someone unfamiliar with the form to complete a realistic task, such as requesting a callback. Notice where they pause or ask what a label means. Their questions can reveal confusing wording that was invisible to the people who built the form. Revisit the form when its purpose or process changes: a clear label cannot compensate for a question that no longer needs to be asked.

Back to category ↗