Ask users for... Telephone numbers
Experimental

This pattern is currently experimental because more research is needed to validate it.

<div class="govuk-form-group">
  <label class="govuk-label" for="telephone-number">
    UK telephone number
  </label>
  <input class="govuk-input govuk-input--width-20" id="telephone-number" name="telephone-number" type="tel">
</div>
{% from "input/macro.njk" import govukInput %}

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

When to use this pattern

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

How it works

Allow different formats

Users should be allowed to enter telephone numbers in whatever format is familiar to them. You should allow for additional spaces, hyphens, brackets and dashes, and be able to accommodate country and area codes.

Validate telephone numbers

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

Validation errors should be styled like this:

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="telephone-number">
    UK telephone number
  </label>
  <span id="telephone-number-error" class="govuk-error-message">
    Enter a UK telephone number
  </span>
  <input class="govuk-input govuk-input--width-20 govuk-input--error" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-error">
</div>
{% from "input/macro.njk" import govukInput %}

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

Some examples of common error messages are:

  • empty field: Enter a telephone number
  • not a real number: Enter a telephone number in the correct format, like examples
  • too short: Telephone number must have at least x numbers
  • too long: Telephone number cannot have more than x numbers
  • not a UK mobile phone number: Enter a UK mobile telephone number

Make it clear what type of telephone number you need

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

<div class="govuk-form-group">
  <label class="govuk-label" for="telephone-number">
    Telephone number
  </label>
  <span id="telephone-number-hint" class="govuk-hint">
    For international numbers include the country code
  </span>
  <input class="govuk-input govuk-input--width-20" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-hint">
</div>
{% from "input/macro.njk" import govukInput %}

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

Using example telephone numbers

If you wish to include an example telephone 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 telephone number

Tell users why you might contact them and when.

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

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

However, doing this will style telephone numbers as links, which is confusing on devices that don’t support telephone calls, like most desktop machines.

It’s also not necessary - most modern mobile browsers automatically detect telephone numbers and display them as links anyway.

If you do need to mark up your telephone number as links, for example, to support a device that cannot automatically detect them, make sure they don’t display as links on devices that cannot make calls.

Write telephone numbers in the GOV.UK style

See the GOV.UK style for writing telephone numbers.

Avoid input masking

Avoid input masking 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 telephone numbers

The GOV.UK Notify team have observed some users becoming confused when presented with a reformatted version of a telephone 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

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Telephone numbers’ on GitHub