How to Add a Contact Form to Google Sites

Google Sites is one of the easiest ways to build a website. It is free, works inside your browser, and integrates with the rest of Google Workspace. However, Google Sites does not include a built-in contact form that sends submissions to your email. The only native option is embedding a Google Form, which looks out of place and lacks features like email notifications, spam protection, and custom styling.

In this tutorial, you will learn how to add a professional contact form to your Google Sites website using Static Forms. The form will send submissions directly to your inbox, protect against spam, and match the look and feel of your site — all without writing any backend code.

Why Not Just Use Google Forms?

Before we dive in, you might wonder why you would not just embed a Google Form. Here are some reasons:

• No email notifications by default — Google Forms collects responses in a spreadsheet but does not email you when someone submits
• Limited styling — Google Forms has its own design that cannot be customized to match your site
• No spam protection — there is no honeypot or CAPTCHA support
• No reply-to address — you cannot reply directly to the person who submitted the form

Static Forms solves all of these problems. You get instant email notifications, built-in spam protection, custom styling, and the ability to reply directly to submissions.

Prerequisites

Before you begin, make sure you have:

• A Google Sites website (new Google Sites, not the classic version)
• A Static Forms account — sign up for free
• Your API key from the Static Forms dashboard

How It Works

Google Sites lets you embed custom HTML code into any page using the Embed feature. The embedded code runs inside an iframe on your page. We will use this feature to add an HTML form that submits data to the Static Forms API, which then delivers the submission to your email inbox.

The flow looks like this:

1. Visitor fills out the form on your Google Sites page
2. The form sends data to Static Forms via the API
3. Static Forms delivers the submission to your email
4. The visitor sees a success confirmation message

Step 1: Get Your Static Forms API Key

1. Go to staticforms.dev and create a free account
2. Verify your email address
3. Copy your API key from the dashboard

You will need this key in the next step.

Step 2: Create the Contact Form HTML

Copy the following HTML code. This is a complete, self-contained contact form with built-in styling that works inside Google Sites:

Important: Replace YOUR_API_KEY_HERE with your actual API key from the Static Forms dashboard.

Step 3: Embed the Form in Google Sites

Now that you have the HTML code, follow these steps to add it to your Google Sites page:

1. Open your site in the Google Sites editor
2. Navigate to the page where you want the contact form
3. In the right sidebar, click Insert (the panel with text, images, and other elements)
4. Scroll down and click Embed (the <> icon)
5. Select the Embed code tab
6. Paste the entire HTML code from Step 2 into the code box
7. Click Next to see a preview of your form
8. Click Insert to add it to the page
9. Resize the embed block by dragging its edges — a height of around 500-600 pixels works well for this form
10. Click Publish in the top right to make your changes live

That's it! Your contact form is now live on your Google Sites page.

Step 4: Test Your Form

Before sharing your site, test the form:

1. Visit your published Google Sites page
2. Fill in the name, email, and message fields
3. Click Send Message
4. Check your inbox for the submission email

If you do not receive the email, check the troubleshooting section below.

Customizing Your Form

Change the Color Scheme

To match your site's branding, update the CSS colors in the embedded code. The main values to change are:

Add More Fields

You can add any standard form fields. For example, to add a phone number field:

Prefix custom field names with $ so Static Forms includes them in the email notification.

Set a Custom Email Subject

Add a hidden field to set a fixed subject line for all submissions:

Or keep the visible subject field from the example above to let visitors choose their own subject.

Redirect to a Thank-You Page

If you prefer to redirect visitors after submission instead of showing an inline message, you can use a simple form POST approach instead. Replace the <form> tag and remove the JavaScript:

Create a separate "Thank You" page on your Google Site and use its URL as the redirectTo value.

Adding reCAPTCHA Spam Protection

For additional spam protection beyond the honeypot field, you can add Google reCAPTCHA. First, get your site key from the Google reCAPTCHA Admin Console, then configure your secret key in your Static Forms CAPTCHA settings.

Add the reCAPTCHA script and widget to your embedded HTML:

Then include the reCAPTCHA response in your JavaScript submission:

For a deeper dive, see our understanding reCAPTCHA guide.

Minimal Form Version

If you want the smallest possible form with no extra styling, here is a stripped-down version you can embed:

This version uses a standard form POST, so the page will redirect to a Static Forms confirmation page after submission. It is a good choice if you want something quick and simple.

Troubleshooting Common Issues

Form Does Not Appear on the Page

• ✅ Make sure you used the Embed code tab, not the By URL tab
• ✅ Check that you pasted the complete HTML including the <html>, <head>, and <body> tags
• ✅ Resize the embed block by dragging its edges — the default size may be too small to display the full form

Not Receiving Email Notifications

• ✅ Verify your API key is correct — copy it again from the dashboard
• ✅ Check your spam or junk folder
• ✅ Confirm your email address is verified in Static Forms
• ✅ Test with a different email address

Form Submits but Shows an Error

• ✅ Open your browser's developer tools (F12) and check the Console tab for errors
• ✅ Make sure the API endpoint is correct: https://api.staticforms.dev/submit
• ✅ Verify the Content-Type header is set to application/json when using JavaScript submission

Embed Block Is Too Small

Google Sites embed blocks have a default size that may cut off your form. To fix this:

1. Click on the embed block in the editor
2. Drag the bottom edge to increase the height
3. A height of 500-600 pixels is usually enough for a standard contact form
4. Publish your site again to see the updated size

Best Practices

1. Keep it short — only ask for the information you actually need. Name, email, and message are usually enough.
2. Use the honeypot field — it is a simple, invisible spam protection that does not inconvenience your visitors
3. Test before publishing — always submit a test message to confirm everything works
4. Check mobile layout — visit your published site on a phone to make sure the form is readable and usable
5. Use a clear call to action — tell visitors what will happen when they submit the form

Conclusion

Adding a contact form to Google Sites does not require any backend code or complex setup. With Static Forms, you can embed a fully functional, professional-looking contact form in just a few minutes. Your visitors get a smooth experience, and you receive submissions directly in your inbox with built-in spam protection.

Ready to add a contact form to your Google Sites website? Sign up for Static Forms and get started with 500 free submissions per month.

For more integration guides, check out our tutorials for GitHub Pages, Astro, and Next.js.