A. Prepare the Google sheet

  1. Create a new Google Sheet First, go to Google Sheets and Start a new spreadsheet. Rename it whatever you like.
  2. Create a Google Apps Script Click on Extensions> App Script … which should open a new tab. Rename it as you like. Now, delete the function myFunction() {} block within the code.gs tab. Paste the following script and hit > Save:
var sheetName = 'Sheet1'
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 = 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()
  }
}

  1. Run the setup function Next, go to Run > Run Function > initialSetup to run this function. In the Authorization Required dialog, click on Review Permissions. Sign in or pick the Google account associated with this projects. You should see a dialog that says Hi {Your Name}, Submit Form to Google Sheets wants to... Click Allow
  2. Add a new project trigger Click Triggers (left sidebar, icon with a clock) Click new trigger, on bottom right side the button [+ Add Trigger] Choose in the fields:
    Choose which function to run=doPost Choose which deployment should run=Head Select event source=From spreadsheet Select event type=On form submit Then click Save
  3. Publish the project as a web app Click on Publish > Deploy as web app…. Set Project Version to New and put initial version in the input field below. Leave Execute the app as: set to Me([email protected]). For Who has access to the app: select Anyone, even anonymous. Click Deploy. In the popup, copy the Current web app URL from the dialog. And click OK. You can always find your web app URL in top right corner button [Deploy]> Manage Deployments

B. Code element

  1. Input your web app URL Now in the same container of your form insert a code element

Untitled

Insert the above code

<script>
  const scriptURL = 'SCRIPT-URL'
  const form = document.forms['MY-FORM-ID']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })
</script>

Change the ‘SCRIPT-URL’ with your web app URL. Example;

 const scriptURL = '<https://script.google.com/macros/s/AKfycbyyAMry66JkZj6zyfq5iH7IrkhHC0oK2kPW-lFY8Q0h9w_X6m5WRKex_/exec>'

Change the ['MY-FORM-ID'] with yours form Id. Example

const form = document.forms['brxe-xttqqh']