How to create a contact form with Google form

6 min readDec 6, 2020

I recently switched to the Jekyll + Netlify combo to release static sites. Among the advantages of this approach:

easy to develop and flexible
super fast loading time
scalable architecture
reliable hosting
secure

Problem

Netlify allows you to create a working html contact form simply by using the tags you find in their documentation. I tried it in the free version and it is an excellent service. After about 100 contacts per month, it is automatically upgraded to a pay-as-you-go subscription. However, the customer is not always willing to pay monthly to receive emails from their site.

There are several third-party services for creating contact forms: https://www.formstack.com or https://www.jotform.com to name a few. These services have limits that can be unlocked by subscribing to a monthly subscription.

However, many customers do not have a user traffic that justifies these expenses, so I had to look for a smart and free solution. There would be many solutions, for example I could use PHPMailer and create my own email delivery service but to do this I have to upload the package to a server and then manage the service, which takes time and resources.

Solution

I therefore chose to use Google Form to create a questionnaire to be used as a contact form and Google Spreadsheet to store the answers and send an email to the administrator every time someone fills out the form on his site.

Creating a questionnaire

To create a contact form with Google Form the first thing to do is create a questionnaire at this link and click on Create a new empty form (you must have a google account):

Once the fields of our questionnaire have been defined, we can click on Answers, options menu with three dots at the top right and then on Select destination for the answer. This will allow us to save the answers on a Spreadsheet. A menu with two options will open, choose the first one and assign a name to the worksheet. Click on Create.

The worksheet has been created and linked to the questionnaire. To view it, go to the Answers tab again and click on the Google Spreadsheet icon.

Sending emails

What we need to do is notify the site administrator every time someone fills out the form on our site (see how to integrate it later). To do this we will use App Scripts, a scripting platform developed by Google.

From our answer spreadsheet, click on Tools → Script Editor

The script editor linked to that spreadsheet will open:

Our script consists of two components

Codice.gs — This is where the email is sent
form_html — This is where we format the email
I copy the code below, it is very simple: it is a question of taking the row that is activated when the sheet is updated with each new contact, and from that row take the data that we are interested in sending by email. Then we will use the MailApp class and the sendEmail method to send the mail. Here is the code, you can copy and paste it by changing the recipient’s email and the fields to be used.

function onFormSubmit(e) { var htmlBody = HtmlService.createTemplateFromFile('html_form'); var activerange = SpreadsheetApp.getActiveSheet().getActiveRange(); var row = activerange.getValues()[0]; htmlBody.name = row[1]; htmlBody.azienda = row[2]; htmlBody.mail = row[2]; htmlBody.servizio = row[3]; htmlBody.body = row[4]; var email_html = htmlBody.evaluate().getContent(); MailApp.sendEmail({to: "myemail@gmail.com",subject: "Nuovo contatto dal sito",htmlBody: email_html}) }

To create the email template, click on File → New → Html file and give it a name (remember that it must be the same as the name you pass to the htmlBody variable (line 2).

You can format the template as you wish, the dynamic fields of the mail must be written with the same names you used in the previous script and are those enclosed by the tags

= name ?>

Once the template is formatted, save and go to Codice.gs and click on the Play button: this will provide the necessary permissions for the script to send the email. Remember that if you make any changes you have to click the Play button again.

Creating an activator

Now connect to the Google App Scripts dashboard and select Activators from your project

From the Activators page, click the Add Activator button

Select from the menu Select the type of event, the item When sending the form and then click Save. You can leave the other settings as Default, but make sure they are like the ones you see on the screen.

Done. Now our contact form is configured. The most important part is missing, integrate it into our website.

How to transform the Google form into an html form

What needs to be done is to search in the html code of the questionnaire, the names of the fields and reproduce them in our html page, the process is quite simple but for convenience I recommend this really useful tool: you just need to copy the preview link of your form and the site will generate the code to copy / paste into your web page. You can see the preview of the form by clicking on the eye icon at the top right of your questionnaire. The preview link looks like this:

https://docs.google.com/forms/d/e/1FAIpQLSeaozKyLDOdh4FF_eCjXdhM3e_8LCfS3vs0PdpasrdOKYzVMQ/viewform

Once you have copied the preview link, paste it on this website and then click on Get the Html