Contact Page
This React contact form leverages hooks for state management, Axios for seamless API requests, and Tailwind CSS for a polished UI. It includes robust input validation and integrates with Google Sheets for data persistence.
React Contact Form with Tailwind CSS and Axios
Introduction
This project is a responsive contact form built with React, styled with Tailwind CSS, and uses Axios for managing API requests. It includes client-side validation and integrates with SheetDB API to store form submissions.
Features
- Responsive design with Tailwind CSS
- Real-time form validation
- Axios for API requests
- Integration with SheetDB API for storing submissions
Project Setup
- Clone the repository using
git clone <https://github.com/hemraj-007/Contact-Page>. - Install necessary dependencies by running
npm installin the project root. - Start the development server with
npm run dev
- Start the development server with
Dependencies
- React
- Axios
- Tailwind CSS
Contact Form Validation
Validation ensures all fields are filled in correctly:
- Name: Non-empty
- Email: Valid email format
- Phone: 10 digits number
- Message: Non-empty
Google Sheets Integration
The form uses Google Sheets for persistence via the SheetDB API. Ensure your Google Sheet is accessible at: Google Sheets.
API Integration
Form submissions are sent to SheetDB via an Axios POST request.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
