Accessible contact form | Semantic HTML, vanilla JS & CSS
Solution retrospective
Form validation became unneccessarily complicated, as I set out to do it with HTML and CSS only. I got it working to 90% but I couldn't make it the final stretch. I could have left it and it would have been working fine, but it would not have been able to differentiate missing from incorrectly provided inputs. In the end, I scrapped it and implementet an all out JS solution in stead, which all took way too long and didn't exactly end up DRY.
On the accessibility side of things, the provided articles on accessible forms wer super helpful and well-curated. Implementing error messages and validation really makes you have to think about how it all comes accross to AT:s.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @T23harms
The code appears to be a clean, well-structured contact form with proper HTML, CSS, and JavaScript integration. The form is responsive, and CSS variables are well-organized for easy adjustments. The JavaScript uses event listeners to handle form validation and user interactions, ensuring that required fields are validated and users get real-time feedback.
A few things to note:
It’s good that validation functions are modular, making it easy to add or modify rules. However, make sure to check for edge cases like special characters in names that might not pass the current regex.
The use of ARIA attributes is a good accessibility practice, but adding labels for all interactive elements would further improve accessibility.
The success message has a nice animation but ensure it doesn’t interfere with form usability on slower devices.
Overall, it's a well-implemented solution that prioritizes user experience and responsiveness.🚀
Marked as helpful
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