Send Email from a Static HTML Form using Google Apps Mail!
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.
Why?
We needed a way of sending an email from from a "static" HTML page when you don't (want to) have a server.
Key Advantages
- No "Backend" to Deploy/Maintain/Pay for
- Fully Customisabe - 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)
What?
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.
How?
1. Make a Copy of the Sample Spreadsheet
Sample: https://docs.google.com/spreadsheets/d/1UZdTuBtfmr-p0yQL6pwL5IrIWLsNLRX05Q-qP6nFu8U/
In Google Sheets, Click "File" > "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
TO_ADDRESS
in the Script
3. Set the In the editor window you should expect to see:
Change the value of the TO_ADDRESS
to which ever email you want to receive
the contact form message.
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:
6. Authorize the Script to Send Emails
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)
Remember to change the Form
action
URL to the one you copied in the previous step:
8. Open the HTML Form (page) in your Browser
Fill in some sample data in the HTML Form:
Submit the form. You should see a confirmation that it was sent:
9. Check the email inbox for the address you set
Open the inbox for the email address you set in Step 3 (above)
Done. That's it. You just created an HTML form that sends email!
Part Two - Make It Look Good ...
We are going to keep this Super Lean by using PURE CSS
for our Style (fix the "ugly" HTML Form in step 8).
And submit
the form using JQuery "AJAX" to keep the person
on your page/site (avoid "ugly" response page)
10. Submit the Form using JavaScript "AJAX"
To prevent the page from changing to the JSON
response/result
we need to submit the form using AJAX.
Update your index.html
to include the following JavaScript file at the end of your file
(*before the closing </body>
tag)
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
This will now display a "Thank You" message when the form is submitted:
Keeps the person on the same page. No refresh.
11. Customise the Message Shown when Form Submitted
Taylor 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:
Part Three - Store Submitted Contact Form Data in a Spreadsheet
Sending the form data directly to your email inbox is a good first step, but we can do better.
record_data
Function to your Google Apps Script
13. Add the
This will record the data received from the POST
as a row in the spreadsheet.
See: google-apps-script.js for the full code you can copy-paste.
14. Run the Setup Script
The Setup Script gets the Name of your associated Google Spreadsheet so it knows where to put the data...
15. Save a New Version and Re-Publish it
Follow Steps 4, 5 & 6 to save a new version and re-publish the script.
16. Re-Test Submitting the Form
17 Confirm the Data was Inserted into the Spreadsheet
Want more?
If you want us to take this tutorial further, please let us know!
Add your own fields!
In response to Henry Beary's request we made the form handler generic which means you can now add any fields you want to the form.
remember to include the fields inside the form that has the id gform
and ensure that the name
of the form element matches the new column heading in your spreadsheet.
e.g:
<fieldset class="pure-group">
<label for="color">Favourite Color: </label>
<input id="color" name="color" placeholder="green" />
</fieldset>
This will allow you to capture the person's favourite color: e.g:
Let us know if you have any questions!
Background Reading
- Google Apps Scripts Basics: https://developers.google.com/apps-script/articles
- Logger (like console.log): https://developers.google.com/apps-script/reference/base/logger
- Simple Mail Merge using Google Spreadsheets: https://developers.google.com/apps-script/articles/mail_merge
- Original Tutorial: AJAX post to google spreadsheet: http://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet which points to: