Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter

Obi Faith 210

@ObiFaith

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What did you find difficult while building the project?

  • Lack of understanding of event.preventDefault().
  • Redirection from the index page to the success page

Do you have any questions about best practices?

  • Yes, I will appreciate that

Community feedback

P
Jax Teller 670

@piushbhandari

Posted

  • i would avoid using cursor: pointer; for inputs and instead use the browser default
  • you have a label but it's not hooked up to your email input. since your for attribute on your label is 'email' i would add attributes id="email" name="email". this is for accessibility. when you click on a label, it should then focus on the input it's associated to
  • you have a second label that i think you can just use the <p> element instead
  • right now, after entering a valid email, when i tried to submit your page leads to a 404 page. it looks like you're submitting the form with no url. i would either remove the outer form or use javascript to prevent the form submitting and instead you controlling what it does via code.

let me know if you need help with the last one. essentially what i did in my markup was attach this onsubmit="return false;" to my form element which blocks the form from doing its native action

Marked as helpful

1

Obi Faith 210

@ObiFaith

Posted

@piushbhandari I noticed the 404 error when I submit an email address after I hosted. I will debug that and update my code

Thank you so much for the feedback

0
P
Jax Teller 670

@piushbhandari

Posted

@ObiFaith

try adding this onsubmit="return false; as an attribute to your form element.

0
Obi Faith 210

@ObiFaith

Posted

I found a way to redirect @piushbhandari. Thanks for the feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

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