[Homepage email signup] [UX] Design an error state for the email signup form

Description

On VA.gov at the bottom of the homepage, there is a section titled "Sign up to get the latest VA updates" with an input for an email address.

There is currently no error handling in place for this form. If the form fails to reach the GovDelivery service, the user will be directed to a browser error page (404). We need to determine how we want the user to be notified that their attempt to sign up for VA email updates failed, and give them steps on what action they can take, if any.

Secondly, we need to consider form validation for the email address input. Do we want to: 1) add messaging for invalid emails 2) validate email address length (min or max) 3) strip out invalid characters, etc.? What are the DST patterns for this that we may want to adopt?

The solutions should consider desktop and mobile views.

User story

AS A Veteran who is entering my email address in the 'Sign up to get the latest VA updates' form I WANT to be presented with validation errors/information if I don't enter a properly formed email address AND I want to be informed, as well as given next steps (if possible) if there was a system or other error that prevented my accurate email address from sending correctly SO THAT I have a good experience when signing up for updates and know what to do and if there are issues.

Quality / testing notes

Acceptance criteria

[ ] System error handling provided
- [ ] including next steps, if possible
[ ] Incorrect email format input error handling provided

department-of-veterans-affairs / va.gov-cms