Contact Form Challenge

This challenge is to build a responsive and accessible contact form based on the provided design. This form should validate inputs, handle submission, and provide clear feedback to users.

Objective

• Build a contact form that closely matches the provided design.
• Ensure the form is fully accessible, allowing users to navigate and interact using keyboard only.
• Implement form validation for required fields and email format using JavaScript.
• Show success message (toast) upon successful form submission.
• Provide hover and focus states for interactive elements.
• Optimize layout for different screen sizes (responsive design).

Technologies Used

• HTML5
• CSS3 (Flexbox for layout, media queries for responsiveness)
• JavaScript (Vanilla JS for form validation and submission)

Preview

Desktop Preview:-

Mobile Preview

Features

• Accessible form with ARIA attributes for screen readers.
• Error messages for missed required fields and incorrect email format.
• Tooltips for interactive elements.
• Responsive design for desktop and mobile screens.
• Submission success message displayed in a toast.

Installation

1. Clone the repository:
   git clone https://github.com/Yashi-Singh-1/Contact-Form.git
2. Open index.html in your web browser.

Contributing

Contributions are welcome! Follow these steps:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Create a new Pull Request.

Author

Yashi Singh

LinkedIn Profile

Visit my LinkedIn profile: https://www.linkedin.com/in/yashi-singh-b4143a246