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

Community feedback

• 

  Adel Al Qosi•250

  @Adel-Al-QosiPosted 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

  1

  ---

  

  Simon_Muchemi•80

  @SymonMuchemiPosted over 1 year ago

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

  0

  

  Adel Al Qosi•250

  @Adel-Al-QosiPosted 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

  1

  

  Simon_Muchemi•80

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

  1
• 

  RatifiedGeorge•670

  @RatifiedPosted 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

  0

  ---

  

  Simon_Muchemi•80

  @SymonMuchemiPosted over 1 year ago

  @Ratified let me try it right now.

  0

  

  Simon_Muchemi•80

  @SymonMuchemiPosted 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

  1