Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Patterns

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.


Question title

Select all options that apply

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.


< Back
Section 1 of 3

About your ticket

What is your Direct Debit Reference?

This can be found in the email we sent you asking you to reinstate your Direct Debit and begins with a 6.

If you didn’t receive this email, it is shown next to every payment to WMCA for your Direct Debit on your bank statement.


HTML markup
<a href="#" title="link title" target="_self" class="wmnds-link">
  <span>&lt; 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

Personal Details

CellCell
CellCell

Ticket Details

CellCell
CellCell

Direct Debit

CellCell
CellCell
CellCell
CellCell

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.


Request complete

You can now start using your Swift card

Your reference number is 12345

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>