Summary

This solution uses Google Forms and a tiny bit of scripting. The end result is a form that will be neatly embedded in your website that will send an email notification, to any email address (or addresses) you desire, when the form has been filled in and submitted. This solution is very versatile and can be applied to numerous use cases, for instance it could be any website not just a WordPress site and it could be any type of form. The JavaScript is very straight forward and can be easily customised to fit different needs.

Prerequisite

You will need a Google (Gmail) Account in order to follow these instructions. This Gmail account will not be visible to the user who submits the form but it is recommended you do not use your personal Gmail account and instead create a new one.

Instructions

Firstly you will need to create a Google Form.

Sign into the Google Account you intend to associate this form to.

Search for Google Forms in your search engine of choice.

Click on the default Contact form and edit as required, i.e. fields, theme etc.

It is recommended for the purposes of these instructions you create a contact form with the fields Name, Email, Website and Comment as these are the fields the script will look for. Once you understand the whole process you can customise the solution to fit your specific needs.

Once done go to the form settings (Gear icon).

The setting “Requires sign in” is set to limit to 1 response by default.

Remove this requirement or a nasty popup will appear on the contact page of your website requiring the sites visitors to log into Google to fill out the contact form.

(Obviously you can leave this restriction in place if that is the behavior you desire.)

At this point you can test the form.

Testing the Form

Go to the Send button and click it and this will bring up the various share options.

In this instance chose the second option, i.e. not the email option but the url (chain icon) option.

Copy the url and paste it into a new browser window, this will show you the form from a users perspective.

Fill in the form with mock data and submit it.

Return to the form editing page and you will see “1 Response” above the form input boxes.

Clicking on this button brings up the responses and response statistics.

At this point your form should be ready to use.

Form Submission Email Notifications

On the form editing page go to the More options (the three vertical dots) and among the options there will be the “Script Editor” option.

Click on it and the Script Editor window will appear.

Go to File > New > Script file and “Enter new file name” as “FormContact”.

Delete all of the text in the text editor window i.e. “function myFunction() {}”

Then copy and paste the text below into the editor window.

function onFormSubmit(e) {
	//If you run this script from the script editor it will throw an error as the code is not being passed values from an active form
	//To test this script you should have a Contact form prepared with the fields Name, Email, Website and Comment
    //You can then submit the Contact form after populating the fields
	//To run logged tests uncomment the code below that starts with "Logger.log", or simply submit forms and review the received emails
	//You can view the log by going to View > Stackdriver Loggins > Apps Script Dashboard	
  
//Email Address that will receive the notification
  var emailTarget = "c.kent@dailyplanet.com"
//To send notifications to multiple email addresses uncomment the line below and delete the line above
//var emailTarget = "c.kent@dailyplanet.com, b.wayne@waynecorp.com" 
  
//Capture the form input values as variables
  var frm = FormApp.getActiveForm().getItems();
  var nameGiven = e.response.getResponseForItem(frm[0]).getResponse();
  var emailAddress = e.response.getResponseForItem(frm[1]).getResponse();
  var websiteUrl = e.response.getResponseForItem(frm[2]).getResponse();
  var commentGiven = e.response.getResponseForItem(frm[3]).getResponse();
  
//Create the variable htmlPage that will store a basic HTML page including the style specifications for a simple HTML table
  var htmlPage = `
<!DOCTYPE html>
<html>
<head>
<style> table {
  font-family: arial, sans-serif;
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
}
table td {
  border: 1px solid black;
  padding: 10px;
}
</style>
</head>
<body>
`

//Add a HTML Table inside the htmlPage variable that will display the captured form values via email
  htmlPage += '<div><table>' 
  +'<tr><td>Name</td><td>' + nameGiven + '</td></tr>' 
  +'<tr><td>Email</td><td>' + emailAddress + '</td></tr>' 
  +'<tr><td>Website</td><td>' + websiteUrl + '</td></tr>' 
  +'<tr><td>Comment</td><td>' + commentGiven + '</td></tr>' 
  + '</table></div></body></html>'

  //Logger.log("Name: " + nameGiven + "Email Address: " + emailAddress + "Website: " + websiteUrl + "Comment: " + commentGiven);
  
//Send the notification email via the Gmail account to any email address provided as the first option    
   GmailApp.sendEmail(emailTarget, 'New Contact Form Submitted', '', {htmlBody: htmlPage});
}

That is all the JavaScript code needed to capture the form variable values and send them wrapped in a simple html table via email.

By default the code is set to send emails to “c.kent@dailyplanet.com” solely.

You will need to update this email address (keep the quotes!) to the email address you want to receive form emails or else you will really annoy Superman.

Similarly you can change “c.kent@dailyplanet.com, b.wayne@waynecorp.com” if you want multiple email address to receive form emails. Just put a comma between email addresses with either end of the string of email addresses wrapped in quotes.

All of the code is now in place but a trigger needs to be set up to run the JavaScript code.

Go to Edit and click on “Current Project’s triggers”.

Add a new Trigger.

For “Choose which function to run” choose “OnFormSubmit”.

For “Select event source” choose “from Form”.

For “Select event type” choose “On Form Submit”.

For “Failure notification settings” choose whatever frequency suits your use case.

Now when the form is submitted it will call the OnFormSubmit function which will run the JavaScript code you entered.

Now that you know how to set up a contact form and can see how the variable values are captured in the JavaScript code you probably now have a good understanding of how to edit both the form and code to fit your specific needs.

Keep in mind the form variable values are captured in order of appearance in the form.

Adding the Contact Form to the WordPress site

This next part covers specific instructions for adding the form to a WordPress site but if you have any web development experience you will see how easy this process is to incorporate into any website HTML page.

On the Google form editing page click the Send button.

For the send via options choose the third option, embedded HTML, symbolised as angled brackets < >.

Copy the code that appears below the send via options.

(If you just needed the form for a website then take that code and embed it into your website page and you are done. If you need the form for a WordPress site keep reading.)

Log into your WordPress site.

Under My Site go to Pages and then select the page you want to use the form in or create a new page.

In the body section of the page click on the plus (+) block to add a new block.

Search for HTML and choose Custom HTML.

Paste the code from the Google Form into the block.

You are done.

Conclusion

Now when you publish the page you will have a new contact form that will email new form submissions to email addresses of your choosing and it didn’t cost you a dime.

If you liked this post please leave a like and share.