This pattern is used for accurately capturing email addresses. As email is the primary way we communicate with customers, it’s important to get this right.
Base pattern
This is email capture at its simplest with the hint text doing some of the work in order to ensure the user inputs their correct details. This base pattern can be used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple email addresses.
Usage example
If email communication is critical to the success of the form, requiring the user to confirm their details, may yield better results by managing mistakes - despite the higher level of user effort required to input their email address twice.
Error states
The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change.
Email with instructions error
Email with confirm error
Dos and don'ts
- Do use the Email with confirm pattern if email communication is critical to the success of the form.