Mandatory elements on a question page
You must include the following elements on every question page in a form:
- a site header and site footer
- page header (context heading and either a question or statement H1 heading)
- form fields
- labels
- a continue button
- an error message and error summary
You can add optional elements, if they're needed.
Site header and site footer
Use the site header to reassure users they’re on the correct site as they land on the form and progress through it.
Include a site footer in your question page.
Adding the name of your form or service
You must add the name of the form or service to either the:
- site header – if it's a long form with multiple groups of questions
- context heading – if it's a short form with questions that aren't grouped together, such as an eligibility checker
Page header
The page header component includes the:
- context heading
- H1 heading – the main question or statement for the page
Context heading
The context heading sits above the H1 to give the user additional context about the questions.
It should be one of the following:
- the name of the form or service – if it’s a short form with questions that aren't grouped together (such as an eligibility checker)
- the name of a group of questions – if it's a longer form with questions that can be grouped into categories
- the step number – if each question page is a step in a journey the user must complete
For example, the context heading might be:
- 'Check if you qualify for adult disability payment’ where this is the name of the service and the questions are not grouped into categories
- ‘Your details’ for a set of question pages asking a user for their name, date of birth and email address
- 'Step 1 of 5' if the question page is the first step in a 5-step journey for the user
You do not need to use a context heading if the name of the form or service is the question page H1 and it is only a one page form.
H1 heading (question or statement)
Use the page header component for the main question or statement on the page (the H1). Include the heading text within the <title> tag.
If there’s only one question on the page, the heading can be a question or a statement.
If you’re grouping related questions together on one page, the heading must be a statement that summarises the theme of the questions. For example, ‘Contact details’ when asking users for their email address and telephone number.
Some forms change dynamically so that when a user inputs a response, a new heading appears without the page reloading. If you’re creating a dynamic form, change the <title> tag to the new heading. This tells screen reader users that the page has changed.
Setting labels and legends as headings for screen readers
If you’re asking one question per page, you must set the contents of a <legend> or <label> as the page heading. This means that screen readers users will only hear the contents once.
How you set labels and legends as headings depends on whether the question page has:
- a single form field and
<label> - more than one form field
Single form field and <label>
If the question page only has a single form field and <label>, make the heading the <label> and place it within the <h1>.
Sample HTML for Single question with heading as a label
<div class="ds_wrapper">
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<div class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Your details</span>
<h1 class="ds_page-header__title">
<label for="email">What is your email address?</label>
</h1>
</div>
<input class="ds_input" type="email" id="email" name="email">
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>More than one form field
If the question page has more than one form field, place the heading text and form fields within a <fieldset> element, with the heading text as the <legend>.
Sample HTML for Question page with single question with grouped fields example
<div class="ds_wrapper">
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<fieldset aria-describedby="unique-id-hint">
<legend class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Your details</span>
<h1 class="ds_page-header__title">
What is your date of birth?
</h1>
</legend>
<p class="ds_hint-text" id="unique-id-hint">For example, 31/3/1980</p>
<div class="ds_field-group ds_field-group--inline">
<div>
<label class="ds_label" for="unique-id">Day</label>
<input class="ds_input ds_input--fixed-2" type="input" id="unique-id" name="unique-id">
</div>
<div>
<label class="ds_label" for="unique-id2">Month</label>
<input class="ds_input ds_input--fixed-2" type="input" id="unique-id2" name="unique-id2">
</div>
<div>
<label class="ds_label" for="unique-id3">Year</label>
<input class="ds_input ds_input--fixed-4" type="input" id="unique-id3" name="unique-id3">
</div>
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>Pages with multiple questions
If you're asking multiple questions on a page, you can set the statement heading as the <legend>.
To do this, group the questions within a <fieldset> using the statement heading as the <legend>. This heading should not be a <label>.
You can only do this if there are no other fieldsets in the page as you must not place a fieldset within another fieldset.
Sample HTML for Multiple questions grouped on a question page example
<div class="ds_wrapper">
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_!_margin-top--4">
<fieldset>
<legend class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Step 3 of 5</span>
<h1 class="ds_page-header__title">
Bank account details
</h1>
</legend>
<div class="ds_question">
<label class="ds_label" for="unique-id">Name on the account</label>
<input class="ds_input" type="text" id="unique-id" name="unique-id">
</div>
<div class="ds_question">
<label class="ds_label" for="unique-id2">Sort code</label>
<p class="ds_hint-text" id="unique-hint-id2">Must be 6 digits long</p>
<input class="ds_input ds_input--fixed-10" type="text" id="unique-id2" name="unique-id2" aria-describedby="unique-hint-id2">
</div>
<div class="ds_question">
<label class="ds_label" for="unique-id3">Account number</label>
<p class="ds_hint-text" id="unique-hint-id3">Must be between 6 and 8 digits long</p>
<input class="ds_input ds_input--fixed-10" type="text" id="unique-id3" name="unique-id3" aria-describedby="unique-hint-id3">
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>Do not mix label and non-label headings
To ensure screen reader users get a consistent user experience, do not mix label and non-label headings in a form.
For example, if you have a page with multiple questions and a statement heading, make sure that no other pages have a heading as a <label>. Alternatively, consider restructuring your form to have one question per page.
Form fields
Use relevant form fields so users can answer the question. For example:
Use the type of input that enables you to collect the data you need in the correct format. Follow the guidance on choosing the most appropriate form fields.
You should give users the option to add more fields if they need to add more items. For example, multiple names.
Labels
Label every form field to tell users what to enter.
For example:
- 'Full name’ to tell users to enter their full name in a text input field
- ‘Give us more details’ to tell users to add more detail to a textarea field
Read the question component guidance to find out how to structure labels and form fields.
When grouping related questions on one page, use form spacing so it’s clear which label relates to which field.
Marking mandatory or optional information
To mark mandatory or optional fields, follow the guidance on optional and required questions in the form design guidance.
Continue button
Use a primary button with the text ‘continue’ as the main action button to take the user to the next page.
Use the text ‘Save and continue’ when users’ information is saved for them to return to in a later session.
You can group the Continue button with an optional back button.
Placement of buttons
To ensure there’s consistency in spacing on the form page, use the ds_form CSS class element. This separates the buttons from the rest of the form.
Error summary and error message
Use an error summary if a user has made an error when answering a question on the question page.
Place the error summary above the page header. It summarises the errors the user has made.
Use an error message to highlight the form fields the user has not completed correctly.
You must apply styling to place the error message in the correct place and show the user where the error is. To do this, follow the question wrapper guidance in the question component.