Question form
What does it do?
- Asks a user questions which a service requires.
- Helps to break down complex forms by spreading questions across multiple pages.
When to use it?
- When you are asking users for information as part of a service.
- When a form is required to be spread across multiple pages.
When not to use it?
- When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
How it works?
- Always test questions with users through user research
- Make sure your question makes sense
- Sometimes it makes sense to group a few questions on the same page
- Make sure users know why you're asking the question and only ask users for information you really need
- Add (optional) to the end of each question that is optional
Form Element
This pattern can be populated with any form element, such as text, radio buttons, checkboxes, dropdown or file upload.
HTML markup
<form class="wmnds-bg-white wmnds-p-lg">
<h2 class="wmnds-fe-question">
Question title
</h2>
<div class="wmnds-fe-group">
<div class="wmnds-fe-radios" role="radiogroup">
<span class="wmnds-fe-radios__desc">
Select all options that apply
</span>
<label class="wmnds-fe-radios__container">
Option 1
<input class="wmnds-fe-radios__input" value="Option 1" checked="checked" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 2
<input class="wmnds-fe-radios__input" value="Option 2" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 3
<input class="wmnds-fe-radios__input" value="Option 3" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
</div>
</div>
<button class="wmnds-btn" type="Submit">
Continue
</button>
</form>
Reference
This pattern shows a question that shows defined steps and uses the backlink and progress indicator component.
HTML markup
<a href="#" title="link title" target="_self" class="wmnds-link">
<span>< Back</span>
</a>
<form class="wmnds-bg-white wmnds-m-t-lg">
<div class="wmnds-col-1 wmnds-p-lg ">
<div class="wmnds-progress-indicator">
Section 1 of 3
<h4>About your ticket</h4>
</div>
<h2 class="wmnds-fe-question">
What is your Direct Debit Reference?
</h2>
<p>This can be found in the email we sent you asking you to reinstate your Direct Debit and begins with a 6.<br><br>If you didn’t receive this email, it is shown next to every payment to WMCA for your Direct Debit on your bank statement.</p>
<div class="wmnds-p-t-md wmnds-col-1 wmnds-col-lg-3-4">
<div class="wmnds-fe-group">
<label class="wmnds-fe-label" for="input">Direct Debit Reference</label>
<input class="wmnds-fe-input" id="input" name="input" type="text" value="" />
</div>
</div>
<div class="wmnds-col-1">
<button class="wmnds-btn" type="Submit">
Continue
</button>
</div>
</div>
</form>
Summary
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
Check your answers before reinstating your Direct Debit
| Cell | Cell | |
|---|---|---|
| Cell | Cell |
| Cell | Cell | |
|---|---|---|
| Cell | Cell |
| Cell | Cell | |
|---|---|---|
| Cell | Cell | |
| Cell | Cell | |
| Cell | Cell |
Now send your request
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
HTML markup
<div class="wmnds-bg-white wmnds-p-lg">
<h2 class="wmnds-fe-question">
Check your answers before reinstating your Direct Debit
</h2>
<table class="wmnds-table wmnds-m-b-xl wmnds-table--without-header">
<h3>
Personal Details
</h3>
<tbody>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
</tbody>
</table>
<table class="wmnds-table wmnds-m-b-xl wmnds-table--without-header">
<h3>
Ticket Details
</h3>
<tbody>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
</tbody>
</table>
<table class="wmnds-table wmnds-m-b-xl wmnds-table--without-header">
<h3>
Direct Debit
</h3>
<tbody>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
<tr>
<th scope="row" data-header="Header 1">
Cell
</th>
<td data-header="Header 2">
Cell
</td>
<td class="wmnds-text-align-right">
<button type='button' class='wmnds-btn wmnds-btn--link'>Change</button>
</td>
</tr>
</tbody>
</table>
<h3>Now send your request</h3>
<p>By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.<br>
<br>You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.<br>
<br>You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
</p>
<button class="wmnds-btn wmnds-btn--start" type="button">
Accept and send
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
Confirmation Message
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill-no-icon wmnds-text-align-center">
<div class="wmnds-msg-summary__header">
<h3 class="wmnds-msg-summary__title">Request complete</h3>
<h3>You can now start using your Swift card</h3>
</div>
<div class="wmnds-msg-summary__info">
Your reference number is <b>12345</b>
</div>
</div>