Email address

Use: Deployed

Follow this pattern to ask a user for an email address.

Usage

When to use this pattern

For collecting an email address, which is required for online forms. As of October 2024, collecting an email address is required for online forms. Digital submissions require following up with the user digitally which requires an email address.

Examples

Default

An email address text-input field. — An example of asking users for an email address

How to design and build

How this pattern works

Collect an email address for the Veteran and, if not the same person, the person completing the form. It is a requirement to capture the email address of the person completing the form. If this is not the Veteran it is also necessary to collect the email address of the Veteran. Both should be notified at the appropriate touch points for a form submission.
Pre-populate email address from VA.gov Profile whenever possible. This makes it easier for users as they have one less field to complete.
If possible, tell users why you want their email address. Users need to know that the VA won’t abuse their email and which email they’d like to provide. An example message is: We may use your contact information so we can get in touch with you if we have questions about your application.
Do not use an email confirmation field. The email confirmation field is unnecessary if we’re using the email from a profile. Also, it’s not useful for catching errors as most users copy and paste and don’t review their initial entry.
Validate email addresses upon entry. You should validate email addresses for formatting so you can let users know if they have entered an email incorrectly.
Inform users when prefilling information from VA.gov profile. Notify users that information from their profile has been prefilled into the form using the prefill component.
Pair with phone numbers. Collection of email address is paired with phone numbers. The two patterns typically appear on the same step/page.

Components used in this pattern

Text input

Page templates available for this pattern

Use the VADS templates (Patterns & Forms) for Names in Figma.

Code usage

emailPattern is a web-component pattern available in the Forms library.

Content considerations

Labels, error messages, and hint text

Email: Hint text: None; Error type: No entry; Error message: Enter a valid email address without spaces using this format: email@domain.com; Error type 2: Invalid character; Error message 2: You entered a character we can’t accept. Try removing "[specific characters entered]"