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

3. Set the `TO_ADDRESS` in the Script

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 JQuery "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 JQuery library and jquery-ajax-form-handler.js at the end of your file (*before the closing </body> tag)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/nelsonic/html-form-send-email-via-google-script-without-server/master/jquery-ajax-form-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.

13. Add the `record_data` Function to your Google Apps Script

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:
- https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/

richardfrost/html-form-send-email-via-google-script-without-server