Submitted about 1 month ago

Responsive newsletter signup form with success message

🔅 Yuliya 🐈• 240

@O-Julia-O

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

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

@whawari

Posted about 1 month ago

Hey Yuliya 👋

The design looks great!

I would like to challenge you with 2 things:

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.
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.

🔅 Yuliya 🐈• 240

@O-Julia-O

Posted about 1 month 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. ❤️

John James Mosquera• 310

@JotaJotaM1

Posted about 1 month 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! 😄

🔅 Yuliya 🐈• 240

@O-Julia-O

Posted about 1 month ago

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

Please log in to post a comment

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