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

Responsive contact form in React

P

@mikehwebdev

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • 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?

This is my first attempt at a React form which has thrown up some challenges - I can see why devs don't like to use React for forms.

What challenges did you encounter, and how did you overcome them?

Validating the form data - especially email addresses - was a challenge. This was especially evident in trying to conditionally render errors and ensuring that errors were only flagged on the second render but would then vanish after correct info was entered. useRef(), has() in CSS and the + selector in CSS were invaluable in getting this right - along with some trial and error!

Community feedback

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