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 using HTML,CSS and JavaScript

@ShoaibShuja

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?

Even though I used a lot of Divs in order to maintain a responsive layout I managed to design the layout easily using CSS Flexbox. And also the most important part which was the form validation took quite some time to be figured out. I successfully created a function which did all the validation, but the code was barely readable, so I divided the validation function into smaller parts which made the code much better and it even made the functionality better.

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

This whole project was quite a challenge starting from the design up to the validation, but I learned quite a lot, and this really forced me to think a lot about different parts and come out with an algorithm which works perfectly. Definitely worth the struggle.

What specific areas of your project would you like help with?

Some simpler functions or algorithms which would make the validation much easier would be appreciated.

Community feedback

Nikesh W 170

@randomduckduck

Posted

Your email address field does not work. It gives error even though correct address is being added. And thus submit button does not work.

Oh got it. Checked code, found it uses @gmail.com emails only. Now its working. Nice.

1

@ShoaibShuja

Posted

Thanks for reviewing my code dear friend.

1

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