Question pages

Use question pages to ask users for information one question (or a small group of related questions) at a time.

When to use this pattern

Use the one-question-per-page approach when:

• you're asking for complex information
• users need guidance at each step
• questions depend on previous answers
• the form is part of a transactional service

How it works

Each question page follows a consistent structure:

1. Back link (optional)
2. Page heading (the question)
3. Hint text if needed
4. The form input(s)
5. Continue button

Single question page

Using the heading as the label

For single text inputs, you can use the page heading as the label to avoid repetition. This is cleaner but only works for simple questions.

<div class="form-group">
  <label class="form-label form-label-xl" for="email">
    What is your email address?
  </label>
  <span class="form-hint">We'll use this to send you updates.</span>
  <input class="form-input" id="email" type="email">
</div>
<button class="btn btn-primary">Continue</button>

Radio button question

Multiple related questions

Sometimes it makes sense to group related questions on one page, such as address fields or date inputs.

Back links

Include a back link at the top of each question page (except the first page). This helps users navigate back through the flow.

Continue button

Use "Continue" as the button text during the form journey. Only use "Submit" or "Accept and submit" on the final check answers page.

Progress indicators

Consider showing progress for longer forms, but only if users need to know how far through they are. Avoid progress bars if:

• the journey is short (under 5 questions)
• the number of questions varies based on answers
• users might find the length discouraging

Accessibility

• Use the question as the page heading (h1)
• Ensure heading and label are connected for screen readers
• Make sure the back link is keyboard accessible
• Maintain focus management between pages