Phone and email - smbc-digital/patterns GitHub Wiki
Contents
– User needs – How it works – Status – Error messages – Accessibility statement – Examples – Research into this pattern – Discuss this pattern
User needs
Use this pattern when the service requires a phone number or an email address.
How it works
If you are asking users for both details, then the phone and email components should be presented on the same page. Discuss with the service which of these options would be mandatory and which would be optional.
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.
If you are giving the user the option of how they would prefer to be contacted by the service, then visit the preferred method of contact pattern in GitHub patterns.
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
Use the autocomplete attribute when asking for a phone number.
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
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
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 |
|---|---|---|
| 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 [email protected] |
Accessibility statement
This pattern has a rating of AA.
Please see our accessibility statement.
Improvements
To make it AAA, we need to:
- Add...
Examples
Axure mockup - phone and email
Research into this pattern
For the development of this pattern, we looked closely at: GOV.UK Design System - Ask users for Telephone numbers GOV.UK Design System - Ask users for Email addresses