A responsive newsletter subscription form with email validation and a seamless success state animation.
The project was developed as a high-fidelity implementation of a Figma design, focusing on creating a flawless interactive experience across mobile, tablet and desktop environments.
Key focus areas included managing form validation states using JavaScript Regular Expressions (Regex), implementing adaptive layout strategies using a mobile-first approach, and optimizing DOM manipulation for peak performance.
| State | Mobile 📱 | Desktop 💻 |
|---|---|---|
| Default |  |
 |
| Error |  |
 |
| Success |  |
 |
The challenge was to build out this newsletter form and get it looking as close to the design as possible.
-
✉️ Add their email and submit the form.
-
🎉 See a success message with their email after succesfully 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.
-
🔐 Client-Side Validation: Validates user input using strict JavaScript Regular Expression (Regex) before submission.
-
⚡ Optimized DOM Manipulation: Intelligently checks the DOM state to prevent duplicate error messages, optimizing browser memory during rapid clicks.
-
✨ Smooth CSS Animation: Implements custom
@keyframesto create a polished, slide-up entrance effect for the success state card. -
🖼️ Art Direction: Leverages the HTML
<picture>element to serve crop-specific, highly optimized images depending on the user's screen size. -
🎨 Maintainable Architecture: Utilizes CSS Custom Properties (Variables) for consistent colors, typography, and spacing.
-
🧱 BEM Methodology: Implements the Block Element Modifier naming convention to ensure the CSS is scalable and easy to read.
Christian Diaz
- 💼 LinkedIn - Christian Diaz
- 👾 Frontend Mentor - @chrisdzasc
- 🧩 Frontend Mentor Solution - 🚀 Newsletter Sign-up Form ✨