This article will show you how to connect Elementor Form to Google Sheets, linking your Elementor Form widget and Google Sheets in just 10 minutes. I’ll also walk you through the steps while requiring only minimal coding abilities! Zapier is not needed for this task!
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 the questions. By the way, if you’re creating Webinar landing pages makes 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.
Required Tools:
Things Needed?
Steps to connect Elementor Form to Google Sheets
[Code Stuff] Field Validation
I wanted to make sure that only Form submissions with Message fields are saved in Google Sheets.
For that, I added in the code this line:
const mandatoryFields = [‘message’]
Make sure to either keep, delete the value (make it []) or update the fields in this array. This defines which areas must have values before saving data in Google Sheets.
Connect Elementor Form to Google Sheets with this code 🎉
This code is a mix of parts found over the internet with the authors’ credits, who helped me at the bottom. Special Credits to Jamie Wilson and Omer Lahav.
// 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!
11 Responses
if i am already follow your tips, and after submit show this message
“Webhook Webhook Error
This Message is not visible for site visitors.”
how i can fix this?
thanks
Hey Fadel,
Webhook error can be caused by many types of errors, but what I would check is that you copied the URL of the Google we hook correctly.
Additionally you can take a look at the error dashboard in the Google code editor to see if and error were logged there
Good luck!
Hi, my page has also started getting errors (“Webhook Error”). Your code worked fine for weeks now it ends-up with the error not every time but most of the times I try to submit the form. What’s interesting the code itself is executed entirely and the responses are recorded as expected.
Webhook error means the receiving server responded with response code other the 200. So maybe Google has changed something in the appscript IDE or they simply have a bug. Anyways the script currently doen’t work reliably (which is not the author’s fault).
Unfortunately I cannot see the log of execution because the new script IDE doesn’t show the logs for remote webapp execution (I can see the code was run, but the log itself is empty even if I logged anything to the console). Plenty of devs complainted about the way appscript deals with remote post requests and doesn’t log properly.
Hey Rafal
Thanks a lot for the elaborate response! So sad to hear it’a not working…
I’m actually traveling abroad right now, but once I return I’ll try to figure out a hack around it 🙂
I changed HtmlService.createHtmlOutput(“post request received”) to just HtmlService.createHtmlOutput() and it seems to fix the issue (at least for me).
Hey Rafal!
I got back home and tested things again, seems like it’s working.
I changed the default mandatory fields array to be an empty array. This way it will not require any field validation upon submission.
Thanks for the elaborate test!
Not working for me
Error:
An error occurred.
Webhook Webhook Error
This Message is not visible for site visitors.
Hey there,
I tested things again with my code and everything seems to run, maybe you somehow didn’t copy the URL correctly?
One thing to notice which I’ve also highlighted in the code,
Looks for
// Uncomment and add fields which must be mandatory when submitting a form
//const mandatoryFields = ['questions']
const mandatoryFields = []
and make sure this is empty, otherwise this will require you submitting a ‘questions’ field as well.
The default was ‘questions’, which I now changed to an empty array.
I hope this helps!
if i rename my tab sheet it will make a new form if there is a new entry
Hey Novan!
I’m not sure I understand your questions. Did you mean what happens if you change the name of the sheet?
In that case, change this at the beginning of the code:
var sheetName = ‘Sheet1’
to reflect the name of the sheet where you would like your data to be saved.
Let me know if this helps!
Hi Guy! It’s Rafal again.
Could you let me know why there’s a need to add the trigger for onFormSubmit?
I’ve just deployed the code as a web app WITHOUT adding the oFS trigger and it works just fine. Is there any particular reason the oFS has to be added?
Thanks for any response.
Rafal