<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><formaction="/form-handler"method="post"novalidate><divclass="govuk-form-group"><fieldsetclass="govuk-fieldset"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
Where do you live?
</h1></legend><divclass="govuk-radios"data-module="govuk-radios"><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="where-do-you-live"name="where-do-you-live"type="radio"value="england"><labelclass="govuk-label govuk-radios__label"for="where-do-you-live">
England
</label></div><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="where-do-you-live-2"name="where-do-you-live"type="radio"value="scotland"><labelclass="govuk-label govuk-radios__label"for="where-do-you-live-2">
Scotland
</label></div><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="where-do-you-live-3"name="where-do-you-live"type="radio"value="wales"><labelclass="govuk-label govuk-radios__label"for="where-do-you-live-3">
Wales
</label></div><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="where-do-you-live-4"name="where-do-you-live"type="radio"value="northern-ireland"><labelclass="govuk-label govuk-radios__label"for="where-do-you-live-4">
Northern Ireland
</label></div></div></fieldset></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
If research shows it’s helpful for users, you can also include a progress indicator.
Back link
Some users do not trust browser back buttons when they’re entering data.
Always include a back link at the top of question pages to reassure them it’s possible to go back and change previous answers.
However, do not break the browser back button. Make sure it takes users to the previous page they were on, in the state they last saw it.
An exception to this is when the user has performed an action they should only do once, like make a payment or complete an application. The browser back button should still work, but show the user a sensible message rather than let them perform the action again.
Page headings
Page headings can be questions or statements.
Start by asking one question per page
Asking just one question per question page helps users understand what you’re asking them to do, and focus on the specific question and its answer.
To help you follow this approach, you can set the contents of a <legend> or <label> for a page’s input as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><formaction="/form-handler"method="post"novalidate><divclass="govuk-form-group"><fieldsetclass="govuk-fieldset"role="group"aria-describedby="dob-hint"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
What is your date of birth?
</h1></legend><divid="dob-hint"class="govuk-hint">
For example, 31 3 1980
</div><divclass="govuk-date-input"id="dob"><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="dob-day">
Day
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="dob-day"name="dob-day"type="text"autocomplete="bday-day"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="dob-month">
Month
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="dob-month"name="dob-month"type="text"autocomplete="bday-month"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="dob-year">
Year
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-4"id="dob-year"name="dob-year"type="text"autocomplete="bday-year"inputmode="numeric"></div></div></div></fieldset></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><formaction="/form-handler"method="post"novalidate><divclass="govuk-form-group"><h1class="govuk-label-wrapper"><labelclass="govuk-label govuk-label--l"for="postcode">
What is your home postcode?
</label></h1><inputclass="govuk-input govuk-input--width-10"id="postcode"name="postcode"type="text"autocomplete="postal-code"></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
Do not use the same page heading across multiple pages.
The page heading should relate specifically to the information being asked for on the current page, not any higher-level section the page is part of.
If you need to show the high-level section, you can use the govuk-caption style.
For example, ‘About you’
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/question-pages/section-headings/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">section headings – question pages</span>
example in a new tab
</a>
</div>
<iframe title="Section headings – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/section-headings/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<div class="app-tabs__container js-tabs__container js-tabs__container--no-tabs" id="section-headings-question-pages-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-caption-l"</span>></span>About you<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<h1class="govuk-heading-l">
What is your home address?
</h1>
You can also learn more about how starting with one thing per page helps users in the GOV.UK Service Manual.
Asking complex questions without using hint text
Do not use hint text if you need to give a lengthy explanation with lists and paragraphs. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.
Do not use links in hint text. While screen readers will read out the link text when describing the field, they will not tell users the text is a link.
If you're asking a question that needs a detailed explanation, use:
a h1 heading that's a statement (for example, 'Interview needs') rather than a question
whatever mix of text, paragraphs, lists and examples best explains your question to users
a label, above the form input, that asks users a specific question – for example, 'Do you have any interview needs?'
<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">
Interview needs
</h1><pclass="govuk-body">
Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <ahref="#"class="govuk-link">health condition or disability</a>.
</p><pclass="govuk-body">
However, if you need flexibility for other reasons you can tell us about it here.
</p><pclass="govuk-body">
For example, you have commitments like caring responsibilites or employment.
</p><pclass="govuk-body">
Contact your provider if you’re concerned about the interview process.
</p><formaction="/form-handler"method="post"novalidate><divclass="govuk-form-group"><fieldsetclass="govuk-fieldset"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--m">
Do you have any interview needs?
</legend><divclass="govuk-radios"data-module="govuk-radios"><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="interview-needs"name="interview-needs"type="radio"value="yes"><labelclass="govuk-label govuk-radios__label"for="interview-needs">
Yes
</label></div><divclass="govuk-radios__item"><inputclass="govuk-radios__input"id="interview-needs-2"name="interview-needs"type="radio"value="no"><labelclass="govuk-label govuk-radios__label"for="interview-needs-2">
No
</label></div></div></fieldset></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
{% from"govuk/components/radios/macro.njk"import govukRadios %}
{% from"govuk/components/button/macro.njk"import govukButton %}
{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
{% endblock %}
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">
Interview needs
</h1><pclass="govuk-body">
Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <ahref="#"class="govuk-link">health condition or disability</a>.
</p><pclass="govuk-body">
However, if you need flexibility for other reasons you can tell us about it here.
</p><pclass="govuk-body">
For example, you have commitments like caring responsibilites or employment.
</p><pclass="govuk-body">
Contact your provider if you’re concerned about the interview process.
</p><formaction="/form-handler"method="post"novalidate>
{{ govukRadios({
name: "interview-needs",
fieldset: {
legend: {
text: "Do you have any interview needs?",
isPageHeading: false,
classes: "govuk-fieldset__legend--m"
}
},
items: [
{
value: "yes",
text: "Yes"
},
{
value: "no",
text: "No"
}
]
}) }}
{{ govukButton({
text: "Continue"
}) }}
</form></div>
</div>
{% endblock %}
Asking multiple questions on a page
Sometimes it makes sense to group a number of related questions on the same page.
User research will tell you when you can group pages together. For example, if you’re designing an internal service for government users who need to repeat and switch between tasks quickly.
If you need to ask for multiple related things on a page, use a statement as the heading.
You can style each <label> or <legend> to make the questions easier to scan. Read more about why and how to style labels and legends.
<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Passport details</h1><formaction="/form-handler"method="post"novalidate><divclass="govuk-form-group"><labelclass="govuk-label govuk-label--m"for="passport-number">
Passport number
</label><divid="passport-number-hint"class="govuk-hint">
For example, 502135326
</div><inputclass="govuk-input govuk-input--width-10"id="passport-number"name="passport-number"type="text"aria-describedby="passport-number-hint"></div><divclass="govuk-form-group"><fieldsetclass="govuk-fieldset"role="group"aria-describedby="expiry-hint"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--m">
Expiry date
</legend><divid="expiry-hint"class="govuk-hint">
For example, 31 3 1980
</div><divclass="govuk-date-input"id="expiry"><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="expiry-day">
Day
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="expiry-day"name="expiry-day"type="text"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="expiry-month">
Month
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="expiry-month"name="expiry-month"type="text"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="expiry-year">
Year
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-4"id="expiry-year"name="expiry-year"type="text"inputmode="numeric"></div></div></div></fieldset></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
Start by testing your form without a progress indicator to see if it’s simple enough that users do not need one.
Try improving the order, type or number of questions before adding a progress indicator. If people still have difficulty, try adding a simple step or question indicator like this one.
Only include the total number of questions if you can do so reliably. As the user moves through the form, make sure the indicator updates to tell them which question they are on and the total number remaining.
Do not use progress indicators that do all of the following:
