Categories
Technology

Elementor Form Data to Google Sheets without Zapier

Easiest way to send the Elementor forms’ data to the Google Sheets.

Yes, you can really send the Elementor Form data to Google Sheets.

For this to work, you will have to create a custom script in the Google Sheets’ Script Editor option and use the Webhook feature in the Elementor form.

Here, I will explain each and every step to send your Elementor form data to Google Sheets without using any third-party tools like Zapier.

Elementor Form Data to Google Sheets

1. Create a new Google Sheet

Create a new Google Sheet by going to Google Drive and clicking on the new blank spreadsheet, or just by simply going to the sheets.new URL.

And, name your new Google spreadsheet anything you like.

2. Add the Custom Script

Now, here’s the real magic.

Move to the Script Editor by clicking on the Script editor under Tools drop-down and name the project anything you like.

Creating a New Google Sheets and Going to Script Editor

Delete any existing code and copy-paste the below code (by bainternet) in the area:

https://gist.github.com/bainternet/4b539b00a4bd7490ac3809d7ff86bd14

If you want to receive email updates, you can change the var emailNotification value from false to true and put your email address next to the var emailAddress.

3. Deploy as Web App

Click on the Publish drop-down select the option Deploy as web app. A popup will appear, just change the Who has access to the app: option from Only myself to Anyone, even anonymous.

Adding Custom Script to Google Sheets Script Editor

Hit Deploy and it will ask you to Review Permissions, click on it and select your Gmail account with which you want to run the script.

Google Unsafe App Notice

Sometimes, it gives you a warning saying This app isn’t verified, click on Advanced and then on the Go to {your-project-name} (unsafe).

Copy the Webhook URL

Grant all the permissions that it’s asking for by clicking on the Allow button; navigate back to the already opened Script Editor tab and copy the shown URL under the Current web app URL: option.

4. Add Webhook to the Elementor Form

Log in to your wp-admin and edit the page where you want to show your form with Elementor. Create a form (if not already); under form settings, move to the Actions After Submit section and add Webhook in the Add Actions field.

Add Webhook to Elementor Form

Go to the below Webhook section and paste the URL that you copied in the previous step. Update the page and you’re good to go.

Open the page where you’ve added the form, put some dummy data in the form and there will be a new sheet created in your Google Sheet. Navigate to the new sheet and your form data should be there.

That’s it.

If you are stuck somewhere then feel free to let me know by dropping a quick comment below.

Also, share the article with the people who you think might be interested in reading it.

Recommended: Send Contact Form 7 data to Google Sheets

By Deepak K

I write about blogging, technology, business, and other related stuff. And, I share interesting insights on Twitter too.

4 replies on “Elementor Form Data to Google Sheets without Zapier”

I’m also getting an error. In Chrome Browser Console the following message comes up:

common.min.js?ver=3.1.1:2 Uncaught TypeError: Cannot read property ‘error’ of undefined
at onError (common.min.js?ver=3.1.1:2)
at dispatch (jquery.min.js?ver=3.5.1:2)
at v.handle (jquery.min.js?ver=3.5.1:2)
at Object.trigger (jquery.min.js?ver=3.5.1:2)
at HTMLFormElement. (jquery.min.js?ver=3.5.1:2)
at Function.each (jquery.min.js?ver=3.5.1:2)
at s.fn.init.each (jquery.min.js?ver=3.5.1:2)
at s.fn.init.trigger (jquery.min.js?ver=3.5.1:2)
at child.onSuccess (frontend.min.js?ver=3.0.10:2)
at Object.e.each.n. [as success] (frontend-modules.min.js?ver=3.1.1:2)

Leave a Reply

Your email address will not be published. Required fields are marked *