CODEWITHSUNDEEP
htmlformsgoogle-apps-scriptgoogle-sheets
abers1997
abers1997

Reputation: 1

How to get input text from html form with Google Apps?

My Google Apps script submits form inputs from an html file onto the specified Google Sheets spreadsheet. Once this is done, it runs a function that sends an email notification to the specified recipient onFormSubmit. Everything works fine, but I'm trying to get the specific form inputs (name, phone, extension, email, etc.) and send them in the body of my email.

Here's my Google Apps Script SendNotification function:

//EMAIL NOTIFICATION
function sendNotification(e) {
   var ss = SpreadsheetApp.getActiveSpreadsheet();
   var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
   var range = sheet.getActiveRange().getA1Notation();
   var recipients = "[email protected]";
   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' + 
      '<body>' + 
      '<p>Name : '+e.parameters.name+'</p>' +
      '<p>Email : '+e.parameters.name+'</p>' +
      '<p>Contact : '+e.parameters.name+'</p>' +
      '</body>'; + ss.getUrl();
   MailApp.sendEmail(recipients, subject, body);
};

Here's the rest of the code: 

//FORM SUBMISSION
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
   var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
   scriptProp.setProperty('key', activeSpreadsheet.getId())
}

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

function doPost (e) {
   var lock = LockService.getScriptLock()
   lock.tryLock(10000)

   try {
      var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
      var sheet = doc.getSheetByName(sheetName)
      var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
      var nextRow = sheet.getLastRow() + 1
      var newRow = headers.map(function(header) {
         return header === 'timestamp' ? new Date() : e.parameter[header]
      })

   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
   return ContentService
     .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
     .setMimeType(ContentService.MimeType.JSON)
   }

   catch (e) {
      return ContentService
         .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
         .setMimeType(ContentService.MimeType.JSON)
   }

   finally {
      lock.releaseLock()
      sendNotification()
   }
}

I'm not experienced with Javascript/GS! I'm still learning and have a history with HTML/CSS and C++ within game engines - so excuse my newbie-like question.

Upvotes: 0

Views: 1617

Answers (1)

Cooper
Cooper

Reputation: 64032

A simple dialog with form 

function runMeFirst() {
  var ss=SpreadsheetApp.getActive();
  var html='<style>td,th{border:1px solid white;}</style><form name="myForm"><table>';
  html+='<tr><td><input type="text" name="First" placeholder="First" /></td><tr></tr>';
  html+='<tr><td><input type="text" name="Last" placeholder="Last" /></td><tr></tr>';
  html+='<tr><td align="center"><input type="button" value="Submit" onClick="saveData(myForm);" /></td><tr></tr>';
  html+='</table></form>';
  html+='<script>function saveData(form){console.log(form);google.script.run.processData(form);}console.log("My Code");</script>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Data');
}

function processData(data) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getActiveSheet();
  Logger.log(data);
  sh.appendRow([data.First,data.Last]);
}

Upvotes: 3

Related Questions