Build a Contact Form with Google Sheets Backend (No Server Required)

The Problem with Traditional Contact Forms

Most contact forms require a backend server to process submissions. This means setting up PHP, Node.js, or another server-side language, configuring email sending, and dealing with spam protection. It's overkill for a simple contact form.

What if you could skip all of that and just store form submissions directly in a Google Sheet? That's exactly what we're going to build.

What You'll Need

• A Google Sheet to store submissions
• A SheetAPI.pro account (free tier works fine)
• Basic HTML and JavaScript knowledge

Step 1: Set Up Your Google Sheet

Create a new Google Sheet with the following columns:

• Name
• Email
• Message
• Timestamp

You can add more fields like Phone, Company, or Subject as needed.

Step 2: Connect to SheetAPI.pro

Sign in to your SheetAPI.pro dashboard and connect your Google Sheet. Once connected, you'll get an API endpoint that looks like this:

https://api.sheetapi.pro/v1/abc123xyz

Copy your API key from the dashboard as well (keep it secret!).

Step 3: Build the HTML Form

Here's a clean, accessible contact form:

<form id="contactForm">
    <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    <button type="submit">Send Message</button>
    <p id="status"></p>
</form>

Step 4: Add JavaScript to Handle Submission

Now let's wire up the form to submit data to your Google Sheet via SheetAPI.pro:

const form = document.getElementById('contactForm');
const status = document.getElementById('status');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    status.textContent = 'Sending...';
    
    const formData = {
        Name: form.name.value,
        Email: form.email.value,
        Message: form.message.value,
        Timestamp: new Date().toISOString()
    };
    
    try {
        const response = await fetch('https://api.sheetapi.pro/v1/YOUR_SHEET_ID', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR_API_KEY'
            },
            body: JSON.stringify(formData)
        });
        
        if (response.ok) {
            status.textContent = '✅ Message sent successfully!';
            form.reset();
        } else {
            throw new Error('Failed to send');
        }
    } catch (error) {
        status.textContent = '❌ Error sending message. Please try again.';
    }
});

Security note: For production sites, use environment variables or a serverless function to hide your API key from the client-side code.

Step 5: Style Your Form (Optional)

Add some CSS to make it look professional:

form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background: #667eea;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

button:hover {
    background: #5a6fd6;
}

Advanced Features You Can Add

1. Email Notifications

Use Google Apps Script to automatically email you when a new submission arrives in your sheet.

2. Spam Protection

Add a honeypot field or integrate with hCaptcha/reCAPTCHA to prevent spam.

3. Auto-Reply

Set up an automated "Thank you" email using Google Apps Script or Zapier.

4. Webhooks

Configure SheetAPI.pro webhooks to trigger actions when new submissions arrive (send to Slack, Discord, or your CRM).

Why This Approach Works

• ✅ No server required — Deploy on GitHub Pages, Netlify, or any static host
• ✅ Free tier available — Perfect for personal sites and small projects
• ✅ Easy to manage — View, filter, and export submissions in Google Sheets
• ✅ Scalable — Upgrade to handle thousands of submissions per month
• ✅ Collaborative — Share the sheet with your team to manage inquiries together

Real-World Examples

This exact setup is used by:

• Portfolio sites (freelancers collecting client inquiries)
• Landing pages (startups gathering beta signups)
• Event websites (collecting RSVPs and attendee info)
• Support forms (small teams tracking customer issues)

Next Steps

Now that you have a working contact form, explore these related tutorials:

• Set up webhooks for real-time notifications
• Learn when Google Sheets works as a database
• Read the full API documentation

Ready to build your form? Start free with SheetAPI.pro