Submitted over 1 year ago

Newsletter sign-up form with success message with HTML CSS and JS

Simon_Muchemi• 80

@SymonMuchemi

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

I would like some advice/guidance on how to use css units. Also, any correction on the solution will be highly appreciated

Community feedback

Adel Al Qosi• 250

@Adel-Al-Qosi

Posted over 1 year ago

you can use display grid for the form section. also give it some margin something like: margin: 2rem 3rem;

if that does not fix it enough please feel free to tell me and I will try to help more

Marked as helpful

Simon_Muchemi• 80

@SymonMuchemi

Posted over 1 year ago

@Adel-Al-Qosi Nope. It didn't work.

Adel Al Qosi• 250

@Adel-Al-Qosi

Posted over 1 year ago

@Simon-Muchemi it still needs more work to do but I fixed some of the css and made a pull request

Marked as helpful

Simon_Muchemi• 80

@SymonMuchemi

Posted over 1 year ago

@Adel-Al-Qosi It works. I have merged it and it solved the spacing on the form issue. Thank you very much.

RatifiedGeorge• 630

@Ratified

Posted over 1 year ago

Hello

I think you missed on part in this section of your javascript code: if (checkEmail(email)){ window.location.href = 'success-message.html'; }

To replace the placeholder email, [email protected], with the email the user entered, you can give the email a span class, e.g:

<p>A confirmation email has been sent to <span class="display-email"> [email protected]</span>. Please open it and click the button inside to confirm your subscription.</p>

Get the class in your javascript code, then add this to the section: if (checkEmail(email)){ window.location.href = 'success-message.html'; displayEmail.innerText = email' }

I hope this helps

Marked as helpful

Simon_Muchemi• 80

@SymonMuchemi

Posted over 1 year ago

@Ratified let me try it right now.

Simon_Muchemi• 80

@SymonMuchemi

Posted over 1 year ago

@Ratified I found a better way to use the email entered in the form to the the success message page. I used the localStorage API. Like this:

script file

const userEmail = document.getElementById('email');
localstorage.setItem('user-mail', userEmail);  // stores the email entered by the user in the browser

success-message.html file

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