Skip to content
Submitted 28 days ago

Front-end_Mentor_Contact_form_main

Thomas•450
@TomSif
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Honestly, I didn't think I'd spend this much time on this form, but I'm proud that I got to the end and polished it as best I could. I even added a small progress bar before the final reset for the sake of detail.

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

Oddly what took me the most time was the radio buttons, I struggled to find how to customize and animate them, at least now I know how to do it. Then javascript I think it's a bit of a work in progress, between finding how to validate the inputs, listening to all the inputs, I think it's not optimal and I have had to search many times how to do it via chatgpt and internet.

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

As this was an accessibility exercise, I hope the project meets the requested criteria, and I will be curious to know what other developers think of my work. Thank you to those who take the time to take a look and comment, your opinions and criticisms are greatly appreciated.

Community feedback

  • KapteynUniverse•2,150
    @KapteynUniversePosted 28 days ago

    Hey, good job. Nice progress bar.

    For better UX, calling resetForm(); in the if (allInputsValid) {...} statement would be better. Imagine writing a composition in the textarea and forgot to click the consent check and clicked the submit button :D. It also makes the errors to visible after reset.

    Also adding autofocus to the first name would be nice (probably depends on the page where this contact will be used ofc)

    Marked as helpful
    1
    Thomas•450
    @TomSifPosted 28 days ago

    @KapteynUniverse

    Thanks for taking the time to look at my code! :)

    Yes you're right, besides I think I moved resetForm() to the very end in the timeOut, to synchronize the disappearance of the success message and the reset, but I may have rushed the tests a bit, I admit.

    The autofocus is a very good idea, I'll add that :)

    Thanks again for this constructive comment, that's really what motivates me here and allows me to progress.

    1

Please log in to post a comment

Log in with GitHub

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