Ask users for Phone numbers

This guidance is for government teams that build online services. To find information and services for the public, go to GOV.UK.

Open this example in a new tab: phone numbers
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="phone-number">
    UK phone number
  </label>
  <input class="govuk-input govuk-input--width-20" id="phone-number" name="phoneNumber" type="tel" autocomplete="tel">
</div>
Nunjucks
{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "UK phone number"
  },
  id: "phone-number",
  name: "phoneNumber",
  type: "tel",
  autocomplete: "tel",
  classes: "govuk-input--width-20"
}) }}

When to use this pattern

Only collect phone numbers from people if you genuinely need them. Not everyone has or can use a phone, so make sure you give users a choice about how they can be contacted.

How it works

Allow different formats

Let users enter phone numbers in whatever format is familiar to them. Allow for additional spaces, hyphens, dashes and brackets, and be able to accommodate country and area codes.

Validate phone numbers

You should validate phone numbers so you can let users know if they have entered one incorrectly. Google’s libphonenumber library can validate phone numbers from most countries.

Use the autocomplete attribute

Use the autocomplete attribute on phone number inputs. This lets browsers autofill the information on a user’s behalf if they’ve entered it previously.

To do this, set the autocomplete attribute to tel, as shown in the HTML and Nunjucks tabs in the examples on this page.

If you are working in production you’ll need to do this to meet WCAG 2.1 Level AA.

You will not normally need to use the autocomplete attribute in prototypes, as users will not generally be using their own devices.

Error messages

Error messages should be styled like this:

Open this example in a new tab: error, empty field – phone numbers
HTML
<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="phone-number">
    UK phone number
  </label>
  <p id="phone-number-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter a UK phone number
  </p>
  <input class="govuk-input govuk-input--width-20 govuk-input--error" id="phone-number" name="phoneNumber" type="tel" aria-describedby="phone-number-error" autocomplete="tel">
</div>
Nunjucks
{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "UK phone number"
  },
  errorMessage: {
    text: "Enter a UK phone number"
  },
  id: "phone-number",
  name: "phoneNumber",
  type: "tel",
  autocomplete: "tel",
  classes: "govuk-input--width-20"
}) }}

Make sure errors follow the guidance in the Error message component and have specific error messages for specific error states.

If the phone number is not in the correct format and there is no example

Say ‘Enter a phone number, like 01632 960 001, 07700 900 982 or +44 808 157 0192’.

If the phone number is not in the correct format and there is an example

Say ‘Enter a phone number in the correct format’.

Make it clear what type of phone number you need

Use the form label or hint text to tell users if you specifically need a UK, international or mobile phone number.

Open this example in a new tab: international – phone numbers
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="phone-number">
    Phone number
  </label>
  <div id="phone-number-hint" class="govuk-hint">
    For international numbers include the country code
  </div>
  <input class="govuk-input govuk-input--width-20" id="phone-number" name="phoneNumber" type="tel" aria-describedby="phone-number-hint" autocomplete="tel">
</div>
Nunjucks
{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Phone number"
  },
  hint: {
    text: "For international numbers include the country code"
  },
  id: "phone-number",
  name: "phoneNumber",
  type: "tel",
  autocomplete: "tel",
  classes: "govuk-input--width-20"
}) }}

Using example phone numbers

If you wish to include an example phone number (in hint text for example), Ofcom maintains a list of numbers that are reserved for use in media. These are:

  • UK non-geographic: 01632 960000 to 960999
  • UK London: 020 7946 0000 to 7946 0999
  • UK mobile: 07700 900000 to 900999

Explain why you need a phone number

Tell users why you might contact them and when.

It’s possible to mark up phone numbers as links, like this:

<a href="tel:+442079476330">020 7947 6330</a>

However, doing this will style phone numbers as links, which is confusing on devices that do not support phone calls.

It might also not be necessary - some modern mobile browsers automatically detect phone numbers and display them as links anyway.

If you do need to mark up your phone numbers as links, for example, to support a device that cannot automatically detect them, make sure they do not display as links on devices that cannot make calls.

When you look at your service’s user journey, remember that phone numbers as links might behave in unexpected ways for the user. For example, unless the user sets a default app to handle tel: links, some browsers and operating systems will automatically start a setup process.

Write phone numbers in the GOV.UK style

See the GOV.UK style for writing telephone numbers.

Avoid input masking

Avoid ‘input masking’, or showing placeholder answer, because it makes it harder for users to:

  • type a number in their preferred way
  • transcribe a number from another place and check that they’ve got it right

Avoid reformatting phone numbers

The GOV.UK Notify team have observed some users becoming confused when presented with a reformatted version of a phone number that they provided, for example, with the +44 country code added.

Research on this pattern

More research is needed on the best way to handle:

  • international numbers
  • extensions
  • SMS shortcodes

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this pattern

Take part in our usage survey (opens in a new tab) to help us improve this pattern to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.