COI Toolkit Beta


4c When and how to use PDFs  
Home / index
5b Choosing and using the right form element


5
Forms

How to design and layout basic forms so that they are easy to understand and fill out.

How to minimise the potential errors entered by the people filling out your forms.

When errors occur how to make fixing the errors as quick and easy as possible

Test:Forms: test yourself!

5a Basics of form layout


Create a clear path through the form:

  • Avoid multi-column forms unless absolutely necessary
  • Avoid creating a 'jagged', misaligned appearance

Group similar items together, and order logically:

  • Give each group a title and make distinctive:
    • Use borders, spacing or colour etc.
    • CODE:Use headings <h1>, <h2> and so on
    • CODE:Use <fieldset> and <legend> to code these and style with CSS

Provide a label for every single form item (sometimes called ‘form fields’) Position form labels close to the input elements

  • For short labels, consider right-aligning next to the input element
  • For longer labels, consider placing directly above the input element

Put help and prompts near to the input elements and mark required input clearly and unambiguously [see 5c]

Notes and discussion points

What about really long forms?
Consider splitting very long forms into separate logical pages

  • Test with people: Test to make sure splitting up the form makes form filling easier

If splitting the form:

  • Indicate how many steps there are and the current position, for example:
    • ‘Page 2 of 4’
    • or by using a ‘progress bar’
  • Provide a means to go back to earlier pages via a link and/or a progress bar

View references for this page
Example form showing a clear reading path (single column and right aligned labels) and elements grouped together into logical units Labels and prompts close to text input boxes. 1. Directly above, 2. Immediately before and right aligned, 3. Immediately before and placeholder text within the input box itself Labels and prompts far away from the input boxes. Do not do this it makes it easy to miss the correct box A poor form because it has some text boxes for the address with missing labels – this could cause confusion about what should go where and is an accessibility problem A long form split into several smaller pages. Each of the smaller pages has a progress bar and a way to go back Example progress bars. 1 graphical showing the current stage through a graphical change. 2. Textual showing the current stage by disabling the link, 3. A simple pagination: < back page 2 of 4

© Crown Copyright 2004-2012