Send Email from a Static HTML Form using Google Apps Mail!
Language : English | 한국어 | Español | Português
A Step-by-Step Example of using an HTML Form to send a “Contact Us” Message via Email without a Backend Server using a Google Script – No PHP, Python, Ruby, Java, Node.js etc.
See a working example here: https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/
Note: With EU’s GDPR, we strongly advise researching recommendations on user privacy; you may be held responsible for the safekeeping of users’ personal data and should provide them a way to contact you.
Warning: Google’s API has limits on how many emails it can send in a day.
This may vary on your Google account, see the limits here.
We recommend implementing this tutorial through Part 3, since the data will
always be added to the spreadsheet first, then emailed if possible.
We needed a way of sending an email from a “static” HTML page
when you don’t (want to) have a server.
No “Backend” to Deploy/Maintain/Pay for
Fully Customisable – every aspect is customisable!
Email sent via Google Mail which is Whitelisted Everywhere (high deliverability success)
Collect/Store any form data in a Spreadsheet for easy viewing
(perfect if you need to share it with non-technical people)
Instead of using a server to send your email,
which is easy but requires maintenance,
use Google to send mail on your behalf
and use Google Spreadsheets to keep track of the data!
You could use a “free” service like http://formspree.io/ to process your form submissions
if you don’t care where you are sending your data and want to manage the data submitted
in your email inbox (messy … yuck!)
Or… you can invest a few minutes and keep data private/manageable.
Take your pick.
1. Make a Copy of the Sample Spreadsheet
Sign in to your Google account and click on “Make a copy…”
This should give you something like this:
Note: Feel free to change the name of the Copy to anything you want,
it will not affect the outcome.
2. Open the Script Editor
Open the Script editor… by clicking “Tools” > “Script editor…”
Here’s a snapshot of the script you need (at this point in the exercise): google-script-just-email.js
3. Set the TO_ADDRESS in the Script
Warning: If you do not uncomment and set your email as the value of
TO_ADDRESS, it is possible for someone who has web skills to alter your form
and send emailed data to an arbitrary email address.
This risk may not be very likely. Instead, if you wish, you can leave this
variable commented out if you accept this possible risk but want the added
convenience of setting this email variable inside your HTML form as a
data-email attribute. This allows you to easily change where to send emails
inside your HTML form without going back through steps 2-6. This functionality
does require you to use the provided JS file in Part Two, Step 10.
If you do not want to accept that potential risk, please uncomment the code for
the variable TO_ADDRESS, and set this value equal to the email which should
receive the form’s data when submitted.
4. Save a New Version of your Script
It’s not immediately obvious but you have to click on “Manage Versions…”
Then create your new version:
5. Publish the Updated Script as a Web App
Select the latest project version to deploy.
⚠️ Note: You must select the Anyone, even anonymous option for the ‘Who has access to the app’ dropdown or form responses will not be added to the spreadsheet! ⚠️
6. Authorize the Script to Send Emails
Unless you verify your script with Google, you will need to click on “Advanced” and “Go to … (unsafe)” to give this app permissions.
Copy the web app URL to your clip board / note pad.
Then Click “OK”.
7. Create your basic HTML Form
Using the template in index.html in this repo,
create your own html file with the basic form. (save the file)
⚠️ If you’re already trying to use your own form by this step rather than the example one in this repo:
Each of your form elements must have a name attribute equal to that of your column name in the Google sheet
The form’s class must be gform, i.e.
Warning: If you did not set the TO_ADDRESS variable in Step 3, then
you need to include a data-email=”[email protected]net” attribute inside the
main form element. See the example form for more details. Otherwise, if you did
set this variable, then you do not need this form attribute.
This keeps the person on the same page. No refresh. Next step is making a thank you message appear.
11. Add a customised Thank You Message Shown when Form Submitted
After following step 10, you can choose to add a thank you message after submitting. Add the following code between the
This will now display a “Thank You” message when the form is submitted:
Tailor your message by editing the thankyou_message div.
12. Use CSS to Make the Form Look Good
For this example we are using Pure CSS: http://purecss.io/start/
because its light weight (4.0KB minified and gzipped)
and solves our current “problem”: Making it Look Good.
Without spending too much time on this, we can make the form look
a lot nicer:
13. Make the email look good too!
By default, the sent email’s body contains the key-value pairs from the form, with the key as an