Help users to Contact a service

Show contact details for a service’s offline support.

Open this contact a service pattern example in a new tab

Get help with your application

Find out about call charges 

<hr class="govuk-section-break govuk-section-break--visible" aria-hidden="true">
<section class="govuk-width-container govuk-!-margin-top-7 govuk-!-margin-bottom-7 ">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
  <h2 class="govuk-heading-m">Get help with your application</h2>
  <ul class="govuk-list">
    <li>Telephone: 0808 157 0001</li>
    <li>Textphone: 0808 157 0002</li>
    <li class="govuk-!-margin-top-5"><a href="#" class="govuk-link">Relay UK</a> (if you cannot hear or speak on the phone): 18001 then 0808 157 0003</li>
    <li class="govuk-!-margin-top-5"><a href="#" class="govuk-link">Video relay service</a> for British Sign Language (BSL) users (<a href="#" class="govuk-link">Check you can use the video relay service</a>)</li>
    <li class="govuk-!-margin-top-5">All services are available Monday to Friday, 9am to 5pm (except public holidays)</li>
  </ul>
  <p class="govuk-body">
    <a class="govuk-link" href="#">Find out about call charges</a>
  </p>
</div>
</div>
</section>
{% block footer %}

<hr class="govuk-section-break govuk-section-break--visible" aria-hidden="true">

<section class="govuk-width-container govuk-!-margin-top-7 govuk-!-margin-bottom-7 ">
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h2 class="govuk-heading-m">Get help with your application</h2>

    <ul class="govuk-list">
      <li>Telephone: 0808 157 0001</li>
      <li>Textphone: 0808 157 0002</li>
      <li class="govuk-!-margin-top-5"><a href="#" class="govuk-link">Relay UK</a> (if you cannot hear or speak on the phone): 18001 then 0808 157 0003</li>
      <li class="govuk-!-margin-top-5"><a href="#" class="govuk-link">Video relay service</a> for British Sign Language (BSL) users (<a href="#" class="govuk-link">Check you can use the video relay service</a>)</li>
      <li class="govuk-!-margin-top-5">All services are available Monday to Friday, 9am to 5pm (except public holidays)</li>
    </ul>
    <p class="govuk-body">
      <a class="govuk-link" href="#">Find out about call charges</a>
    </p>
  </div>
</div>
</section> 

{% endblock %}

Principles

  • Position contact information consistently throughout the service so that users learn where to find it
  • Make contact information visible without further steps such as clicking or going to another page
  • Make sure support channels are ready before you publish their contact information
  • Don’t try to reduce support calls by making contact information harder to find

When to use this pattern

Use this pattern to show brief contact information for your service’s offline support.

When not to use this pattern

This pattern works less well when information is long or complex. For example, if your service has multiple phone lines and email addresses serving different locations, groups of claimants or benefit lines, consider creating a separate page and linking to it from your service’s footer.

Keep this space for offline contact details. For contextual help content on individual questions or pages, use something more immediately findable such as hint text or a details component.

How it works

Show contact information after the body of the page and before the main footer. This leaves details components available for context-specific help that relates directly to the current screen or question.

Example of a service page showing contact information placed above the main footer

Content

The information you show will vary according to the needs of your service and the support options available.

Organise and style your content according to the Contact a department or service team pattern from the GOV.UK Design System.

Technical guidance

The code should be the first thing in your page’s {% block footer %} block. This allows the horizontal rule to span the whole width of the page.

Accessibility

Accessibility problems may arise with this pattern if:

  • it contains too much content to be navigated easily
  • it is used for information that is needed very frequently

For more about building accessible services see the DWP Accessibility Manual.

Research

The two most common positions for contact information are:

One service found that their users needed contact information very frequently and sometimes struggled to find it at the bottom of the page. This service put the information in a side panel on each screen - it moves to the bottom of the screen on smaller screen sizes, making it similar to a footer in practice.

A details component:

  • is closer to the main action on the screen so may be easier to find
  • uses less screen space in its default closed setting
  • hides the information for those who do not need it

Before the footer:

  • keeps the details component available for immediate contextual help on individual screens, giving designers more flexibility
  • makes information visible without a click

We recommend the second option because it keeps the details component available for other uses.

Services using this pattern

This pattern is based on the designs used in Apply for a National Insurance Number and Apply for Pension Credit.

Contribute

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

For this pattern we’re particularly interested in:

  • direct comparisons or A/B testing of contact information in different positions on screen
  • how well this works in a service made up of smaller service elements

Discuss Contact a service on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk