How to send automated emails with Google Forms
How to send automated emails with Google Forms
And deliver an amazing customer experience way under budget without a new subscription!
Nothing is better from a customer experience perspective than when a customer knows you have received their request. The common way that companies will do this is by sending automated confirmation emails. For example, “We got your request, and someone from our staff will be with you in 24 hours.”
Great customer experience! The problem is to create that kind of experience usually requires a lot of different applications talking to each other, and if you are a solopreneur, non-profit, or you name the type of org without a huge IT budget, those tools and, therefore that customer experience would likely be out of reach.
However, with a little coding this same customer experience is possible with Google Forms!
Do you have an 💡?
If you have automation ideas you would like built, reach out to me for a free consultation!
Flow Chart
Show me the code!
The fun part about this project is I am going to be using this to track incoming project requests. So this will not be a hypothetical tutorial.
Create a Google Form
When I have a customer fill out the form, I want to know very basic questions. What is your name, email, and what is the project someone is looking to automate.
Remember the order of these questions because that will come into play later.
Open the Script Editor
If you have read prior posts opening the Script Editor is a little different than on Google Sheets, so take a look at the GIF below.
onFormSubmit(e)
The first function that we will declare is what is going to be called every time someone submits a form. Within this function, we will call three more functions.
function onFormSubmit(e){
try{
// 1. Get the form response from the event object
const [name, email, description] = getFormResponse(e);
// 2. Send the Customer an email confirmation
sendCustomerEmail(name, email);
// 3. Send Notification Email
sendNotificationEmail(name, email, description)
} catch{
console.log('Error with onFormSubmit')
}
}
getFormResponse
Within this function will be mapping through the Event Object (e) and returning an array of the responses from the form. We get the values from this function above by doing array destructuring.
/**
* This function will get the responses from the onFormSubmit event object
* @returns {any[]}
*/
function getFormResponse(e){
return e.response.getItemResponses().map(q => q.getResponse());
}
sendCustomerEmail(name, email)
Now that we have gotten the values from the form, now it is time to create and send an email to our customers. This is pretty complex because I am using an HTML document that I have also created as a template, and I am passing in values to customize it. Once we populate the template, we use MailApp to send the email to the customer.
/**
* Create & Send the Customer Email
* @param {String} name
* @param {String} email
*/
function sendCustomerEmail(name, email){
try{
// 1. Create the customer Email
let customerTemplate = HtmlService.createTemplateFromFile('Confirmation')
customerTemplate.request = {
"name": name
}
MailApp.sendEmail({
to: email,
subject: "📥 Consultation Request Confirmation",
htmlBody: customerTemplate.evaluate().getContent()
});
} catch{
console.log('Error in the sendCustomerEmail')
}
}
Confirmation Email Code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Thank you for submitting a Request </h3>
<p>Hello <?= request.name ?>,</p>
<p>I will take a look at this request in the next 24 hours and get back to you!</p>
<p>Michael Huskey</p>
<p>huskdoes@gmail.com</p>
</body>
</html>sendNotificationEmail(name, email, description)
Now that we have sent the customer a notification email that we received their request I want to get a notification email so that I am alerted that I have a potential customer who filled out a form. To be a little fancy I also want a link to the automated email I sent to the customer so that I can reply to the customer within the same thread. I also use the same thing I did in the last function and that is populating a template HTML for the body of the email.
function sendNotificationEmail(name, email, description){
try{
// 1. Get the message ID of the most recent message sent to this email
const messageID = getMessageID(email);
// 2. Build out notification email template
let notificationTemplate = HtmlService.createTemplateFromFile('Notification')
notificationTemplate.request = {
"link": `https://mail.google.com/mail/u/0/#inbox/${messageID}`,
"email": email,
"description": description,
"name": name
}
// 3. Send Email to my account with a link to the most recent sent message
MailApp.sendEmail({
to: 'huskdoes@gmail.com',
subject: "📥 Consultation Request Notification",
htmlBody: notificationTemplate.evaluate().getContent()
});
} catch{
console.log('Error with sendNotificationEamil')
}
}Notification Email Template
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Project Description</h3>
<p><?= request.description ?></p>
<p>
Customer Name: <?= request.name ?>
</p>
<p>
Email: <?= request.email ?>
</p>
<p>Link to email <?= request.link ?></p>
</body>
</html>Add a Trigger
Within the Apps Script Editor on the left side you will see an icon that looks like a stopwatch. If you click that you will be able to create Triggers, which are instructions for App Script to automatically run functions based on your parameters. For this project you are going to want to run onFormSubmit, you guessed it, on a Form Submit.
Do you have an 💡?
If you have automation ideas you would like built, reach out to me for a free consultation!
Conclusion
If you are a novice developer, don’t feel bad if this tutorial was overwhelming it is an advanced tutorial combining many concepts. I hope it inspires you to continue learning; there is more where that came from. If you are an advanced developer looking to extend your current capabilities, I hope this scratched that itch.
If you want the code for this project so you can customize it for your own project take a look at my GitHub page for this project.