Help users to Contact a department or service team
Give users contact information within your service.
New WCAG 2.2 criteria affect this pattern
To help users to ‘Contact a department or service team’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:
See the full list of components and patterns affected by WCAG 2.2.
<h2 class="govuk-heading-m">Get help with your application</h2>
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>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>When to use this pattern
Use this pattern whenever you need to help users contact your team or department. Carry out contextual user research to decide exactly where to use this pattern in a page or service.
Read about how and why to set up user support in the GOV.UK Service Manual.
How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
<h3 class="govuk-heading-s">Phone</h3>
<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
<li>Saturday and Sunday, 10am to 4pm</li>
<li class="govuk-!-margin-top-5">Welsh language: 020 7946 0103</li>
<li>Monday to Friday, 8:30am to 5pm</li>
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<h3 class="govuk-heading-s">Email</h3>
<ul class="govuk-list">
<li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
<h3 class="govuk-heading-s">Webchat</h3>
<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
</ul>
<h3 class="govuk-heading-s">Address</h3>
<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
</p>
<h3 class="govuk-heading-s">Social media</h3>
<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
<p class="govuk-body">
Twitter: @GOVUK
</p>Order contact channels based on what research shows your users need, and what your service or department can best support.
Show contact channels in the same order throughout your service. This helps users to find what they need more easily.
If you repeat a particular set of contact details on different pages, show them in the same place on each page.
For example, if you show a ‘contact us’ section at the end of one help page, any other help pages that include the same ‘contact us’ section should have them shown at the end of the page as well.
This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
Social media
If you have social media channels:
- list these channels last
- do not include a link to the social media sites you’re using - read more about this in GOV.UK’s external linking policy
- tell users not to share personal information with you
Write phone numbers in the GOV.UK style
See the GOV.UK style for writing phone numbers.
Explain any charges
Tell users if they might have to pay to use any of your contact channels.
For phone call charges, link to the GOV.UK page on call charges. Include the link after the contact channels list and opening hours.
<h2 class="govuk-heading-m">Get help with your application</h2>
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>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>Give opening hours
Follow the GOV.UK style guide format for time ranges and date ranges.
Explain any exceptions, like bank holidays, or days of the week when your opening hours are different.
For example, ‘Monday to Friday, 9am to midday and 2pm to 4:30pm (closed on bank holidays)’ or ‘24-hour service’.
Tell users how long they’ll have to wait
Tell users when you’ll respond to them. This helps users choose which contact channel to use.
For example, tell users how long it’ll usually take to:
- receive a response to their email
- get to the front of your webchat queue
Inset contact information
Use the Inset text component to display contact information when you want to differentiate it from the content that surrounds it.
<div class="govuk-inset-text">
<h2 class="govuk-heading-m">Talk to an advisor</h2>
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>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>{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
{% set contactInformation %}
<h2 class="govuk-heading-m">Talk to an advisor</h2>
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>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>
{% endset %}
{{ govukInsetText({
html: contactInformation
}) }}Expanding contact information
If contact information is less important than other content on a page, you can enclose contact information inside the Details component to avoid distracting users.
For example, if you need to provide contact information at the bottom of a form page for users who need help completing the form.
Only do this when there’s a lot of contact information to display. When there are only 1 or 2 lines, include the contact information within the body of the page.
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
If you need help completing this form
</span>
</summary>
<div class="govuk-details__text">
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
<li>Saturday and Sunday, 10am to 4pm</li>
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
<li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
</div>
</details>{% from "govuk/components/details/macro.njk" import govukDetails %}
{% set contactInformation %}
<ul class="govuk-list">
<li>Phone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
<li>Saturday and Sunday, 10am to 4pm</li>
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
<li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
{% endset %}
{{ govukDetails({
summaryText: "If you need help completing this form",
html: contactInformation
}) }}Research on this pattern
This pattern was originally contributed by a team at the Government Digital Service (GDS). The team tested this pattern as part of a government campaign. They ran 2 rounds of research with 12 participants in total.
The examples and guidance here are based on patterns used by the Legal Aid Agency (LAA) and HM Courts & Tribunals Service (HMCTS).
Next steps
Research is needed to work out:
- if users who are signed into a service need a different approach
- how to give contact information to users who need urgent help
Help improve this pattern
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Contact a department or service team’ discussion on GitHub and share your research
- propose a change – read more about how to propose changes in GitHub
Tell us if your service uses this pattern
Take part in our usage survey (opens in a new tab) to help us improve this pattern to better meet the needs of the services that use it.
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.