Want a professional-looking contact form on your Google Site that sends you an instant email every time someone reaches out? Google Forms, combined with a little Google Apps Script magic, is the perfect solution!
This tutorial will guide you through setting up a stylish contact form and getting immediate email notifications when it's submitted. We'll cover how to make your form match your site's design and how to embed it seamlessly into your Google Sites webpage.
A Google Account
A Google Site (published or in draft)
A Google Form (we'll create or adapt one as a contact form)
About 15-20 minutes of your time
First, let's make sure your Google Form is ready to serve as a contact form.
Go to forms.google.com and create a new blank form or open an existing one you want to use. (Contact us if you want to copy one of ours)
Add relevant questions for a contact form, such as:
"Your Name" (Short answer)
"Your Email" (Short answer, you can enable "Data validation" to ensure it's an email address)
"Subject" (Short answer or Dropdown if you have common topics)
"Your Message" (Paragraph)
You can also add a simple "Are you a robot?" checkbox (Multiple choice) for basic spam prevention.
To make your contact form feel like a natural part of your Google Site, you can customise its look.
In your Google Form, click the "Customise theme" icon (looks like a painter's palette) in the top right.
Here you can:
Choose a Header image: Upload an image that matches your site's branding.
Select Theme colour: Pick a colour that aligns with your Google Site's primary or accent colours.
Choose Background colour: Select a background colour that complements your site.
Select Font style: Pick a font that is similar to what you use on your Google Site.
By matching these elements, your embedded form will blend in much better!
Now, let's get into the automation part!
From your Google Form, click on the three vertical dots (More) in the top right corner.
From the dropdown menu, select "Script editor."
This will open a new tab in your web browser, taking you to the Google Apps Script editor.
When the Script editor opens, you'll see a default file named Code.gs (or similar) with some empty function.
Delete any existing code in the Code.gs file.
Copy all the code below and paste it into your Code.gs file, replacing anything that was there.
// Restrict the script's authorization to the form it is bound to.
//@OnlyCurrentDoc
// This is the first function we'll run manually, just once.
// Its job is to set up an "event listener" or "trigger"
// that waits for the form to be submitted.
function createFormSubmitTrigger() {
// Get the current Google Form that this script is attached to.
var form = FormApp.getActiveForm();
// Check if a trigger for this script already exists.
// This prevents us from accidentally creating multiple triggers
// which would send multiple emails for each submission.
var currentTriggers = ScriptApp.getProjectTriggers();
if(currentTriggers.length > 0)
return; // If a trigger exists, stop here.
// Create a new trigger:
// - "onFormSubmit" is the name of the function to run when the trigger fires.
// - "forForm(form)" specifies that this trigger is for *this* particular Google Form.
// - "onFormSubmit()" tells the trigger to activate specifically when the form is submitted.
// - ".create()" makes the trigger active.
ScriptApp.newTrigger("onFormSubmit").forForm(form).onFormSubmit().create();
}
// This function is the main worker!
// It's automatically called by the trigger *every time* someone submits the form.
// The 'e' parameter is super important – it's an "event object" that
// contains all the information about the form submission.
function onFormSubmit(e) {
// From the 'e' (event) object, we grab the specific response that was just submitted.
var formResponse = e.response;
// A form response is made up of multiple "item responses" – one for each question.
// This line gets all of those individual question-and-answer pairs.
var itemResponses = formResponse.getItemResponses();
// We start building the email's content (HTML for nice formatting).
// The '<br>' tags are HTML for a line break, like pressing Enter.
var emailBodyHtml = "You've received a new contact form submission from your Google Site:\n\n";
// Now, we go through each question and its answer from the submission.
itemResponses.forEach(function(itemResponse) {
// Get the actual question text (e.g., "What is your name?").
var title = itemResponse.getItem().getTitle();
// Get the answer the user provided for that question.
var response = itemResponse.getResponse();
// Add the question (in bold using <b> tags) and its answer to our email body.
emailBodyHtml += "<b>" + title + "</b><br>" + response + "<br><br>";
});
// Finally, we call another function to send the email with the HTML content we just built.
sendEmailHtml(emailBodyHtml);
}
// This function is responsible for actually sending the email.
function sendEmailHtml(htmlBody) {
// MailApp.sendEmail is a built-in Apps Script service for sending emails.
// We pass it an object with several properties:
// - 'to': The email address(es) where the notification should be sent.
// - 'subject': The subject line of the email.
// - 'htmlBody': The content of the email, interpreted as HTML.
MailApp.sendEmail({
to: "your-email@example.com", // <-- IMPORTANT: CHANGE THIS EMAIL ADDRESS!
subject: "New Contact Form Submission from Your Google Site!",
htmlBody: htmlBody // This is the HTML content generated by onFormSubmit
});
}
In the sendEmailHtml function (near the bottom of the code), you'll see this line:
to: "your-email@example.com", // <-- IMPORTANT: CHANGE THIS EMAIL ADDRESS!
Replace "your-email@example.com" with the actual email address where you want to receive the contact form notifications. Make sure to keep the quotation marks!
Click the floppy disk icon (Save project) in the Apps Script editor toolbar.
You'll be prompted to name your project. Give it a descriptive name, like Google Sites Contact Form Notifier or My Website Emailer.
Click "Rename."
This is a crucial step! You need to run a specific function once to set up the automatic trigger and authorize your script to send emails on your behalf.
In the Apps Script editor, look for the dropdown menu right next to the "Debug" icon (looks like a bug). It will probably say createFormSubmitTrigger. If not, click it and select createFormSubmitTrigger.
Click the "Run" button (looks like a play arrow ▶️).
Review Permissions: The first time you run a script that accesses Google services (like sending emails), Google will ask you to review permissions.
Click "Review permissions."
Select the Google Account you want to use.
You'll see a warning that "Google hasn't verified this app." This is normal for a script you've written yourself. Click "Go to [Your Project Name] (unsafe)".
Review the permissions requested (e.g., "Send email as you," "See, edit, create, and delete all your Google Forms files"). Click "Allow."
Once you click "Allow," the createFormSubmitTrigger() function will run and set up the trigger. You'll see "Execution completed" at the bottom of the editor.
Finally, test the entire setup!
Go to your published Google Site and navigate to the page where you embedded the contact form.
Fill out the form with some test information (using different test data each time is good).
Submit the form.
Check the email address you specified in your Apps Script (your-email@example.com). You should receive a new email notification with the submitted contact details, and the questions will be in bold!
Now that your form is styled and ready to send emails, let's put it on your Google Site!
Get the Form's Embed Code:
Go back to your Google Form.
Click the "Send" button in the top right corner.
In the "Send form" dialog box, click the < > (Embed HTML) icon.
You'll see a section with "Embed HTML" and options for "Width" and "Height". You can adjust these if you like, but often leaving them as default or setting width to 100% works well for responsiveness.
Click "Copy" to copy the entire HTML embed code.
(Image suggestion: Screenshot of Google Form "Send" dialog with embed HTML tab and copy button highlighted)
Open Your Google Site: Go to sites.google.com and open the Google Site where you want to add the contact form. Navigate to the specific page (e.g., your "Contact Us" page) where the form will go.
Embed the Form on Your Page:
In the Google Sites editor (the right-hand sidebar), click on "Embed."
Select "Embed code."
Paste the HTML embed code you copied from Google Forms into the box.
Click "Next."
You'll see a preview of your form. Click "Insert."
Adjust and Publish: Your form will now appear on your Google Sites page. You can drag to resize it within the Google Sites editor to make it fit perfectly. Once you're happy with its placement and size, "Publish" your Google Site to make the changes live.
You're all set! Now you have a professional, functional, and email-notifying contact form seamlessly integrated into your Google Site. Happy connecting!
Need help with this? Check our Add-on services for fast, effective help.