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

Once its ready, we should add a link to the launch landing page post.

Would it be possible to have a form target a specific sheet inside the document for collecting the results.

Right now it is hard coded to go to the "responses" sheet. What if on a form you could have a hidden input that specified which tab the data was to go to? This way I could have one doc for collecting many types of data from many different forms without having to replicate the whole spreadsheet.

Hello,
I am new to this, so any help/direction would be appreciated. I have this script working with my website form. I am now trying to edit the script to allow for the email that is sent to be a little more readable. I am having issues pulling out the individual form elements. Here is an example of my edited code, from the master code line #13:
MailApp.sendEmail({to: TO_ADDRESS, subject: "New Message from CamillaFlynn.com", htmlBody: "Hello Friend,

You Have a new message from " + e["name"] + ". Here it is:
" + e["message"] + "

If you want to write back, here is their email address: " + e["email"]});

When I submit a new form, the email sends and the Google spreadsheet is updated properly (as I did not change that part of the code). However the email that is sent does not recognize my code e["message"] etc. For reference, my "id" and "name" elements in the form match what I am trying to call in the above code: "name", "message" and "email".

Here is an example of the email that I receive, as you can see, the form elements are noted as "undefined":
Hello Friend,

You Have a new message from undefined. Here it is:
undefined

If you want to write back, here is their email address: undefined

Can anyone give direction on how to properly pull out the form elements from the Form variable "e"? I have also tried using the format: e[0], e[1], e[2], but that also returned "undefined"

Thousands of thanks for the tutorial!

Is it possible to attach files and save them into google drive and pass link to the file in email?

make: https://github.com/dwyl/html-form-send-email-via-google-script-without-server/blob/22d963c3dcbcda9d3c7580b813c73387891d2e4d/form-submission-handler.js#L9-L11 general purpose.

Can we send an HTML email?

When submitting a checkbox, it always behaves as checked - ie the "value" attribute is sent

When I add the JS handler code, the data is no longer going to the google sheet. I do a thank you mssg but it no more goes to google sheet.

The Basic Version is _aite.
But can we make it _look good...?

http://purecss.io/

https://david-dm.org/dwyl/html-form-send-email-via-google-script-without-server#info=devDependencies&view=table

Hello guys,
It is most probably due to my lack of skills, but I'm not getting the form to work as described in the article on https://www.npmjs.com/package/html-form-send-email-via-google-script-without-server
First in step 1, the code included in the Sheet's script is much more than what step 2 mentions. No clue what to omit or keep.
Second in step 14, the file https://cdn.rawgit.com/nelsonic/html-form-send-email-via-google-script-without-server/master/jquery-ajax-form-handler.js gives a 404 error.

Two feature request:

1. is it possible to validate with all the new domain extension from http://data.iana.org/TLD/tlds-alpha-by-domain.txt ?
2. Is it possible to make the email that the script sends us to look better?

would it be helpful to upload a demo form to S3 for people to try?

Hi:
I installed your script according to your directions and it's working perfectly. Thank you very much for it.
I love it! Now I would like to style the out-going emails from the un-styled format in which they go out and are received now:

{"name":["Visitor"],"message":["Testing Google send mail script."],"email":["[email protected]"]}

Would you please post directions on where and how to do this?

Thanks,

Billy Joe

Hello,

I created a spreadsheet yesterday as instructed (by making a copy) and updated the email ID on the script of the new sheet. It was working fine and I tested it with some dummy entries using a form in my test website.

However, it stopped updating itself since today morning and 'Run'ing and Managing Version of the script did not help. I can vouch that I did not make any change in between.

The email functionality, though, is working normally.

Can you please help me with this?

My script.gs

/******************************************************************************
 * This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey  *
 * But has been simplified and cleaned up to make it more beginner friendly   *
 * All credit still goes to Martin and any issues/complaints/questions to me. *
 ******************************************************************************/

var TO_ADDRESS = "[email protected]"; // confirmation email will be sent to this ID

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
                      JSON.stringify(e.parameters));
    record_data(e);
    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/

/**
 * select the sheet
 */
function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet   = doc.getSheetByName('responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

The screenshot of the last entries of the spreadsheet is given below:
(some entries are being made by someone in the stackoverflow community after I asked for help in solving a particular scenario with my code in codepen.)

No JS in the Form

Can we build a generic form handler that can submit any type of input/data to google?
relates to #17

I have followed the instructions but when I test the form and press "Submit" I get this on the browser:

{"result":"success","data":"{}"}

And this in the Email:

{}

This is what I entered in the form:

Name: test 123
Email: [email protected]
Message: this is a test message

Here is the form HTML:

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content modal-popup">
            <a href="#" class="close-link"><i class="icon_close_alt2"></i></a>
            <h3 class="white">Contact Techpubs</h3>
            <form action="https://script.google.com/macros/s/AKfycbwedovtuJ5dGWLH4agdQcjxsqWJaOz92KPZmiQxAlGIt3Ik7Ds/exec" method="POST" class="popup-form">
                <input type="text" class="form-control form-white" placeholder="Full Name">
                <input type="text" class="form-control form-white" placeholder="Email Address">
                <!--<input type="textarea" class="form-control form-white" placeholder="How can we help you?"> -->
                <textarea class="form-control form-white" rows="3" placeholder="How can we help you?"></textarea>

                <button type="submit" class="btn btn-submit">Submit</button>
            </form>
        </div>
    </div>
</div>

And here is the script.gs:

/******************************************************************************

• This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey *
• But has been simplified and cleaned up to make it more beginner friendly *
• All credit still goes to Martin and any issues/complaints/questions to me. *
  ******************************************************************************/

var TO_ADDRESS = "[email protected]"; // change this ...

function doPost(e) {

try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
JSON.stringify(e.parameters));
record_data(e);
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
}
}

// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/

/**

• select the sheet
  */
  function setup() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  SCRIPT_PROP.setProperty("key", doc.getId());
  }

/**

• record_data inserts the data received from the html form submission
• e is the data received from the POST
  */
  function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
  var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
  var sheet = doc.getSheetByName('responses'); // select the responses sheet
  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  var nextRow = sheet.getLastRow()+1; // get next row
  var row = [ new Date() ]; // first element in the row should always be a timestamp
  // loop through the header columns
  for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
  if(headers[i].length > 0) {
  row.push(e.parameter[headers[i]]); // add data to row
  }
  }
  // more efficient to set values as [][] array than individually
  sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
  Logger.log(e);
  }
  finally {
  return;
  }

}

Appreciate any assistance you can give! Thanks!

Hey,
First of all, thanks for the great work.
Is there a way to send the email to various email addresses (get an email address from a form and pass it through to the app to impact the TO_ADDRESS variable ?).
Thanks for your help!

Hello,

The instruction for setting up this script is very elaborate and I need you to congratulate on that.

At one point however, either I'm unable to understand the instruction or I'm doing it wrong, when a user submits the form, a blank page is being displayed. However the data is being correctly entered into the spreadsheet.

I wanted that after a user submits the form a thank you message is displayed in the same page below the form (and the form resets itself). Can you please guide me as to how can I implement the same using your code?

Thanks and Regards
AB

Received this by email.

Prefer to discuss feature ideas/request on GitHub...

Love this repo!! Awesome, awesome work - > thank you !!

1 - Got everything working great except for multiple radio options. If I choose 2 radio options, it only enters one of the options in my Google Sheet. Any idea how to fix it?

2 - not super important, but is there a way I can edit the email that is sent to me upon the form being submitted? I'd like to clean it up a bit . . . thanks !

It would be excellent to have a simple form demo with a variety of different fields showcasing the variety we now support. It could be hosted on a web playground site like jsfiddle or codepen, at least till we build up the examples to be more robust? We would just need someone to maintain the spreadsheet on Google Drive for it.

We could also mention it in the documentation as an advanced/next step for others.

Sending the form data straight to an email inbox is nice...
but what if we could store it in a Spreadsheet for easy viewing...?

Should we thank people for submitting the contact form and establish a contact point immediately?

My script.gs is

var TO_ADDRESS = "[email protected]";

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
                      JSON.stringify(e.parameters));
    record_data(e);
    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/

/**
 * select the sheet
 */
