search

dwyl / learn-to-send-email-via-google-script-html-no-server

:email: An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
GNU General Public License v2.0
3.13k stars 911 forks source link
ajax email example form google-spreadsheet howto html-form no-server static-site tutorial

readme

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.

Why?

We needed a way of sending an email from a "static" HTML page when you don't (want to) have a server.

Key Advantages

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 https://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/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

Sign in to your Google account and click on "Make a copy..."

1-make-copy

This should give you something like this:

2-copy-of-sheet

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 Apps Script editor by clicking "Extensions" > "Apps Script"

2 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.

3-script-editor-showing-script

4. Save changes to your Script

After making any code changes, you must first save them in the editor using the save icon.

4-apps-script-save-code

5. Publish the Updated Script as a Web App

5-1-publish-button

:warning: Note: You must select the Anyone option for the 'Who has access' dropdown or form responses will not go through! :warning:

5-2-deploy-new-version

6. Authorize the Script to Send Emails

6-1-auth-required

Unless you verify your script with Google, you will need to click on "Advanced" and "Go to ... (unsafe)" to give this app permissions.

6-2-auth-failed-verification

6-3-allow-sending-emails

Copy the web app URL to your clip board / note pad. Then Click "OK".

6-4-deploy-as-web-app

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)

:warning: If you're already trying to use your own form by this step rather than the example one in this repo:

Remember to change the Form action URL to the one you copied in the previous step:

7-html-form

8. Open the HTML Form (page) in your Browser

Fill in some sample data in the HTML Form:

html form

Submit the form. You should see a confirmation that it was sent: form sent

9. Check the email inbox for the address you set

Open the inbox for the email address you set in Step 3 (above)

email received

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.

Download the following Javascript file and update your index.html to point to it at the end of your file (*before the closing </body> tag)

<script data-cfasync="false" type="text/javascript" src="https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/raw/master/form-submission-handler.js"></script>

Warning: If you did not set the TO_ADDRESS variable in Step 3, then you need to include a data-email="example@email.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 <form> and </form> tags:

<div style="display:none" class="thankyou_message">
 <!-- You can customize the thankyou message by editing the code below -->
 <h2><em>Thanks</em> for contacting us! We will get back to you soon!
 </h2>
</div>

This will now display a "Thank You" message when the form is submitted:

thankyou message

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: https://purecss.io/start/ because its light weight (4.0KB minified and gzipped) and solves our current "problem": Making it Look Good.

PureCSS-Logo-Intro

PureCSS-module-sizes

Without spending too much time on this, we can make the form look a lot nicer:

contact form with pure css

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 <h4> and the value as a <div>. This is a fairly basic, and foolproof view for the data.

You should get something that looks roughly like: Nicely formatted email

Bear in mind that this is a work in progress and does potentially open you up to getting more than you bargained for in the email. Because the email content is now looping over all the data sent in the form, if a robot or malicious user decides to POST more than you've asked for, you'll likely get it in your inbox. Use with caution for now. We're investigating improvements.

You can modify this though, via the script editor. The line:

result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";

has all you need. You can adjust the markup to suit you. We chose an <h4> because it was the best size for the email, and added the small amount of CSS to it to fix the capitalisation (the keys are all lower case in the JS object) and a bit of default spacing. While inline styles like this are generally bad practice on normal web pages, for email HTML they're about the only reliable way to do CSS! We went with a <div> for the value part, because it could be anything - single-line, multiline (a <p> for example wouldn't cut it).

While we're here, there's also a replyTo option for the sendEmail() method which is commented out by default:

MailApp.sendEmail({
  to: TO_ADDRESS,
  subject: "Contact form submitted",
  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
  htmlBody: formatMailBody(mailData)
});

You can uncomment that if you want to add a reply-to field to your email. The example in the script will set the reply-to as the email submitted in the form.

Google's documentation provides more information about MailApp.sendEmail (for example cc/bcc etc.) if you're interested: https://developers.google.com/apps-script/reference/mail/mail-app

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. Also, as noted above, Google has limits on how many emails you can send in a day, so storing the data into a spreadsheet is safer and less prone to data loss.

14. Add the record_data Function to your Google Apps Script

record_data example

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.

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

submit the form

17 Confirm the Data was Inserted into the Spreadsheet

17-confirm-data-inserted

Live Server (on your localhost)

Because we are loading external .js files, our web browser will not allow us to simply open the index.html from a local directory for testing out the form.

Open your terminal and run this command to install the node modules and start the live server:

npm install live-server --save-dev && node_modules/.bin/live-server --port=8000

It will take a minute to install, but once that's done your live-server will start up.

That starts a node.js HTTP server on port 8000 and opens the form you just created in your default browser. If you wish to update the form styles in style.css or the client-side Javascript in form-submission-handler.js, please be sure to edit index.html to load those resources locally rather than via GitHub.

Note: This is a light taste of Node.js for absolute beginners. You do not need node.js to "deploy" this form, you can run it on an any web server that serves HTML/CSS/JavaScript. If you have never used Node.js before, see: http://nodeguide.com/beginner.html but for the purposes of this exercise (submitting a form without a server) you don't need node.js or live-server it's just a nice thing to have when you are creating your form because it automatically re-loads the page when you make changes in your text editor!

Want more?

If you want us to take this tutorial further, please let us know!

For your convenience, we have hosted a working demo of the field on GitHub Pages, check it out to see the code and how it works: https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/

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.

We also created a form, test.html, which uses all kinds of form input elements so you can just copy and paste elements as desired into your own form. Just be sure to update their names and IDs. You can find a working example of this test form here: https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/test.html

Remember to include the fields inside the form that has the class 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: new-field-contains-data

Let us know if you have any questions!

Uploading Files

This resource may help you get started on uploading files to Google Drive from the Google Script.

Frequently Asked Questions (FAQ's)

  1. How can I get help using this tutorial?
  1. Can I get edit access to the example spreadsheet?
  1. Why is the webpage forwarding to a bunch of text when I hit submit?
  1. Why is the webpage not successfully submitting the form?
  1. The webpage is saying my data was submitted, but why isn't my data being saved or sent to me?
  1. How do I change the emails this script sends?
  1. Is this secure? Can I use it for sensitive data?
  1. What if my data is sent or stored in the wrong order?

Background Reading