Skip to content
Submitted 3 months ago

Responsive newsletter signup form with success message

🔅 Yuliya 🐈•240
@O-Julia-O
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned how to use the Chrome Debugger with JavaScript, how to use JavaScript for form validation, and how to use regular expressions and the test() method to check inputs(strings). Additionally, I learned how to work with CSS classes using JavaScript.

What specific areas of your project would you like help with?

Any comments will be useful :)

Community feedback

  • Walid Hawari•100
    @whawariPosted 3 months ago

    Hey Yuliya 👋

    The design looks great!

    I would like to challenge you with 2 things:

    1. When I input a correct email and click on the subscribe button. Use the email I provided and display it in the success message component instead of the default email [email protected] that you are always displaying.
    2. When I click on the dismiss message button in the success message component. hide the success message component and show the newsletter form component.

    Best, Walid Hawari.

    1
    🔅 Yuliya 🐈•240
    @O-Julia-OPosted 3 months ago

    Dear Walid Hawari, thank you so much for testing my site and pointing out these mistakes. I've reviewed them and made the necessary fixes. ❤️

    0
  • John James Mosquera•370
    @JotaJotaM1Posted 3 months ago

    Hi, you did a great job, congratulations! As a suggestion, you could improve the email input to better match the design with this simple code:

    input {

    width: 100%;
padding: 1rem 24px;
border-radius: 8px;
margin-bottom: var(--spacing-24);
border: 1px solid #dadada;

    }

    Greetings from Colombia! 😄

    1
    🔅 Yuliya 🐈•240
    @O-Julia-OPosted 3 months ago

    Hello, John James! :)) Thanks for your comment, I will change it <3

    1

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