Improve Contact Form Validation and Accessibility

[adityashirsatrao007]

Description

Enhanced the contact form with comprehensive client-side validation and improved accessibility features. This update provides users with immediate, helpful feedback when filling out the form, making it more user-friendly and reducing submission errors.

Related Issues

This enhancement improves the overall user experience of the contact form, addressing potential usability issues where users might submit invalid data without knowing what went wrong.

Changes Made

• Name Field Validation: Added pattern matching to ensure names contain only valid characters (letters, spaces, hyphens, and apostrophes). Minimum length of 3 characters enforced.
• Email Validation: Implemented robust email format validation using regex patterns
• Message Validation: Added character limits (10-500) with clear feedback to users
• Real-time Feedback: Validation triggers on blur and updates as users type to fix errors
• Visual Error Indicators: Red borders and background highlighting for invalid fields
• Accessible Error Messages: Proper ARIA attributes (aria-invalid, aria-describedby) for screen reader support
• Form Accessibility: Added proper id/label associations, autocomplete attributes, and semantic HTML structure
• Dark Mode Support: Error states now work properly in both light and dark themes with appropriate color contrast
• Code Quality: Removed inline styles from back-to-top button, moved to external CSS following best practices

Checklist

• I have read the project's contributing guidelines
• My code follows the project's coding style and conventions
• I have performed a thorough self-review of my own code
• I have added comments to my code, especially in complex or non-obvious sections
• My changes introduce no new warnings or errors during compilation/runtime
• The code maintains consistency with existing project patterns
• All validation functions are well-documented and maintainable

Testing

Tested the form with various inputs:

• Valid names, emails, and messages submit successfully
• Invalid inputs (short names, malformed emails, empty messages) show appropriate error messages
• Error messages clear when users correct their input
• Form works correctly in both light and dark modes
• Accessibility features verified (keyboard navigation, screen reader announcements)

This contribution maintains the existing design aesthetic while significantly improving the user experience and code quality of the contact form.

[github-actions]

👋 Thank you for opening this Pull Request!

Your contribution is much appreciated. Our team will review it shortly.

🔎 In the meantime, please:

• Ensure all file changes are correct.
• Verify that your commits are clean and meaningful.
• Address any pending review comments if applicable.

We look forward to collaborating with you. 🚀