The team at GOV.UK have carried out loads of research into design and accessibility which can easily be followed when building forms in the GOSS forms designer. You can find their guidance at:
- https://design-system.service.gov.uk/ (opens new window)
- https://www.gov.uk/service-manual (opens new window)
This article outlines some of our best practices when designing forms in the Digital Platform. It doesn't repeat things from GOV.UK.
Accessibility
We have an article dedicated to Building Accessible Forms.
Naming
Give your form a sensible name and description. The description is used around the platform and on front-end sites when forms are related to articles (and appear as links rather than rendered in the body of a Forms Service template).
You should name all of the fields on your forms to make them easier to work with.
Validation, Error Messages and Hints
Validation makes sure that users enter data in the format you expect. Error messages and field hints help them do that. These articles look at this topic in more depth:
Paging
The GOV.UK design system recommends a single question per page. If you have a very long form that might be a bit much, but you should at least try to split up your form into meaningful sections with a page per topic. We've got a tutorial that covers Multipage Forms and Branching.
Conditional Layouts vs Showing and Hiding Fields
Showing and hiding fields creates dynamic behaviour on a page using JavaScript. If a user has JavaScript disabled (rare, but can happen) all of the "hidden" fields will be displayed. Hidden fields will also be found and read by screen readers, and can be confusing.
Conditional layouts evaluate their conditional behaviour server-side as the page is loading. That means you can use the values entered on one page to hide fields on a subsequent page. The advantage of that is the fields aren't just "hidden" they won't be present in the page source at all. The disadvantage with that is you then can't "show" them (without going back a page and changing whatever value the condition is using).
Alignment
Top aligning your form labels is best for clarity and looks best on mobiles.
Optional vs Required Field Markers
In your form design you can choose whether required fields are marked with an asterisk, or optional fields are marked with text - the default it "(optional)". The design team at GOV.UK recommend marking optional fields as optional, and not marking required fields, so that's the default behaviour of the forms designer.
Prefixes and Suffixes
Text and number input fields can have Field Prefixes and Suffixes added to them.
Share this page
