Web form components

Why use this pattern

You must keep web forms as simple as possible. Only ask what’s needed to run your service.

How it works

Components are reusable parts of a web form that have been made 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. 

If you are using the eServices Platform, Drupal web forms are included. The Drupal web forms include built-in styles and settings to render as to meet the standard.

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.

Form fields

  • Make field widths 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)'.

Labels

  • 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.

Hint text

  • 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.

Example

The renew a vehicle registration form. See example.

Do you need a new licence plate?

  • Yes, I need a new licence plate
  • No, I don't need a licence plate

The submit a class 1 exploration notice form. See example.

How many claims will you be working on?

  • I will be working on 1 to 10 claims
  • I will be working on more than 10 claims

The ATIPP request for access to records form. See example.

How do you want to access the records?

  • I want to receive a copy of the records
  • I want to view original records in person
Last update:
oct 23, 2018