August 2024
Contact Forms Components
Contact Form with Zod Validation, PDF Attachment, and Google Sheets Integration
Contact Form with Zod Validation, PDF Attachment, and Google Sheets Integration
Contact Form with Zod Validation, PDF Attachment, and Google Sheets Integration
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
- 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.
- 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.
- PDF Attachment
- Validates the file type during submission to accept only PDF files.
- Enables smooth handling of attached files for backend processing.
- 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.
More projects
view all →
My Website v4 — Heritage Edition
My personal portfolio reimagined around a Malaysian heritage theme — a dark malam palette with amber & cream accents, wayang-inspired motifs, hand-drawn sketch filters, and custom keris/hand cursors. Includes a sound toggle, easter eggs, an AI helper, a branded contact flow (Resend), and an MDX blog. Built with Next.js App Router, TypeScript, Tailwind CSS, and Framer Motion; deployed on Cloudflare Workers. Archived here as the previous design ahead of the next redesign.
My Website v3 - NextTS App router
Redesign my websites with NextJS + Tailwind CSS + Framer Motion = Animation (on-going)
Anime-based Gaming Pitch Website
This application serves as a professional platform for Okarun Gaming to showcase their team, attract sponsors, and engage with their community while maintaining their unique anime-inspired identity and professional esports presence.