Telephone input

Skip to HTML examples

When to use this component

Use the telephone input component when you need to let users enter a phone number.

When not to use this component

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

Read the GOV.UK Design System guidance on asking for telephone numbers (opens in a new tab) for information on labels, accepted formats, and accessibility considerations.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

For single question pages

If presenting only one question on the page, set the contents of the <label> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

You will need to include an empty {% title %} block in your web template to remove the default page header.

Telephone input for single question

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your telephone number?
    </label>
  </h1>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your telephone number?
    </label>
  </h1>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel">
</div>

{% endblock %}

For multiple question pages

If presenting more than one question on the page, do not set the contents of the <label> as the page heading.

Telephone input for multiple questions

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <label class="govuk-label" for="schema-name">
    What is your telephone number?
  </label>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <label class="govuk-label" for="schema-name">
    What is your telephone number?
  </label>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel">
</div>

{% endblock %}

Using hint text

Use hint text for help that's relevant to the majority of users, like specifying the type of telephone number you need or that you accept international numbers.

Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. Do not include links within hint text.

Telephone input with hint

For international numbers include the country code

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your telephone number?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    For international numbers include the country code
  </div>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel" aria-describedby="schema-name-hint">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your telephone number?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    For international numbers include the country code
  </div>
  <input class="govuk-input govuk-input--width-20" id="schema-name" name="schema-name" type="tel" autocomplete="tel" aria-describedby="schema-name-hint">
</div>


{% endblock %}

Error messages

An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.

If nothing is entered and the question is required

'Enter a telephone number' or 'Enter a UK mobile telephone number'.

If the telephone number is not in a valid format

'Enter a telephone number in the correct format, like 01632 960 001, 07700 900 982 or +44 808 157 0192'.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.