Contact a department or service team

Give users contact information within your service or website.

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.

How it works

The pattern should only exist in the main section.

The contact information can be provided in a dedicated contact page.

Example

HTML code

<h1>Get help and advice</h1>
<ul class="govcy-list-unstyled">
    <li><h2>Telephone</h2></li>
    <li><a href="tel:+35722123456">22123456</a></li>
</ul>
<p>If you have a unique reference number, have it with you when you call.</p>
<ul class="govcy-list-unstyled">
    <li><h2>Opening times</h2></li>
    <li>Monday to Friday, 8:30 am to 2:30 pm</li>
    <li>Saturday and Sunday, 8:30 am to 2:30 pm</li>
</ul>
<ul class="govcy-list-unstyled">
    <li><h2>Email</h2></li>
    <li><a href="mailto:name@example.com">name@example.com</a></li>
</ul>
<ul class="govcy-list-unstyled">
    <li><h2>Address</h2></li>
    <li>50 Enton Street</li>
    <li>Nicosia</li>
    <li>2066</li>
</ul>
<ul class="govcy-list-unstyled">
    <li><h2>Social media</h2></li>
    <li>You can use Twitter or Facebook to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</li>
</ul>
<ul class="govcy-list-unstyled">
    <li><h2>X (Twitter):</h2> <a href="#">@govcy</a></li>
    <li><h2>Facebook:</h2> <a href="#">@govcy</a></li>
</ul>

Contact information can also be a part of another content page such as the services’ “start page”.

Example

HTML code

<h2>Get help and advice</h2>
<h3>Questions about the service</h3>
<p>For questions about the service, ask the Social Insurance Services team</p>
<ul class="govcy-list-unstyled">
    <li>Telephone: <a href="tel:+35722123456">22123456</a></li>
    <li>Email: <a href="mailto:name@example.com">name@example.com</a></li>
    <li>Monday to Friday, 8:30 am to 2:30 pm (except public holidays)</li>
</ul>
<h3>Questions about CY Login</h3>
<ul class="govcy-list-unstyled">
    <li>Email: <a href="mailto:name@example.com">name@example.com</a></li>
    <li>Monday to Friday, 8:30 am to 2:30 pm (except public holidays)</li>
</ul>

Order contact channels consistently

List 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.

Order contact channels based on what research shows your users need, and what your service or department can best support.

Telephone numbers

See the how to display telephone numbers pattern.

Social media

If you have social media channels:

• list these channels last
• tell users not to share personal information with you

Give opening hours

Explain any exceptions, like bank holidays, or days of the week when your opening hours are different.

For example, ‘Monday to Friday, 8:30 am to 2:30 pm (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

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.

Example

HTML code

<details class="govcy-details">
    <summary class="govcy-details__summary">
        <span class="govcy-details__summary-text">If you need help completing this form</span>
    </summary>
    <div class="govcy-details__text">
        <ul class="govcy-list-unstyled">
            <li><h3>Telephone</h3></li>
            <li><a href="tel:+35722123456">22123456</a></li>
        </ul>
        <p>If you have a unique reference number, have it with you when you call.</p>
        <ul class="govcy-list-unstyled">
            <li><h3>Opening times</h3></li>
            <li>Monday to Friday, 8:30 am to 2:30 pm</li>
            <li>Saturday and Sunday, 8:30 am to 2:30 pm</li>
        </ul>
        <ul class="govcy-list-unstyled">
            <li><h3>Email</h3></li>
            <li><a href="mailto:name@example.com">name@example.com</a></li>
        </ul>
    </div>
</details>

Pattern text

Use the following text:

Text	English	Greek
Telephone	Telephone	Τηλέφωνο
Opening times	Opening times	Ώρες λειτουργίας
Email	Email	Email
Address	Address	Διεύθυνση
Social media	Social media	Social media

Accessibility

• If you repeat a particular set of contact details on different pages, show them in the same place on each page.
• Make sure there are no dead links