Implement Google Sheets backend for contact form submissions

[ballidev]

Overview

Replace the current mailto-based contact form with a Google Sheets + Apps Script backend for better tracking and automation.

Current State

• Contact form uses mailto: links to open user's email client
• No tracking of form submissions
• Relies on user completing email send

Proposed Solution

Implement a serverless backend using Google Sheets and Google Apps Script to:

• Store all form submissions in a Google Sheet
• Send automated email notifications
• Provide better UX with in-page submission

Implementation Tasks

1. Google Sheets Setup

• Create new Google Sheet for contact form submissions
• Add columns: Timestamp, Name, Email, Company, Project Type, Budget, Timeline, Message, Status
• Set up proper permissions and sharing

2. Google Apps Script Development

• Create Apps Script project attached to the sheet
• Implement doPost() function to handle form submissions
• Add email notification using MailApp
• Add data validation and error handling
• Deploy as Web App with public access

3. Frontend Updates

• Replace mailto functionality with fetch API
• Add async form submission
• Implement proper loading states
• Add success/error messaging
• Handle CORS with no-cors mode
• Add retry logic for failed submissions

4. Testing & Validation

• Test form submission flow end-to-end
• Verify email notifications are received
• Test error scenarios
• Validate data appears correctly in sheet
• Check mobile responsiveness

5. Documentation

• Document the Apps Script deployment process
• Add instructions for accessing submission data
• Create runbook for troubleshooting

Benefits

• ✅ Free solution using Google's infrastructure
• ✅ All submissions tracked in spreadsheet
• ✅ Automated email notifications
• ✅ Better UX - no email client required
• ✅ Can add team members to view submissions
• ✅ Easy data export and analysis

Technical Notes

• Use mode: 'no-cors' for Google Apps Script compatibility
• Consider adding rate limiting in Apps Script
• Add optional Slack webhook for notifications
• Consider auto-response emails to submitters

Code References

• Current form handler: private_html/js/contact.js
• Contact page template: private_html/pages/contact.ejs

Acceptance Criteria

• Form submissions stored in Google Sheet
• Email notifications sent for each submission
• User sees success message without leaving page
• Graceful fallback if submission fails
• No regression in form validation UX