tailwind-contact-form

Solution retrospective
I am happy the form works alrigth,especially with javascript since functionalities sometimes challenges me. I used toast for the notification an my tailwind is getting better.
Area to improve
- I would use
getElementsByNames
instead of ID when styling my error code on javascript as by using ID I made my script longer. Has some sense of redudancy. - I would use j-querry to reset my form after submiting.
- I would re-create the form with react to compare the build-time and challenge myself.
-
Reseting the form: I tried using j-query and initially, had tried adding another event listener to clear the form by setting the value to be empty
''
. I solved it by using the reset function. -
Changing color of button "icon". I used hue
input[type="radio"]:checked { filter: hue-rotate(300deg); /* accent-color: green; */ }
- Changing the background colors of radio button when user focus on them to green.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Dev-Amna
Great job on the form! However, when I click the "Submit" button without filling any fields, it still shows the success message:
"Message sent. Thanks for completing the Form. We'll be in touch soon!"
This means the form lacks validation to check if fields are empty before submission. Could you please adjust it so that: ✅ The form only submits when all required fields are filled. ❌ If fields are empty, it should display an error (like "Please fill in all fields").
- @Elai5
Working on it @Amna
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