Contact Forms Components

Advanced Contact Form with Zod Validation and Google Sheets Integration

Overview

This contact form is designed to handle user inquiries with a modern, feature-rich approach. It ensures an optimal experience for users while simplifying data management for administrators. Key features include advanced validation, PDF file handling, and seamless integration with Google Sheets for record-keeping.

Features

1. Form Components
   • Input Fields: Collects essential information such as name, email, subject, and message.
   • File Upload: Allows users to optionally attach a PDF file.
   • Submit Button: Triggers form submission after successful validation.
2. Zod Validation
   • Ensures accurate and structured user input with the following rules:
     • Name: Required, alphanumeric characters only.
     • Email: Required, must follow a valid email format.
     • Message: Required, minimum length enforced.
     • File Upload: Optional, accepts only PDF files.
3. PDF Attachment
   • Validates the file type during submission to accept only PDF files.
   • Enables smooth handling of attached files for backend processing.
4. Google Sheets Integration
   • Automatically sends user details, messages, and optional file information to a Google Sheet.
   • Achieved via the Google Sheets API, ensuring real-time data entry for efficient record-keeping.
   • Alternatively, integrates with Google Forms for a simpler setup.

Benefits

• Real-time Input Validation: Prevents invalid data from being submitted, improving accuracy and reducing backend errors.
• Enhanced Usability: PDF attachment capability simplifies user interaction for inquiries requiring additional documentation.
• Streamlined Data Management: Automated integration with Google Sheets ensures all form submissions are neatly organized and accessible.

Use Case Scenarios

• Customer support inquiries.
• Job application submissions with attached resumes.
• Collecting feedback or documentation in structured formats.