This project is a Contact Us form component built using modern frontend technologies including React, TypeScript, and Tailwind CSS. It utilizes React Hook Form for efficient form handling, with schema validation powered by Zod and the integration of @hookform/resolvers to handle form validation logic. For making API requests, Axios is employed.
The form includes fields for first name, last name, email, message, and a query type (General Enquiry or Support Request). Additionally, it includes a consent checkbox before submission.
- Responsive UI: The form is styled using Tailwind CSS, ensuring a clean and responsive design.
- Form Validation: Form input is validated using Zod schemas integrated with React Hook Form for better handling of user input and error management.
- API Integration: Axios is used for sending form data to a backend API for processing.
- Custom Hook: Utilizing the
@hookform/resolverspackage to integrate Zod with React Hook Form, making schema validation seamless.
- React: JavaScript library for building user interfaces
- TypeScript: Type-safe development experience
- Tailwind CSS: Utility-first CSS framework for styling
- React Hook Form: Form management library for React
- @hookform/resolvers: Resolver library for integrating external validation with React Hook Form
- Zod: TypeScript-first schema declaration and validation library
- Axios: Promise-based HTTP client for making requests to the backend