When asking users for their email address, you should:
- 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.
Back to patterns
Ask users for... Email addresses
Contents
Example
HTML Snippet for email example
<div class="form-group">
<label class="form-label form-label-bold form-label-large" for="email-address">Email address <span class="form-hint">So we can send you a receipt</span></label>
<input id="email-address" name="email-address" type="email" class="form-control">
</div>Make the field long enough
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
Help users to enter a valid email address
Help your users to enter a valid email address by:
- checking that what they’ve entered is in the format of an email address
- allowing users to paste the email address
- using the
type=“email”attribute so that devices display the correct keyboard
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.