Email input

When to use this component

Use the email input component when allowing users to input their email address.

When not to use this component

Avoid using the email input component for any purpose other than entering an email address.

How it works

Read the GOV.UK Design System guidance on asking for email addresses (opens in a new tab) for information on labels, hint text, 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, designate the contents of the label as the page heading. This practice ensures users of screen readers hear the contents only once.

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

What is your email address?

Update the HTML example

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 email address?
    </label>
  </h1>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email">
</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 email address?
    </label>
  </h1>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email">
</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.

Email input for multiple questions

Example
HTML
Web Template

What is your email address?

Update the HTML example

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 email address?
  </label>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email">
</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 email address?
  </label>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email">
</div>

{% endblock %}

Using hint text

Use hint text to provide relevant assistance to the majority of users, such as clarifying how their information will be used or where to locate it. The hint text block is demonstrated in the example below.

Please ensure the following:

Use the hint text block appropriately
Place the hint block correctly within your HTML component
Add the aria-describedby attribute where necessary, for accessiblity. For the email component this is against the input.

Avoid lengthy paragraphs and lists in hint text, as screen readers will read out the entire content, potentially frustrating users. Additionally, refrain from including links within hint text, as screen readers do not indicate that the text is a clickable link.

Email input with hint

Example
HTML
Web Template

What is your email address?

Enter your work email where possible

Update the HTML example

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 email address?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    Enter your work email where possible
  </div>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email" 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 email address?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    Enter your work email where possible
  </div>
  <input class="govuk-input" id="schema-name" name="schema-name" type="email" spellcheck="false" autocomplete="email" 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 [whatever it is]'. For example, 'Enter your email address'.

If the email address is not in a valid format

'Enter a valid email address'.

If the input is too long

'[whatever it is] must be [number] characters or less'. For example, 'Email address must be 254 characters or less'.

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