Newsletter Sign-Up Page

Challenge Details

This is a challenge on Frontend Mentor to build a newsletter form. The objective is to allow users to::

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
• The field is left empty
• The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

My build/design

I built this mobile first, with some media queries to make adaptations to desktop layout.

The JavaScript is fairly simple, the most complex part is using a regular expression (regex) to check the e-mail format.

Other than those, it just takes some time to get the design right.

To switch between form and submission confirmation pages I use display: hide. I do need to go back and ensure that these elements are labelled correctly from an accessibility perspective.

Desktop:

Mobile:

Links

The website is live on GitHub:

Newsletter live page on GitHub

And the submission on Frontend Mentor here:

Newsletter on FrontendMentor