Newsletter sign-up form with success message

Community feedback

• 

  Josué Zalazar•80

  @josuez2006Posted 12 months ago

  Hey there, you did a fantastic work! 😄

  Consider these fixes to make it even better

  1 - Use data attributes to display the form or the thank-you modal

  <form class='sign-up' data-hidden=false>...</ form>
  <section class='thank-you-modal' data-hidden=true>...</section>
  

  [data-hidden=false] {
       display: none;
  }
  
  [data-hidden=true] {
        display: flex;
  }
  

  signUpForm.setAttribute('data-hidden', 'false');
  thankYouForm.setAttribute('data-hidden', 'true');
  

  2 - Use the picture tag to change the image depending the screen size

  <picture>
      <source src="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 600px) />
       <img class="modal-img" src="./assets/images/illustration-sign-up-mobile.svg" alt="Form Illustration"/>
  </picture>
  

  3 - Look at your span tags. Most of them are paragraphs and should be a p tag.

  <p class="description">
     Join 60,000+ product managers receiving monthly updates on:
  </p>
  

  If you find this useful, please mark it as helpful

  Have an amazing day 😁

  Marked as helpful

  0

  ---

  

  Namrata Sinha•530

  @nmrtsnhPosted 12 months ago

  @josuez2006 Thank you for the feedback. I'll work on that.

  0
• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 12 months ago

  Namaste Namrata congratulations on completing this challenge🎉🎉

  Your solution looks pretty good. But you can improve your code a little bit

  body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  }
  

  This will center your newsletter perfectly and then you can remove

  .sign-up-form, thank-you-form {
  /*   width: 100%;  by default it will get a width of 100% so you don't need it  */
   /*   margin: 6rem auto 0;   We've centered the body so you don't need to use margins anymore🙂*/
  }
  

  And I'd also recommend to use the form tag instead of a .form div this will give you some additional keyboard functionality and will help with the pages accessibility.

  I hope you found this helpful👍

  Keep up the good work and have a very nice day🙂😄

  Marked as helpful

  0

  ---

  

  Namrata Sinha•530

  @nmrtsnhPosted 12 months ago

  @ratul0407 Thank you for the feedback. I''ll make these changes.

  1