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]’

Conditionally revealing a related question will reveal the text input for either a phone number or email address, depending on which radio button the user selected.

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.

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.

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') on:

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') on:

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 a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.

For styling follow GOV.UK Design System - Error message

Label	Error state	Validation messages
How would you like to be contacted?	If the text field 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 ##.

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').

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.