Preferred method of contact

User needs

Use this pattern when you are giving the user the option of how they would prefer to be contacted by the service.

How it works

If you are asking users to select their preferred method of contact, then the first page will ask the user to select either phone or email using radio buttons.

Inset text can be added to the radio button page to tell the user why we are collecting their contact details, such as:

‘We may need to get in touch with you about your [report]’
'We'll use your details to contact you about the [referral]'

Provide information to be transparent with the user about what you are going to do with their details and explain what the service will do with their contact details.

You can display preferred method of contact in two ways, depending on the user need:

1. Preferred method of contact - conditionally revealing a related question

You can use conditionally revealing a related question to reveal the text input for either a phone number or email address, depending on which radio button the user selected.

Use this method for if you're asking users to select one method for how they would prefer to be contacted. Either option would then be mandatory to provide, depending on which option the user selects. It then becomes mandatory to provide the contact method of their choice.

If the service only needs one method to contact them on, then this method avoids collecting unnecessary information - as there are no optional choices. If you give the user an optional choice as well, and they enter an optional contact method as well as their preferred choice, then you could potentially be collecting unnecessary contact details that will not be used by the service. Always check with the service for what contact details are needed.

Remember to provide information to be transparent with the user and explain what the service will do with the contact details.

Axure mockup - Preferred method of contact - conditionally revealing a related question

Remember: Only collect contact details if the service needs them and can't be provided without them, make sure that the service understands that not everyone has or can use a phone or email. Give users the choice for how they can be contacted by the service.

2. Preferred method of contact - with an optional method

Use this method if the service needs one preferred method to contact the user on, but they could still accept an optional method as well, for a particular reason.

Example: If the service will provide an email confirmation if the user provides their email address as well. The user can then decide to enter their email address as well as their preferred method of phone (as email address would be optional) if they want to receive the email confirmation. Remember to provide information to be transparent with the user and explain what the service will do with their contact details as well as the optional contact details if the user provides this as well as their preferred method.

Axure mockup - Preferred method of contact - with an optional method

Remember: Only collect contact details if the service needs them and can't be provided without them, make sure that the service understands that not everyone has or can use a phone or email. Give users the choice for how they can be contacted by the service.

Phone number

When collecting a user’s phone number, you should:

Allow users to enter a phone number in multiple formats. For example, this could be an area code, spaces, hyphens, brackets and dashes, and with +44.
We are only validating the phone number field when it is blank; this is due to an understanding that we will be researching how users react to no validations when typing a phone number.

Use the autocomplete attribute on phone numbers

Follow the guidance on GOV.UK Design System - Ask users for Telephone numbers and scroll to the section titled: 'Use the autocomplete attribute' for information on using the autocomplete attribute on telephone numbers.

If you are asking users to enter their phone number, set the autocomplete attribute on all fields using:

for fields labeled ‘phone number’

For further details and guidance, visit: GOV.UK Design System - Ask users for Telephone numbers

Email

Follow the guidance on the GOV.UK Design System - Ask users for Email addresses when asking users for their email address. The guidance includes information about telling the user why you’re asking for an email address and what the email address will be used for.

When asking users for their email address, you must:

Validate the email address

Use the autocomplete attribute on emails

Use the autocomplete attribute when asking for an email address to allow browsers to autofill the email address if they’ve entered it previously.

If you are asking users to enter their email address, set the  autocomplete attribute on all fields using:

for fields labeled ‘email address’

Do not spellcheck user’s email addresses

Make sure the user’s email addresses will not be spellchecked, set the spellcheck attribute to false.

For further details and guidance, visit: GOV.UK Design System - Ask users for Email addresses

Status

Working progress - further research is needed for this pattern.

Information for method 1: preferred method of contact - conditionally revealing a related question:

See GOV.UK Design System for the status of using 'Conditionally revealing a related question' for radio buttons and checkboxes (scroll to halfway down the page to the section titled 'Conditionally revealing a related question') using the following links:

GOV.UK Design System radios component
GOV.UK Design System checkboxes component

There are some known accessibility issues that GOV.UK discuss in the 'An update on the accessibility of conditionally revealed questions' blog.

However, use the current guidance on the radio and checkbox components pages from the links below for how to use them with 'Conditionally revealing a related question' (scroll to halfway down the page to the section titled 'Conditionally revealing a related question') using the following links:

GOV.UK Design System radios component
GOV.UK Design System checkboxes component

The guidance on this GitHub page will need updating if/when further information is provided by GOV.UK.

Error messages

Use an error message to identify when the user has not provided the information in the format you are expecting. To help the user, you should show an error message that allows them to fix the problem.

For styling follow GOV.UK Design System - Error message

Label	Error state	Error messages
How would you like to be contacted?	If the radio option is blank	Select if you'd like to be contacted by phone or email

Phone number	If the text field is blank	Enter [a/your/their] phone number

Email address	If the text field is blank	Enter [an/your/their] email address
Email address	If the email address is not in the correct format	Enter an email address in the correct format, like name@example.com

Accessibility statement

This pattern has a rating of ##.

Accessibility information for method 1: preferred method of contact - conditionally revealing a related question:

There are some known accessibility issues that GOV.UK discuss in the 'An update on the accessibility of conditionally revealed questions' blog.

However, use the current guidance on the radio and checkbox components pages from the links below for how to use them with 'Conditionally revealing a related question' (scroll to halfway down the page to the section titled 'Conditionally revealing a related question') using the following links:

GOV.UK Design System radios component
GOV.UK Design System checkboxes component

The guidance on this GitHub page will need updating if/when further information is provided by GOV.UK.

To read about the known accessibility issues, scroll halfway down the page to the section titled 'Known issues' using the following links:

GOV.UK Design System radios component
GOV.UK Design System checkboxes component

The guidance on this GitHub page for accessibility will need updating if/when further information is provided by GOV.UK.

Please see our accessibility statement.