feat: Add form validations and success message to contact form

[akshay0611]

Summary:
This PR enhances the contact form by adding client-side validations and a success message. The changes aim to improve the user experience by ensuring valid inputs and providing feedback upon successful submission.

Changes Made:

• Added HTML5 validation attributes (pattern, minlength, maxlength) to enforce input constraints.
• Included a success message that appears dynamically after form submission.
• Implemented JavaScript to handle form validation, display the success message, and reset the form fields.

Testing:

• Verified that all fields are validated correctly.
• Tested responsiveness across different screen sizes.
• Ensured alignment with existing CSS styles and framework conventions.

Related Issue:
Closes #8

[Imran-imtiaz48]

The recent changes in the script.js file introduce a new event listener for handling the form submission of the contactForm. The code ensures form validation and provides user feedback through alerts and a success message. Additionally, it clears the form fields after a successful submission.

This implementation effectively enhances user experience and ensures better usability of the contact form. The use of setTimeout to hide the success message is a good addition, as it provides users with feedback without requiring manual dismissal.

Strengths

1. Form Validation: The code validates inputs for name, email, phone, and message fields and provides immediate feedback to the user. This ensures that the data entered is accurate before submission.
2. User Feedback: The success message gives clear feedback to the user upon successful submission.
3. Code Clarity: The logic is clear and easy to follow, with validation checks and comments explaining each step.

Suggestions for Improvement

1. Error Message Consistency: Consider using a consistent approach for error messages across all fields. For instance, while email uses validationMessage, other fields rely on title. Using validationMessage for all fields could improve consistency.

   alert(name.validationMessage || name.title);

2. Accessibility: Ensure the success message is accessible for screen readers by adding appropriate ARIA roles or attributes (e.g., role="alert").

   <div class="success-message" role="alert" style="display: none;">Form submitted successfully!</div>

3. Code Reusability: The validation logic could be refactored into a reusable function to reduce redundancy.

   function validateField(field, errorMessage) {
     if (!field.checkValidity()) {
       alert(errorMessage || field.validationMessage);
       return false;
     }
     return true;
   }

   Then, use it like this:

   if (!validateField(name, 'Name is required')) return;
   if (!validateField(email, 'Please enter a valid email address')) return;
   if (!validateField(phone, 'Phone number is required')) return;
   if (!validateField(message, 'Message must be between 10 and 500 characters')) return;

4. Clear Success Message Visibility: Instead of hiding the success message after exactly 5 seconds, allow the user to dismiss it manually as well (e.g., by adding a close button).

   <div class="success-message" style="display: none;">
     Form submitted successfully! <button onclick="this.parentElement.style.display='none'">Close</button>
   </div>