How do I send an HTML Form in an Email .. not just MAILTO

by

> 2021 Answer = Easy Way using GMail (5 Mins)

We had a similar challenge to solve yesterday, and we solved it using a Google Apps Script!

Send Email From an HTML Form Without a Backend (Server) via Google!

The solution takes 5 mins to implement and I’ve documented with step-by-step instructions: https://github.com/nelsonic/html-form-send-email-via-google-script-without-server

Brief Overview

A. Using the sample script, deploy a Google App Script

Deploy the sample script as a Google Spreadsheet APP Script:
google-script-just-email.js

3-script-editor-showing-script

remember to set the TO_ADDRESS in the script to where ever you want the emails to be sent.
and copy the APP URL so you can use it in the next step when you publish the script.

B. Create your HTML Form and Set the action to the App URL

Using the sample html file:
index.html
create a basic form.

7-html-form

remember to paste your APP URL into the form action in the HTML form.

C. Test the HTML Form in your Browser

Open the HTML Form in your Browser, Input some data & submit it!

html form

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

Open the inbox for the email address you set (above)

email received

Done.

Everything about this is customisable, you can easily
style/theme the form with your favourite CSS Library
and Store the submitted data in a Google Spreadsheet
for quick analysis.
The complete instructions are available on GitHub:
https://github.com/nelsonic/html-form-send-email-via-google-script-without-server

More Related Contents:

  1. Two submit buttons in one form
  2. What is the boundary in multipart/form-data?
  3. Disabled form inputs do not appear in the request
  4. Submitting a form by pressing enter without a submit button
  5. How to align checkboxes and their labels consistently cross-browsers
  6. Using PUT method in HTML form
  7. What’s the proper value for a checked attribute of an HTML checkbox?
  8. Clear all fields in a form upon going back with browser back button
  9. Input Type image submit form value?
  10. Multiple radio button groups in one form
  11. Use a normal link to submit a form
  12. how to POST/Submit an Input Checkbox that is disabled?
  13. HTML Form: Select-Option vs Datalist-Option
  14. Pre-Populate HTML form file input
  15. Disable spell-checking on HTML textfields
  16. Why does file upload not work without the enctype property?
  17. If an HTML form has two buttons, how do I know which got clicked?
  18. HTML Submit-button: Different value / button-text?
  19. How to clear a form?
  20. What does “for” attribute do in an HTML tag?
  21. What characters are allowed in the HTML Name attribute inside input tag?
  22. Is there a valid way to disable autocomplete in a HTML form?
  23. How do I make a field required in HTML?
  24. Upload a whole directory through an HTML form
  25. Submit HTML form in a new tab
  26. POST vs post, GET vs get
  27. What’s the point of having hidden input in HTML? What are common uses for this?
  28. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  29. button image as form input submit button?
  30. Can I nest form tags in other form tags?

Leave a Comment