Newsletter sign-up form with success message solution
Design comparison
Solution retrospective
Today I do the FRONTEND MENTOR CHALLENGE of creating a Newsletter Sign-up Form with a stylish success message. Learn how to structure the HTML markup, style the form elements with CSS for a RESPONSIVE DESIGN and implement simple EMAIL VALIDATION with JavaScript functionality to display a success message upon successful submission.
I first start with the HTML FORM DESIGN, then I move on the CSS Design, and finally finish with JAVASCRIPT at the end. At the end I show the finished project, showing the FORM VALIDATION and any possible
Community feedback
- @ManudeQuevedoPosted over 1 year ago
Very impressive! It works perfectly.
Some points I think it would make your project even better:
- Try adding a transition to your buttons, so when you hover the background change looks smooth, this will make it more elegant.
- Responsiveness needs some work, when you make the page smaller, there's a point where the content breaks a little bit on the bottom, and the content on the left takes more height than the image itself.
- In your HTML avoid using divs, as this is not good for accessibility, and as a Developer I strongly suggest you always have this in mind, because when you develop a website or web app, you have to have in mind all types of users, try to user semantic HTML, and use <div> as your last resource.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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