📨 The Easiest Way to Add a Contact Form to Your Site (Using Google Forms)

Want to add a contact form to your site without spinning up a backend?

Looking for something quick, free, and serverless?

In this article, I’ll show you two practical ways to embed Google Forms into your Next.js site, with clean UI and no server-side headaches.

See the working version on my portfolio:
👉 https://satty-portfolio.vercel.app/

✅ What You’ll Learn

• ✅ How to embed Google Forms using an iframe
• ✅ How to customize your own UI and POST to Google Forms
• ✅ The pros and cons of both approaches
• ✅ Code examples using Next.js (App Router) + MUI
• ✅ Live example from my own portfolio site

🎯 Who Is This For?

• Developers who want a simple contact form
• Those looking for a serverless solution
• Next.js + MUI users who want better design flexibility

🛠 Tech Stack (My Portfolio Site)

🧩 Option 1: Embed Google Form with <iframe> (Easiest Way)

🔧 Steps

1. Create your form at Google Forms
2. Click Send → <> Embed icon
3. Copy the iframe code

🧪 Example

<iframe src="https://docs.google.com/forms/d/e/xxxxxxxx/viewform?embedded=true" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" > Loading… </iframe> 

✅ Pros & Cons

🎨 Option 2: Create a Custom Form and POST to Google Forms

Google Forms has a hidden endpoint (formResponse) that lets you POST data directly. This allows full UI freedom while keeping your form submission serverless.

✨ What You’ll Need

• The form’s action URL (formResponse)
• Each field’s name attribute (entry.XXXXXXX)

🔍 How to Get the Form Action URL and Field Names

1.Get the action URL

• Open your Google Form
• Right-click → “View Page Source”
• Look for:

<form action="https://docs.google.com/forms/d/e/xxxxxx/formResponse" ...> 

2.Get the field names
Search the source code for:

<input name="entry.123456789" /> <input name="entry.987654321" /> <textarea name="entry.192837465" /> 

Use these entry.XXXXXXX values in your code.

🧪 Simplified Code Example

'use client'; import { useState } from 'react'; const FORM_URL = 'https://docs.google.com/forms/d/e/xxxxxxxx/formResponse'; export default function ContactForm() { const [form, setForm] = useState({ name: '', email: '', message: '' }); const [submitted, setSubmitted] = useState(false); const handleChange = (e: any) => { setForm({ ...form, [e.target.name]: e.target.value }); }; const handleSubmit = async (e: any) => { e.preventDefault(); const formData = new FormData(); formData.append('entry.123456789', form.name); formData.append('entry.987654321', form.email); formData.append('entry.192837465', form.message); try { await fetch(FORM_URL, { method: 'POST', mode: 'no-cors', body: formData, }); setSubmitted(true); } catch (err) { alert('Something went wrong. Please try again.'); } }; if (submitted) return <p>📨 Thanks! Your message has been sent.</p>; return ( <form onSubmit={handleSubmit}> <input name="name" placeholder="Your Name" onChange={handleChange} required /> <input name="email" placeholder="Your Email" type="email" onChange={handleChange} required /> <textarea name="message" placeholder="Your Message" onChange={handleChange} required /> <button type="submit">Send</button> </form> ); } 

⚖️ Which Method Should You Use?

🔗 Live Example

See the working version on my portfolio:
👉 https://satty-portfolio.vercel.app/

✅ Summary

Whether you're launching a portfolio or MVP, Google Forms is a rock-solid, free, and fast option. Start simple, scale smart.