Ask users for Phone numbers
How to ask users for a phone number.
When to use this pattern
Only ask users for a phone number when your service has a genuine need for this information. For example, to send an access code by text message.
How to use this pattern
Use an input component and set the input type to
tel to bring up the correct keypad on touch devices.
When using this pattern you should:
- make it clear what type of telephone number you need
- tell users why you need a phone number and what it will be used for
- let users know if you will contact them and when
- make sure you allow the user to enter a phone number in a familiar format
- help users enter a phone number in the correct format
Make it clear what type of phone number you need
Use the input label with the input component to let users know what type of phone number you need, for example, a UK, international or mobile phone number.
Explain why you need the phone number
Use the optional
ons-label__description for hint text to reassure users why you need a phone number and what it will be used for.
Allow all phone number formats
The phone number field must accommodate all phone number variations so the user can enter a number in the format they are used to. The length of the field can be adjusted using the input width classes to allow for any spaces or common characters, for example, brackets, dashes or country codes.
Validate phone numbers
To help users enter a valid phone number, you should:
- check they have entered the phone number correctly
- show error validation messages if they have not entered a valid phone number
- allow them to paste the phone number
- ask them to confirm it is correct using the check answers pattern
Use the correct errors pattern and show the error details above the phone number field if it is missing or incorrect.
If the phone number is missing
Use “Enter [the required type of phone number]”, for example, “Enter a UK mobile number”.
If a phone number is incorrect
Use “Enter a UK mobile number in a valid format, for example, 07700 912345 or +44 7700 912345”, to give them a clear example of a valid phone number.
autocomplete attribute when you are asking for a phone number as it helps the user fill out a form more quickly.
To do this, set the autocomplete attribute on the input field to