How to getElementById in Google Apps Script from external Html file?

Question

I'm trying to plug my Html form to Google Apps Script to automate an email notification but also include form inputs in the email body. Example: I have a form on my website with a "name" and "email" input. A visitor goes on my site and fills out the form. When the visitor clicks on the "submit" button, whatever is filled in the inputs is stored and sent to Google Apps Script. A function is then run on Google Apps Script that sends me an email. The email's body has the "name" and "email" input data. That's the dream, here's reality!:

Code.gs (Google Apps Script):

 //EMAIL NOTIFICATION function sendNotification(e) { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1"); var range = sheet.getActiveRange().getA1Notation(); var recipients = "myemail@gmail.com"; var message = ''; function createSpreadsheetChangeTrigger() { var ss = SpreadsheetApp.getActive(); ScriptApp.newTrigger('onFormSubmit') .forSpreadsheet(ss) .onFormSubmit() .create(); } var subject = 'Client Lead Notification'; var body = 'You have a new client submission on your Google Sheets spreadsheet' + ss.getUrl(); MailApp.sendEmail(recipients, subject, body); };

Html (external):

 <input id="inputTest" > <button onclick="storeInputData()">Send</button> <script> function storeInputData() { var inputData = document.getElementById("inputTest").value; document.write("This is " + inputData); } </script>

My question is, how do I getElementById in Google Apps Script the same way it's done in the Html (storeInputData)?

Answer 1

You need to embed your HTML form into a WebApp

Apps Script Web Apps feature methods that allow communication between the client-side HTML / Javascript files and the server-side Apps Script file.

Of particular interest for you would be google.script.run that allow you to pass HTML element values to an Apps Script function, sample:

index.html

...
<input id="inputTest" >

<button onclick="storeInputData()">Send</button>

<script>
    function storeInputData()
    {
        var inputData = document.getElementById("inputTest").value;
        google.script.run.passInputData(inputData);
    }
</script>
...

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function passInputData(value) {
  Logger.log(value);
}