Newsletter sign-up form with success message using CSS Flexbox

Solution retrospective
I’m most proud of the clean, responsive, and user-friendly design of the newsletter sign-up form. The combination of a well-structured HTML layout, organized CSS styles, and interactive JavaScript validation creates a seamless experience for users. The success modal also enhances usability by providing clear feedback after form submission. Additionally, I like how the form includes email validation, error handling, and real-time feedback to improve user experience.
What would you do differently next time?
-
Enhance Form Validation: The current email validation is functional, but I would implement more comprehensive validation using the browser's built-in validation APIs and provide better feedback messages.
-
Store User Data: If this were a real-world application, I’d integrate it with a backend API to store email addresses and send confirmation emails.
Challenge: Ensuring users enter a valid email while providing clear error feedback was a bit tricky. Initially, the error message was always displayed, making the form look broken even before user interaction.
Solution: I implemented event listeners to show and hide the error message dynamically. Now, the error appears only when the user enters an invalid email and disappears as soon as they type a correct one.
What specific areas of your project would you like help with?-
The email validation works well, but are there better ways to handle it?
-
Should I use the browser's built-in validation (pattern attribute) instead of custom JavaScript regex?
-
Is my JavaScript clean and efficient, or could it be refactored for better performance?
-
Are there any unnecessary styles in the CSS that could be optimized?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Annalyza106
I like the responsiveness of the website. Great work!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord