Frontend Mentor | Contact form coding challenge solution

Solution retrospective

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

I hope my projects become more accessible.

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

It's still tough to figure out the accessibility features.

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

Help is always appreciated.

Community feedback

@kaamiik

Posted 10 days ago

Hi! Congratulations on completing this challenge. I noticed a few things in your code that I’d like to share:

First, I couldn't see your error messages right away; they only appeared after some time. You should consider adding the novalidate attribute to your <form> tag and handling form validation with JavaScript.
I see an asterisk on every label element. You could use a visually-hidden class to make that asterisk accessible to screen readers, eliminating the need to mark fields as required. Alternatively, you can keep the required property and skip the visually-hidden class.
There's no need to use a <footer> tag here. All form elements should be inside a <form> tag and wrapped within the <main> tag.
Your toast message should disappear after a short time. You can use setTimeout in your JavaScript to achieve this.

Aside from these points, everything looks great! Keep up the good work!

Contact form