Choose this type of form when you:
- want your users to be able to complete and submit it online;
- want the form's content to be easily sent to an internal system rather than having to re-type;
- need it to be responsive so it can display on a variety of devices;
- want to take online payment; or
- do not accept handwritten or faxed copies.
You must keep web forms as simple as possible. Only ask what’s needed to run your service.
How web forms work
Web forms are made up of components and patterns.
Components are reusable parts of a web form that have been built to support online applications.
Individual components can be used in multiple different patterns and contexts. For example, the "text input" component can be used to ask for an email address or someone’s name.
Simple, conversational tone
Form field labels should be written in a conversational tone. For example, instead of "Claim type" use "What type of claims will you do this work on?"
Form field labels should sound like you are being asked the question by another person. Avoid labels that are robotic or abrupt.
A good way to test a label is to read the question back to yourself.
Get other people who aren't familiar with the subject to explain what's being asked and how to answer the question.
Good form field labels are easy to scan and take minimal effort to understand.They use short sentences and simple vocabulary.
- Make field widths are proportional to the input they take.
- Ensure that users can enter the information they need at smaller screen sizes.
- Ensure answer text can be read correctly by screen readers.
- Avoid short "Yes" or "No" answers. Instead, write the answer so it will stand alone and be understood without the question above it.
Optional and mandatory fields
- Only ask for the information you absolutely need to run the service.
- If you do ask for optional information, mark the labels of optional fields with '(optional.)'
- All form fields should be given labels.
- Don't hide labels, unless the surrounding context makes them unnecessary.
- Labels should be aligned above their fields.
- Label text should be short, direct and in sentence case.
- Avoid colons at the end of labels.
- Labels should be associated with form fields using the "for" attribute.
- Don't use placeholder text in form fields, as this will disappear once content is entered into the form field.
- Use hint text for supporting contextual help, this will always be shown.
- Hint text should sit above a form field.
- Ensure hint text can be read correctly by screen readers.