Google Script

Form Submit Triggers

 INSTRUCTOR:

LAURENCE SVEKIS
- Over 300 courses in technology and
web applications.
- 20 years of JavaScript web
programming experience
- 500,000+ students across multiple
platforms
- Digital instructor since 2002

READY TO HELP YOU LEARN and

ANSWER ANY questions you may
have.

Course instructor : Laurence Svekis

Create a Google Form
https://docs.google.com/form
s/u/0/
Add some questions for the
inputs
Connect a Google Spreadsheet
to collect the submissions
Create a Google Form
Open the new spreadsheet
Select Script editor from
the Tool menu
Give new script project name
Write Your Google Script
Google script is cloud based
JavaScript, which allows you
to run functions on the
server side. There are
built in methods in google
Script.
Write your code you want to
run wrap within a named function myFunction() {
Logger.log('works');
}
function. Run the code in
the editor.
Logger to see the values while you develop it
Select the view from the
menu view the log. This
will open a popup window
that will show you the
contents of your log.
Once you run the code you
will see the log as works
which is the message you function myFunction() {
Logger.log('works');
}
sent.
Setup Form Submit trigger
Time to capture the form
submission with a trigger.
Data submitted is contained
in the e object.
JSON.stringify will convert
it to readable text.
Select Current Project
Triggers opening the window. function onFormSubmit(e) {
Logger.log(JSON.stringify(e));
Logger.log(Session.getActiveUser().getEmail());
Add a new trigger - Accept }

permissions
Fill Out Form Try Trigger
Go to your form and fill it
out and submit.
Open the script editor and
view the logs. You should
have data there and also
your spreadsheet should have
content.
Event Object
More info on the event
object is here.
https://developers.google.co
m/apps-script/guides/trigger
s/events

[19-07-17 13:38:21:231 EDT] {"authMode":{},"values":["7/17/2019

13:38:20","example@gmail.com","laurence","svekis"],"namedValues":{"Last":["svekis"],"E
mail":["example@gmail.com"],"First":["laurence"],"Timestamp":["7/17/2019
13:38:20"]},"range":{"columnStart":1,"rowStart":5,"rowEnd":5,"columnEnd":4},"source":{
},"triggerUid":"1660426"}
Event Get values
You will see the named
values of the fields from
the form. They will also be
added to your spreadsheet
with field names as headers.
Use the logger to record
output to check if the
script works :) function onFormSubmit(e) {
Logger.log(JSON.stringify(e));
var formValues = e.namedValues;
Logger.log(formValues);
{Last=[svekis], Email=[example@gmail.com], First=[laurence], Timestamp=[7/17/2019
}
13:38:20]}
Send Email
https://developers.google.co
m/apps-script/reference/mail
/mail-app
You can send HTML emails and
even get images from the web
to place into your email.
Create new function to send
an email
function myEmailer() {
var comLogoBlob =
UrlFetchApp.fetch('http://www.discoveryvip.com/img/d.png').getBlob().setName("comLogo
Blob");
MailApp.sendEmail({
to: "gappscourses@gmail.com"
, subject: "Form Submission"
, htmlBody: "Guess what a new form submission has been completed<br>" + "Its
HTML so cool stuff you can do <img src='cid:companyLogo'>"
, inlineImages: {
}
companyLogo: comLogoBlob
});
}
Use object info create HTML
1. Duplicate the object from
the form.
2. Use Logger to ensure it
looks right.
3. Use JavaScript code to
iterate all obj contents.
4. Construct html to send in
email.
5. Add email function
6. Try it
function eTester() {
var e = {};
e.namedValues = {
'Last': 'svekis'
, 'Email': 'gappscourses@gmail.com'
, 'First': 'laurence'
, 'Timestamp': '7/17/2019 13:38:20'
};
var obj = e.namedValues;
Logger.log(e);
var html = '<h1>Form Data</h1>';
for (key in obj) {
Logger.log(key + ' ' + obj[key]);
};
html += '<div><b>' + key + '</b>: ' + obj[key] + '</div>';
MailApp.sendEmail("gappscourses@gmail.com", "Form Submission", "", {
htmlBody: html
, cc: "gappscourses@gmail.com"
}
});
Put it all together
Fill out the form and submit.
Go to Triggers and edit and
save as your code has changed
and permissions will need to
be added again.
https://script.google.com/hom
e/triggers
Your form should submit and
send the contents to the
email and yoru email as cc.
function onFormSubmit(e) {
Logger.log(JSON.stringify(e));
var obj = e.namedValues;
Logger.log(e);
var html = '<h1>Form Data</h1>';
for (key in obj) {
Logger.log(key + ' ' + obj[key]);
html += '<div><b>' + key + '</b>: ' + obj[key] + '</div>';
};
MailApp.sendEmail(obj['Email'], "Form Submission", "", {
htmlBody: html
, cc: "gappscourses@gmail.com"
});
}
Next Steps
You can add more advanced
functionality in your
onFormSubmit Function.
Tips:
● Use log to test
● Make sure permissions are
okay run the function and
resave the trigger on
changes.
function onFormSubmit(e) {
var html = '<h1>Form Data</h1>';
for (key in obj) {
};
html += '<div><b>' + key + '</b>: ' + obj[key] + '</div>';
MailApp.sendEmail(obj['Email'], "Form Submission", "", {
htmlBody: html
, cc: "gappscourses@gmail.com"
});
// Do more JavaScript code.
}
 Congratulations on completing the course!
Thank you for your support
Check out more about JavaScript at MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript

Find out more about my courses at http://discoveryvip.com/

Course instructor : Laurence Svekis -

providing online training to over
500,000 students across hundreds of
courses and many platforms.