Ask users for... Email addresses

Open this "Email addresses" example in a new window
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="email">
    Email address
  </label>
  <span id="email-hint" class="govuk-hint">
    We’ll only use this to send you a receipt
  </span>
  <input class="govuk-input" id="email" name="email" type="email" aria-describedby="email-hint">
</div>
Nunjucks
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Email address"
  },
  hint: {
    text: "We’ll only use this to send you a receipt"
  },
  id: "email",
  name: "email",
  type: "email"
}) }}

When to use this pattern

Follow this pattern whenever you need to capture an email address.

How it works

When asking users for their email address, you must:

  • make the field long enough
  • make it clear why you’re asking
  • help users to enter a valid email address

You may also need to check that users have access to the email account they give you.

Open this "Email addresses" example in a new window
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="email">
    Email address
  </label>
  <span id="email-hint" class="govuk-hint">
    We’ll only use this to send you a receipt
  </span>
  <input class="govuk-input" id="email" name="email" type="email" aria-describedby="email-hint">
</div>
Nunjucks
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Email address"
  },
  hint: {
    text: "We’ll only use this to send you a receipt"
  },
  id: "email",
  name: "email",
  type: "email"
}) }}

Make the field long enough

Make sure the field is long enough to accommodate all of your users’ email addresses.

You can analyse your user data to establish what this is. A good rule of thumb is 30 characters.

Tell users why you want the email address

Make it clear what the email address will be used for so that:

  • users feel confident that you’re not going to abuse it
  • users with multiple email addresses can choose which one to give you

If the email address field is part of a sign-in box, you don’t need to say: ‘We need your email so we can sign you in’.

Help users to enter a valid email address

Help your users to enter a valid email address by:

  • checking they have entered the correct format
  • allowing users to paste the email address
  • using the type=“email” attribute so that devices display the correct keyboard
  • confirming their address back to them so they can check and change it

You can also check for common misspellings of popular email providers for example, ‘homtail.com’ instead of ‘hotmail.com’. Warn users if you detect one, but allow them to proceed in case it’s a genuine email address.

Some services ask users to repeat their email address. Only do this if your user research shows it to be effective.

Check the user has access to their email account

If email is an essential part of your service - for example to send a password reset - you can confirm whether the user has access to the email address they give you using an email confirmation loop.

However, these are disruptive and should be avoided as far as possible.

Research on this pattern

If you’ve used this pattern, get in touch to share your user research findings.

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 ‘Email addresses’ on GitHub