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

Buy a ticket

What does it do?

  • Helps users to enter the ticket purchase journey straight from the homepage

When to use it?

  • On the homepage

How it works?

  • This pattern directs users to the ticket finder service, where they can continue with purchasing a relevant ticket based on the ticket options they have selected

Buy a ticket

Which modes of transport will you use?

HTML markup
<form class="wmnds-buy-a-ticket">
  <h2 class="wmnds-buy-a-ticket__title">Buy a ticket</h2>
  <div class="wmnds-m-b-md wmnds-p-b-xsm">
    <fieldset class="wmnds-buy-a-ticket__mode-checkboxes">
      <legend class="wmnds-buy-a-ticket__label">Which modes of transport will you use?</legend>
      <div class="wmnds-grid wmnds-grid--spacing-3-sm wmnds-grid--spacing-sm-3-md">
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
            </svg>
            Bus
          </div>
        </label>
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            Train
          </div>
        </label>
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
            </svg>
            Tram
          </div>
        </label>
      </div>
    </fieldset>
  </div>
  <div class="wmnds-fe-group wmnds-m-b-md wmnds-p-b-xsm ">
    <div class="wmnds-fe-dropdown">
      <label class="wmnds-fe-label wmnds-buy-a-ticket__label" for="buyATicketPassengerType">Who will be travelling?</label>
      <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="buyATicketPassengerType" name="PassengerType">
        <option value="" selected="true" disabled="true">
          Select traveller
        </option>
        <option value="option1">
          Option 1
        </option>
        <option value="option2">
          Option 2
        </option>
        <option value="option3">
          Option 3
        </option>
      </select>
    </div>
  </div>
  <div class="wmnds-fe-group wmnds-m-b-md wmnds-p-b-xsm ">
    <div class="wmnds-fe-dropdown">
      <label class="wmnds-fe-label wmnds-buy-a-ticket__label" for="buyATicketDuration">How long will the ticket last for?</label>
      <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="buyATicketDuration" name="Duration">
        <option value="" selected="true" disabled="true">
          Select ticket length
        </option>
        <option value="option1">
          Option 1
        </option>
        <option value="option2">
          Option 2
        </option>
        <option value="option3">
          Option 3
        </option>
      </select>
    </div>
  </div>
  <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-btn--align-left" type="submit">
    Find tickets
    <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
      <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
    </svg>
  </button>
</form>