how to submit html form data on google sheet

HTML CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <form method="POST" id="myform">
            <input type="text" name="firstName">
            <input type="text" name="lastName">
            <input type="submit" value="Submit" id="btn">
        </form>    
<script>
const scriptURL = ''
var btn = document.querySelector("#btn");
btn.addEventListener("click",function(e){
    e.preventDefault()
    fetch(scriptURL,{
        method: 'POST',
        body: new FormData(document.querySelector("#myform"))
        })
        .then(response => alert("Thanks for Contacting us..! We Will Contact You Soon..."))
        .catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>


GOOGLE SHEET CODE :

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet2");
var scriptProp = PropertiesService.getScriptProperties()

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

function doPost (e) {

  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    //var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet2") //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) {
      if(header === 'timestamp'){
        return new Date();
      }else{
        return 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()
  }
  
}

Comments

Popular Posts