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!
36 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
Guy, Great Job and Thanks for sharing. I added Elementor Form Actions After Submit Email to Webhook and once submit is pressed form responds with red “X error” below form. How do we extend this to send email notifications. Can Elementor send email After submit ? or do we need to install google apps script “email notifications for google forms”
Hey there,
I believe that Elementor can send you an email as described.
Did you mean sending a mail to an admin for every submitted form for example?
Or did you mean to send an email to the person who filled out the form?
The first use case should work just fine…
In the second case – you might have to use a plugin or a mailing list webhook.
Another thing, if you disable the Webhook action, does the email work fine?
Good luck!
Guy
That’s just simply brilliant!
I struggled to set it up for like 30 minutes, but now it works! And 30 minutes is nothing for the thing you did!
For less experienced I guess video would be great, but well most will manage without it anyway.
Kudos man!
Hey Oskar!
Great to hear that! Happy the guide helped you 🙂
Hi Guy,
really appreciate your work man.
thank you very much.
just had a query is there an option to get the submission source also in the google sheet, i want to know from where the form has been submitted.
Hey Faheem,
I’m happy this guide helped you!
Yes, you can definitely add the submission source.
Add a hidden field in your form, and give it a fixed value of the page title (Elementor lets you do it).
Add the name of this hidden field as one of your columns in the Sheet and it should work out of the box.
Good luck!
Hi Guy,
Really great tutorial and easy to do your own modifications afterwards! Much appreciated!
Awesome! Happy to hear that it helped you!
Hey Guy! Great blog and it works great!!!
Would it be possible to help me add something to the script?
I would like to take the page URL that the Elementor form is found on and pull that into the sheet next to timestamp.
Nevermind I figured it out.
For anyone interested you use the hidden value as Guy suggested in a previous reply, and set the default value to (click dynamic tags) “request parameter”
example page with a form on:
http://www.mywebsite.com/?utm_source=homepage
Then make the parameter name “utm_source” (what ever is after the ?)
Make sure you add a new column in your sheet and then it will pull the tracking data.
In this case the new column would be called “source” and would pull the data “homepage” to the sheet in this instance.
Thanks and maybe Guy can assist if this is not clear.
Hey Chris!
Happy this helped!
Your solution is great, however, another alternative is setting a hidden field as you said, but giving it a dynamic value of the Page Title (Elementor gives you this natively)
Good luck!
Guy
Hello, the code is not working for me. I see the execution environment and I don’t have any errors but the google sheets stays empty.
Hey Nahuel,
I’m not sure how to help you… Make sure you follow the instructions, the code should be working. Maybe it’s a permissions issue?
This is super helpful, thank you!
I’m wondering if there’s a way to change the header names as well as add one? Instead of name/email/message, I want it to be name/email/instagram/referral.
Thanks in advance!
Hey Alyssa
Yeah sure, you need to make sure that the column names on your google sheet, as well as your elementor form, are matching to what you want.
You can edit the default field names in the form editor to change it
Good luck!
Guy
Hey, I’m already following your tips, and after submitting show this message
“Webhook Webhook Error
This Message is not visible for site visitors.”
I see that all is good with the code and the webhook link also
could you tell me how I can fix this?
thank you
Hey Ayoub,
Not sure about it to be honest… try to make sure that you gave permissions to everything and test it locally.
Worst case, try starting from scratch again
Hi
great tutor!!!
If I need a couple of forms in one sheet? what do you suggest?
Thanks
Happy to help!
Do you want a couple of forms of the same field structure?
Then simply create multiple forms, add a hidden field that tells you the name of the form, so you can distinguish them, and follow exactly the same steps.
You’d get the sheet with the data and the information separated into the submitting form
If the forms have a different structure, I would use several sheets, not the same one
Guy
thank.
They all have separate structures so several sheets would be the solution though I thought to combine it all under one. guess its possible with a plugin but not this way. thanks
If you (like me) get a webhook error whilst using Guy’s code, that means your version of Elementor together with WP installation and server settings won’t work reliably. Period.
To work around this you need to modify functions php (visit: YOURDOMAIN.com/wp-admin/theme-editor.php?file=functions.php) and paste the following code:
add_action( ‘elementor_pro/forms/new_record’, function( $record, $handler ) {
//make sure its our form
$form_name = $record->get_form_settings( ‘form_name’ );
// Replace MY_FORM_NAME with the name you gave your form!
if ( ‘FORM15032022’ !== $form_name ) { return; }
$raw_fields = $record->get( ‘fields’ );
$fields = [];
foreach ( $raw_fields as $id => $field ) { $fields[ $id ] = $field[‘value’]; }
// Replace http://YOUR_WEBHOOK_URL with the actual URL you want to post the form to for example: https://script.google.com/macros/s/scriptID-34hjd30/exec
wp_remote_post( ‘HTTP://YOUR_WEBHOOK_URL’, [ ‘body’ => $fields, ]);
}, 10, 2 );
This works. Every. Single. Time.
The downside is that you need to modify this code to work with every new form you create and want to trigger a webhook
Source: https://developers.elementor.com/forms-api/
Thanks for the insights!
I tried adding your code to the functions.php file but I am still getting an error each time I submit the form.
Look at this video.
http://somup.com/c3e0rlTMAg
Hey Aaron,
I took a look at the video you sent and two things I saw:
1. Try without pasting the additional code at functions.php, does this work?
2. You forget to replace the FORM_NAME at the code you pasted:
// Replace MY_FORM_NAME with the name you gave your form!
if ( ‘FORM15032022’ !== $form_name ) { return; }
This is not your form name, you’d find yours at the top of the Elementor form widget. You need to replace it in order for the code to work,
But anyhow, I’d try without this code first to check if things work or not
Good luck!
Still getting the same error even after updating the code in functions.php
http://somup.com/c3eTeFTNBf