A responsive newsletter sign-up form that validates user input and displays a success message upon successful submission. Built with HTML, CSS, and vanilla JavaScript, this project emphasizes form validation, user feedback, and mobile-first design principles.
This is a solution to the Newsletter Sign-up Form with Success Message challenge on Frontend Mentor.
This challenge was to build out this newsletter sign-up form and display a success message upon submission.
Users are able to:
- Submit their email to sign up for a newsletter
- See a success message with their email after successfully submitting the form
- Receive validation messages if the email field is left empty or incorrectly formatted
- View the layout optimally on different screen sizes
- Experience hover and focus states on interactive elements
Frontend Mentor challenges helps improving coding skills by building realistic projects.
Requirements for the challenge: HTML, CSS and JavaScript.**
The challenge was to build out this newsletter form and get it looking as close to the design as possible.
- Solution URL: GitHub Repository
- Live Site URL: Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vanilla JavaScript
In this project, I deepened my understanding of form validation and handling user interactions to display appropriate feedback messages.
Moving forward, I plan to:
- Further enhance form validation techniques
- Optimize responsive design across different devices
- Work faster by developing better habits