Connect Elementor Form to Google Sheets for Free!

This post started after we created a Webinar signup page, with a question registrants could ask upon signing up. However, we wanted to collect all the questions from the submitted forms in a specific Google Sheet document to follow later follow all questions. I figured it's not this easy to Elementor Form to Google Sheets. By the way, if you're creating Webinar landing pages make sure to improve conversion with AI 🙂 

Initially, I believed it would be a short and easy task that would take me 5 minutes. Only later did I discover how tricky this was… But I've got you all covered in this post.

Elementor Form to Google Sheets in No Time

If you want to go the straightforward path, you can connect Elementor Form to Zapier. Respectively, it will cost you $20 per month. In this article, I will show how we did it for free and saved hundreds of dollars!

How to Connect Elementor Form To Google Sheets?

Google Sheets allows us to add code to our sheets and deploy this code as a webhook even better. This means our code gets a unique URL that can be triggered externally by our Elementor Form post submit action. The webhook allows us to create the required connection between Elementor Form to Google Sheets, and we're done! The following steps will describe everything you need to know.

// In case you want to change the Sheet name
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

// Lowercasing all input keys in the POST data by default (to avoid Message vs message confusion)
var shouldLowerCaseHeaders = true

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

function filterRow (parameters, mandatoryFields) {
    return mandatoryFields.every(field => parameters[field.toString().toLowerCase()] && parameters[field.toString().toLowerCase()].length > 0)
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)
  // Uncomment and add fields which must be mandatory when submitting a form
  //const mandatoryFields = ['questions']
  const mandatoryFields = []

  try {
    // Get the current open Google Sheet
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    // IMPORTANT: Create headers in your google sheet first
    //            If you dont create headers this won't match the data
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var parameters = e.parameter;

    // Lower casing header keys - True by default
    if (shouldLowerCaseHeaders){
      Object.entries(e.parameter).map(([key, value]) => parameters[key.toString().toLocaleLowerCase()] = value)
    }
    
    const shouldInsertToSheet = filterRow(parameters, mandatoryFields)
    
    if (shouldInsertToSheet){
      var newRow = headers.map(function(header) {
        return header.toString().toLowerCase() === 'timestamp' ? new Date() : parameters[header.toString().toLowerCase()]
      })
      sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
    }
    
    return HtmlService.createHtmlOutput("post request received");
  }

  catch (e) {
      return HtmlService.createHtmlOutput("post request received");
  }

  finally {
    lock.releaseLock()
  }
}

If you're looking for more great tips about Elementor, make sure to check out the full Elementor Tips list on the site!