Ask users for... Email addresses

How to ask a user for an email address.

When to use this pattern

Use this pattern when you need to collect an email address from the user.

How to use this pattern

When using this pattern you should:

  • tell users why you need an email address and what it will be used for
  • make sure the field can accept all email addresses
  • help users enter an email address in the correct format

Explain why you need the email address

Use the ons-label__description with the input component to reassure users why you need an email address and what it will be used for.

Allow all email addresses

The email address field needs to accommodate the maximum number of characters allowed. An email address can be up to 320 characters long and include a set of special characters as detailed in the RFC 3696 specification from the Internet Engineering Task Force 

How to check email addresses

To help users enter a valid email address, you should:

  • allow them to paste the email address
  • check they have entered something in the email address field
  • check that what they have entered is valid
  • show an error message if they have not entered anything or what they have entered is not valid
  • ask them to confirm it is correct using the check answers pattern

Error messages

Use the correct errors pattern and show the error details above the email address field.

If the email address field is empty

Use “Enter an email address”.

If the email address entered is not in a valid format

Use “Enter an email address in a valid format, for example, name@example.com”.

Help improve this pattern

Let us know how we could improve this pattern or share your user research findings. Discuss the ‘Email addresses’ pattern on GitHub