You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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;](https://cloud.google.com/privacy/gdpr) 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](https://developers.google.com/apps-script/guides/services/quotas).
We recommend implementing this tutorial through Part 3, since the data will
Expand All
@@ -17,21 +23,21 @@ when you don't (*want* to) *have* a *server*.
### *Key Advantages*
+ No "*Backend*" to Deploy/Maintain/Pay for
+ ***Fully Customisabe*** - every aspect is customisable!
+ ***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
+ **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*,
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*!)
> 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*.
Expand All
@@ -54,9 +60,9 @@ it will not affect the outcome.
### 2. Open the Script Editor
Open the **Script editor...** by clicking "**Tools**" > "**Script editor...**"
Open the **Apps Script editor** by clicking "**Extensions**" > "**Apps Script**"
Here's a *snapshot* of the script you need (*at this point in the exercise*): [google-script-just-email.js](https://raw.githubusercontent.com/dwyl/learn-to-send-email-via-google-script-html-no-server/1d1c6727f69dec64a6b7f6bd6ff0dd72d0374210/google-script-just-email.js)
Expand All
@@ -79,39 +85,34 @@ receive the form's data when submitted.
:warning: 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! :warning:
:warning: Note: You *must* select the `Anyone` option for the 'Who has access' dropdown or form responses will not go through! :warning:
Unless you [verify your script with Google](https://developers.google.com/apps-script/guides/client-verification#requesting_verification), you will need to click on "Advanced" and "Go to ... (unsafe)" to give this app permissions.
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!
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:
Expand DownExpand Up
@@ -254,7 +255,7 @@ the data into a spreadsheet is safer and less prone to data loss.
This will record the data received from the `POST` as a *row* in the spreadsheet.
This will record the data received from the `POST` as a *row* in the spreadsheet.
See: [**google-apps-script.js**](google-apps-script.js) for the full code you can *copy-paste*.
### 15. Save a New Version and Re-Publish it
Expand DownExpand Up
@@ -338,35 +339,6 @@ e.g:
Let us know if you have any questions!
## SPAM prevention
In order to avoid getting spammed and fill up google apps usage quota, we will be implementing a simple SPAM prevention technique that's known as Honeypot where it essentially creates a hidden text field that if filled up is assumed as a spam bot and prevents the form from submit.
display: none; /*makes the field not visible to humans*/
}
```
```javascript
/* form-submission-handler.js */
/* remove the comment from this if statement */
if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted
return false;
}
```
## Uploading Files
Expand DownExpand Up
@@ -404,6 +376,9 @@ if (validateHuman(data.honeypot)) { //if form is filled, form will not be submi
- No. While data that is sent over POST may be more protected, the information could easily be intercepted by a third party or middleman, and Google has complete access to the data inside a Google Spreadsheet. Email is also not a very secure communication medium by default. We would recommend you invest in a secure platform and server for storing your data if this is a requirement.
8. _What if my data is sent or stored in the wrong order?_
- If your data is in the wrong order, it is recommended to verify that you are loading the clientside JS correctly. The most effective way to do this is to place a `debugger` call inside the `handleFormSubmit()` function, and, if it hits the debugger and opens the respective Dev Tools for the broswer/environment, then the clientside JS is being loaded correctly. If the debugger isn't hit, then the JS is **not** either not loaded or not targeting your form, defaulting the data to a plain object which will have its own alphabetic ordering instead.
## Background Reading
Expand All
@@ -412,5 +387,5 @@ if (validateHuman(data.honeypot)) { //if form is filled, form will not be submi
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.