Send Email from a Static HTML

This post discusses how to send an email without back-end/server side code.

There are many solutions available for sending an email. Here, I am explaining steps to sending an email from an HTML page using Google Apps mail.

1. Make a Copy of the Sample Spreadsheet

Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/

2. Open the Script Editor

Open the Script editor… by clicking “Tools” > “Script editor…”

3. Set the TO_ADDRESS in the Script

4. Save a New Version of Your Script

Goto File-> Manager Version option to set Version

5. Publish the Updated Script as a Web App

Goto menu Publish-> Deploy as Web app option to publish

Select the latest project version to deploy:

6. Authorize the Script to Send Emails

Click Continue to authorize this app:

Copy the web app URL to your clipboard / Notepad. Then click “OK”.

7. Create Your Basic HTML Form

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 like:

{"result":"success","data":"{\"color\":[\"\"],\"name\":[\"Rahul\"],
\"message\":[\"This is test \"],\"email\":[\"rahulgbhatia@live.com\"]}"}

Alternate solution: Use Ajax to submit the form

Hope this helps!

Background Reading

• https://advancecodingsolution.com/2017/04/29/send-email-from-a-static-html/
• 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/

CodeProject