Forms
Email address
Ask for a user’s email address to provide a service, to contact them directly, or as a unique way of identifying them.
How to ask for a user’s email address
Collect a user's email address when it is needed to provide a service to the user or business, where you need a unique way of identifying the user or you need a way of contacting them directly based on their permissions.
Labelling
‘Email address’ should be used as the field label but you should also inform the user as to why you are collecting this piece of information so you are transparent.
Do
Check users have used the correct format.
Inform users why you are collecting this data.
Consider email verification if the business needs to check that users have access to the email address they give you.
Allow autofill so the user can easily fill out this form based on saved personal data on their device i.e set autocomplete attribute to ‘email’.
Give plenty of room in the Text Field for (Most) users to fit their whole email address.
Help users to enter a valid email address by:
Checking they have entered the correct format.
Allowing users to paste the email address.
Setting the type attribute to email so that devices display the correct keyboard.
Setting the spellcheck attribute to false so that browsers do not spell check the email address.
Allowing keyboard shortcuts such as ‘@@’ to enter email address on iOS devices.
Don’t
Ask for ‘Email address’ twice, it’s an extra action and may lead to more errors when filling out the form.
Show example/hint placeholder text, entering an email address is very common.
Check if email is valid whilst the user types, this should be done when they tab out of the field (On blur).
Error state variants
Please enter your email address (If empty on tab out or selection of ‘Submit’)
Please enter a valid email address e.g
Help improve this page
To help make sure this page is as useful as it can be, relevant and kept up to date with industry best practices, please get in touch to share your research findings, and contribute to this page.
Propose a change or contribution by suggesting a feature request.