Design a useful and accessible web form
A form asks someone to trust a service and invest effort. A short form can still fail if its questions are unclear, errors erase work or success is never confirmed. Design the content, interaction and recovery path together.
What to remember.
- Collect only information needed for the stated task.
- Give every control a visible, technically associated label.
- Preserve entered answers and confirm what happened after submission.
Define the outcome and remove unnecessary questions
Write one sentence explaining what the person receives after submission: a reply, registration, quote or recorded request. For every field, ask who will use the answer and when. Collect information needed only after an initial conversation later. A privacy notice does not justify collecting more than the task requires. Mark optional and required fields clearly.
Put questions in a natural order
Begin with information that is easy to provide, then ask for details needed to respond. Group long forms by topic with meaningful headings and show progress only when real steps exist. On mobile, avoid layouts that force the eye to jump between columns. The reading order, keyboard order and validation order should make sense together.
Keep labels visible and specific
Associate a label element with every control. Placeholder examples may help, but they disappear as someone types and cannot replace a label. Put format instructions and limits before submission. Group related choices with fieldset and legend. A required-field marker should be understandable without colour or an unexplained asterisk.
Help people enter information
Use an appropriate input type, useful autocomplete and a text area sized for the expected answer. Accept formats you can parse rather than demanding unnecessary punctuation changes. Do not block pasting. On a phone, check that the keyboard does not hide instructions, errors or the submit button. Repeat important validation on the server.
Explain errors without deleting work
An effective message identifies the field, describes the problem and states the next action. Show it next to the field and provide a summary linking to each issue when several exist. Preserve valid answers when submission fails. Test blank, long and unusual values, service outages and repeated clicks; never imply success when the server did not receive the request.
Confirm the result and next step
After submission, state whether the request was recorded, what happens next and where help is available. Avoid promising a response time the team cannot maintain. If delivery fails, offer a retry or another contact route. A silent session expiry should not force someone to recreate a long response.
Test a complete task on different devices
Complete the form by keyboard, with zoom, on a phone and with a screen reader where possible. Check focus, announced labels, grouped controls, error messages and real confirmation. Ask someone unfamiliar with the project to try without guidance; record hesitation and questions, fix recurring blockers and repeat the task.