function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet   = doc.getSheetByName('responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

and custom html form code is

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form action="https://script.google.com/macros/s/AKfycbxl4FQgZZi6H6ASxfjxoP6DxLOKbn9LKB7gmu6x1RvzrEuK7f0/exec/" method="POST" autocomplete="on"><br><br>
                  <form action="action_page.php">
                     <span style="display:inline-block; width:50px;"></span><input type="text" name="fname" placeholder="First name" maxlength="10" required><br><br>
                     <span style="display:inline-block; width:50px;"></span><input type="text" name="lname" placeholder="Last name" maxlength="10" required><br><br>
                     <span style="display:inline-block; width:50px;"></span><input type="email" name="email" placeholder="Email" maxlength="20" required><br><br>
                     <span style="display:inline-block; width:50px;"></span><input type="number" name="quantity" placeholder="Mobile Number" size="10" required><br><br>
                     <span style="display:inline-block; width:50px;"></span><textarea name="message" placeholder="Message" rows="10" cols="30" required></textarea><br><br>
                     <span style="display:inline-block; width:50px;"></span><input type="submit" value="Submit">
                     <span style="display:inline-block; width:10px;"></span><input type="reset" value="Reset" />
                  </form>
               </form>
  </body>
</html>

Please let me know what I am doing wrong.
TIA.

I was wondering if I could redirect the user to a different page after they submit thr form. Is it possible?

Hello, guys! I followed the steps and everything worked fine until I put the ajax call. The message to the user is shown, but the email is not sent. Please help!
I'm using it in a codepen: https://codepen.io/alinecrsouza/pen/JKboXL

Hi guys thanks for the awesome code! Is there a way to remove the required email? I tried removing the
"if( !validEmail(data.email)...return false;" in form-submission-handler.js. But that made it so my thank you page didn't show up. I need to have just a message field in my form and email is preventing me from doing so. Thanks for the help! -Lando

MY CODE IS

<head>
    <meta charset="utf-8" />
    <title>Email Enquiry - Formoid css form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
<body class="blurBg-false" style="background-color:#EBEBEB">



<!-- Start Formoid form-->
<link rel="stylesheet" href="formoid_files/formoid1/formoid-solid-green.css" type="text/css" />
<script type="text/javascript" src="formoid_files/formoid1/jquery.min.js"></script>
<form class="formoid-solid-green" style="background-color:#FFFFFF;font-size:14px;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#34495E;max-width:480px;min-width:150px" method="post" action="https://script.google.com/macros/s/AKfycbyPsVYfIewWT_jqz_D9fUyTlb28JLfTdEc_lR9JVJiKHdnmzEQ/exec" onSubmit="alert('Thank you for your feedback.')"><div class="title"><h2>Email Enquiry</h2></div>
    <div class="element-input" title=" Enter Name of Parent"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="large" type="text" name="input" required="required" placeholder="Name of Parent"/><span class="icon-place"></span></div></div>
    <div class="element-phone" title="Enter parent's Contact number"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="large" type="tel" pattern="[+]?[\.\s\-\(\)\*\#0-9]{3,}" maxlength="24" name="phone" required="required" placeholder="Cell Phone" value=""/><span class="icon-place"></span></div></div>
    <div class="element-email" title="Enter Parent's email"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="large" type="email" name="email" value="" required="required" placeholder="Email"/><span class="icon-place"></span></div></div>
    <div class="element-input" title="Enter Name of Student"><label class="title"><span class="required">*</span></label><div class="item-cont"><input class="large" type="text" name="input1" required="required" placeholder="Name of Student"/><span class="icon-place"></span></div></div>
    <div class="element-date" title="Enter Student's Date of Birth"><label class="title"></label><div class="item-cont"><input class="large" data-format="yyyy-mm-dd" type="date" name="date" placeholder="Date of Birth"/><span class="icon-place"></span></div></div>
    <div class="element-multiple" title="Select the class the student is applying for"><label class="title"></label><div class="item-cont"><div class="large"><select data-no-selected="Nothing selected" name="multiple[]" multiple="multiple" >

        <option value="Class VIII">Class VIII</option>
        <option value="Class IX">Class IX</option>
        <option value="Class X">Class X</option>
        <option value="Class XI">Class XI</option>
        <option value="Class XII">Class XII</option></select><span class="icon-place"></span></div></div></div>
    <div class="element-textarea" title="Enter Your message here"><label class="title"></label><div class="item-cont"><textarea class="medium" name="textarea" cols="20" rows="5" placeholder="Coments"></textarea><span class="icon-place"></span></div></div>
<div class="submit"><input type="submit" value="Submit"/></div></form><p class="frmd"><script type="text/javascript" src="formoid_files/formoid1/formoid-solid-green.js"></script>


</body>

AFTER SUBMIT, IT SHOWS-

How do you change the script for account for inputs of type radio or multiple choice? Please and thank you!

My data does enter the google spreadsheet but it says undefined for every data it takes.
The email notification works for me.

Hi, first of all, awesome tutorial!

Been making something for about 2-3hours now, fixed some errors I had. But I can't seem to narrow this one down, anyone has a clue on the following error?: (type error: Can not call method getId null. (Rule 38 file 'Code')):

Hi, I'm having some issues with getting the information accepted by the form into the Google Spreadsheet. I believe that I have updated the name and id tags with the column names, but for some reason my form still is not working.

I really need your help. Please let me know what I can do as soon as possible.

Hi there!

Absolutely loved this tutorial, I'm currently planning on utilising it for my own blog www.joewoodcock.co.uk (watch this space!).

I was wondering however, is it possible to use the email submitted and email that person from the sheet's script?

Thanks,

Joe

so i'm having a cors issue when i include the jquery cdn, and my messages never actually get sent, but the form does disappear, with a thank you message showing up. i've downloaded the cors add-on for chrome just as a work around for the moment, but still no data actually is passed through.

Is it possible to also add a Google Drive script to this . . . suggestion: https://goo.gl/hQv8x7

Is it possible to host this website project through Google Apps Script without using an external web host?

Looking in the setup guide, I did not see a way to upload the HTML form to GAS or display it straight from the web app URL (in the guide, it is only rendered using the local file and a web browser)

I would like to use this application with an existing web app I have been building if that is possible.

Thanks!

Hi There:

Thanks for your great work, and for sharing.

Question please...is this supposed to be cross-browser compatible?
(Sorry for the newbie question.)

I can only get it to work in Chrome and Edge in a webpage
http://www.elizaleung.com/plainContact.htm

In fiddle...it works in all browsers (e.g. safari, FF)
https://jsfiddle.net/dustcanada/xooeyt5t/

thanks for your help!
Eliza

I would like some info to customize "html-form-send-email-via-google-script-without-server". I need to add additional text labels but it's, apparently, not as easy as it looks!

It seems that recently Google has updated its way to create forms, so now the names of the fields are in hidden inputs below the normal ones (https://github.com/heaversm/google-custom-form).

I have also tried the @nelsonic approach, and it emails the answers in JSON format properly, but it doesn't load them into the Google Spreadsheet, at least for me. That's why I wanted to combine two methods to always save the users data in case of more obfuscation changes are taken in the future by Google.

So I recommend you to have a webpage with a iframe inside of it. This iframe would contain your own custom form, from another webpage or –as in my example for convenience reasons– from itself using the srcdoc attribute.

Then, you copy the names of those hidden inputs as well as the action form url from your Google Form Preview Page and paste them into the custom form.

And finally, with Ajax we can easily send one copy of the form data to the normal Google Spreadsheet, and the other to our mail with the @nelsonic script solution.

This way, with the iframe and the Ajax, we are avoiding the url redirection to the 'Response registered' page when the form is submitted to Google, but we can hide the iframe from the parent view to be 100% sure.

I post here all my code for you to test it:

Google Spreadsheet with @nelsonic solution: https://docs.google.com/spreadsheets/d/1LUcidZln8fk-VymjyOXX4gfVusmCf8-G-SghraOPNyA/edit?usp=sharing

Custom Form:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Custom Form to Google SpreadSheets</title>
    </head>

    <body>
      <script type="text/javascript">
        function hideIframeAndShowThankYouMessage(){
          document.getElementById('iframe').style.display = "none";
          document.getElementById('thankyou').style.display = "block";
        }
      </script>
       <iframe id="iframe" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" srcdoc="<html><head></head><body>
       <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
       <script type='text/javascript'>

        $(document).ready(function(){

          $('#form').submit(function(e) {

            // You could also here, for example, valid an email address input

            // It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js:

            window.top.hideIframeAndShowThankYouMessage();

            // Now we send the same form to two different locations: the first is the ordinary Google Spreadsheet, the second is the Google Apps Script which allows us to receive an email with the form info in JSON format

            var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse';

            var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec';

            $.ajax({
              type: 'POST',
              url: url_sheet,
              data: $('#form').serialize(),
              success: function(data){}
            });

            $.ajax({
              type: 'POST',
              url: url_script,
              data: $('#form').serialize(),
              success: function(data){}
            });

            e.preventDefault();

          });
        });


        </script>

        <!--
            *** TO-DO!! ***        
            1. Copy your form ACTION url from your Google Form Preview Page

            2. Replace value of var url_sheet with that form ACTION url in line 31

            3. Copy your Spreadsheet WEB APP url from Google Script Editor

            4. Replace value of url_script with that WEB APP url in line 33

            3. Look into the source of your Google Form Preview Page and search for the names of the HIDDEN fields which are each one close to the normal input type (... <input type='hidden' name='entry.314619096' jsname='L9xHkb'> ...). We don't need the jsname, only the name

            4. Replace the NAMES fields of every field of the custom form below
         --> 

       <form id='form' method='POST'>

          <label for='name'>Name: </label>
          <input type='text' name='entry.314619096' placeholder='This is easy!' />
          <br/>
          <label for='message'>Message:</label>
          <input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/>
          <br/>
          <input type='submit' value='Submit'>
      </form></body></html>">Loading...</iframe>
      <h1 id="thankyou" style="display: none">Thank you!</h1>
    </body>
    </html>

Hope it could help someone!

Edge seems to return the radio button grouped items as an HTML Collection and needs some special-casing to get the field names & values.

I have the fix already made for a survey I just built & tested. Can push a fix in a bit.

Dear,
I´d like to say thank you. Everything works except Thanky you page. I have still result page. My opinion is, that is something missing script.gs (I have ther only doPost, setup and record_data), handleResponse is missing.
Thank you for your answer.
Ben

See: https://github.com/nelsonic/html-form-send-email-via-google-script-without-server/blob/292b32f28a109d0bdf98c6469b4f1f803a8fc746/google-apps-script.js#L36-L39
Is it necessary...?

Here is the issue I see in my console and I have attached a screenshot as well!

form-submission-handler.js:47 contact form submission handler loaded successfully
form-submission-handler.js:16 Object {name: "[email protected]", message: "[email protected]", email: "[email protected]", color: "[email protected]"}
form-submission-handler.js:43 POST https://script.google.com/a/macros/resilientcoders.org/s/AKfycbzScpu_YmPT5tiG7ZAH3F47MEP_Wx2yT9nvkrQo2WBUVQETrIFW/exec handleFormSubmit @ form-submission-handler.js:43
index.html:1 XMLHttpRequest cannot load https://script.google.com/a/macros/resilientcoders.org/s/AKfycbzScpu_YmPT5tiG7ZAH3F47MEP_Wx2yT9nvkrQo2WBUVQETrIFW/exec. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.
form-submission-handler.js:33 0 ""
form-submission-handler.js:34

My form was submitting properly and sending to the correct email address before adding this script code:

After adding in the code I keep receiving these errors in the console:
XMLHttpRequest cannot load https://script.google.com/macros/s/AKfycbxZcN3Cih22AOi28IUTtexOPPWdj1zIT3d2nkvbZTguwhQ8we4V/exec. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Uncaught TypeError: Cannot read property 'style' of null

I've tried troubleshooting but can't figure out the issue. Does anyone have any suggestions? My html file is attached for reference.
index.txt

It seems src="https://cdn.rawgit.com/nelsonic/html-form-send-email-via-google-script-without-server/master/jquery-ajax-form-handler.js" is not available? I can't use your script and it seems that's because the source of jquery-ajax-form-handler.js is not available....

I am currently receiving the following message and then being show the json resutls:
"Resource interpreted as Document but transferred with MIME type application/json: https://script.googleusercontent.com/macros/echo?user_conent_key........."

How can I resolve this so that my thankyou_message is being shown? Thank you.

When I use this script in IE11 it asks the user the user to "save echo.json from...". And it doesn't show the confirmation message. Anyway to stop it from asking this and just show the success message?

Hi,

The script is sending an email, however the contents of the email are blank when there should be data inside: {}

This is my request processed screen: {"result":"success","data":"{}"}
This is the script I have:

/******************************************************************************
 * This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey  *
 * But has been simplified and cleaned up to make it more beginner friendly   *
 * All credit still goes to Martin and any issues/complaints/questions to me. *
 ******************************************************************************/

var TO_ADDRESS = "[email protected]"; // change this ...

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
                      JSON.stringify(e.parameters));
    record_data(e);
    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/

/**
 * select the sheet
 */
function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet   = doc.getSheetByName('responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

And this is my HTML code for my form:

<form action="https://script.google.com/macros/s/AKfycbxFQcPIQYXI3wSwo14dRTJ4lyF_Ci5xWxk0HYOxdoY5n2d291I/exec" method="post" enctype="text/plain" attribute>
<label for="First-Name"><span>First Name <span class="required">*</span></span><input type="text" class="input-field" name="First-Name" value="" /></label><br>
<label for="Last Name"><span>Last Name <span class="required">*</span></span><input type="text" class="input-field" name="Last-Name" value="" /></label><br>
<label for="field2"><span>Email <span class="required">*</span></span><input type="text" class="input-field" name="Email" value="" /></label><br>
<!--<label><span>Telephone</span><input type="text" class="tel-number-field" name="tel_no_1" value="" maxlength="4" />-<input type="text" class="tel-number-field" name="tel_no_2" value="" maxlength="4"  />-<input type="text" class="tel-number-field" name="tel_no_3" value="" maxlength="10"  /></label>-->
<label for="field4"><span>Select an image from above <span class="required">*</span></span><br><select name="Image-Selected" class="select-field">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select></label>
<label for="field5"><span>Comments </span><textarea name="Comments" class="textarea-field"></textarea></label>
<label><span>&nbsp;</span><input type="submit" value="Submit" /></label>
</form>

How can I send an email that has all the data in it?
Thank you!