Tutorial

How to Send Elementor Form Submissions to Zapier

  • 17 January 2023
  • 2 replies
  • 4881 views
How to Send Elementor Form Submissions to Zapier
Userlevel 7
Badge +11

This article is for you if:

  • you use Elementor and want to send form submissions to Zapier
  • you use Elementor, want to send form submissions to other apps, and are just learning that Zapier enables you to do it.
  • you’re comfortable trying Webhooks by Zapier (it’s not as scary as it sounds…promise) and are on a paid Zapier plan, which is required in order to use Webhooks.

The Challenge

If you’re an Elementor user, you may have found yourself wanting to send form submissions to other apps you use (like Google Sheets, CRMs, etc). You can do it by using Zapier to receive the submissions, then selecting where you’d like to send them!

Let’s take a look at how it works!

The Quick Overview

If a bulleted list is all you need, we’ve got you covered.

In Zapier:

  • Create a Zap that uses Webhooks by Zapier as the trigger
  • Copy the URL that’s provided in your trigger step (you’ll need it for your form)

In Elementor:

  • Click on your form, then in the left sidebar click on Actions After Submit, then choose Webhooks.
  • Under the Webhooks option that appears, paste the URL that you got from your Zap
  • Fill out your form and submit it

In Zapier:

  • Click on “Test trigger” to receive the sample you just submitted
  • Add actions steps for your preferred apps

The Detailed Step-by-Step

If you’d prefer to follow along with instructions and screenshots, we’ve got that also.

Zapier: Create a Zap Using Webhooks by Zapier

💡 Did you know? You can create a new Zap by going to https://zap.new

  • Select Webhooks by Zapier as your trigger
  • From the Event dropdown, select Catch Hook

Zapier: Copy the URL That Your Form Will Use

  • Click Continue to get to the “Set up trigger” step
  • Click Continue again to get to the “Test trigger” step (and show the URL you need to copy)
  • Click Copy to the right of the URL, as shown above

Elementor: Activate Webhooks As a Post-Submit Action

  • Click on the Elementor form
  • Click on the Content section
  • Click Actions After Submit
  • Click into the field and start typing “webhooks”

Elementor: Specify the Webhook URL from Your Zap

  • Click on Webhook in the left sidebar
  • Paste the URL that you copied from your Zap

Elementor: Fill and Submit the Form

  • Fill out the fields in your form
  • Click your send/submit button

Zapier: Test the Trigger Step

  • Click the Test trigger button
  • Verify that the fields match :)
  • Notice all of the extra info you get (date, time, user-agent, form name, etc)

Zapier: Add More Action Steps

  • Decide where you’d like to send those form submissions
  • Keep filling out your Zap until you’re ready to publish it!

Using the Advanced Data Option in Your Form

 

If you enable the Advanced Data option by clicking on the toggle above, this is how your form submission comes into your Zap:

 

The main advantage is that you also get the field label. This would help if you wanted to do something like this, in an email for example:

[name of the field]: value of that field
[name of the next field]: value of that next field
[name of the last field]: value of the last field

That means you’ll always have the most accurate label name, even if someone changes it in the form.

Wrapping Up

Well, that does it! Hope this has been helpful in getting your Elementor form submissions connected to your other apps via Zapier :) Please let us know if you have any questions about this process. Until next time 👋


2 replies

Userlevel 1

This article is for you if:

  • you use Elementor and want to send form submissions to Zapier
  • you use Elementor, want to send form submissions to other apps, and are just learning that Zapier enables you to do it.
  • you’re comfortable trying Webhooks by Zapier (it’s not as scary as it sounds…promise) and are on a paid Zapier plan, which is required in order to use Webhooks.

The Challenge

If you’re an Elementor user, you may have found yourself wanting to send form submissions to other apps you use (like Google Sheets, CRMs, etc). You can do it by using Zapier to receive the submissions, then selecting where you’d like to send them!

Let’s take a look at how it works!

The Quick Overview

If a bulleted list is all you need, we’ve got you covered.

In Zapier:

  • Create a Zap that uses Webhooks by Zapier as the trigger
  • Copy the URL that’s provided in your trigger step (you’ll need it for your form)

In Elementor:

  • Click on your form, then in the left sidebar click on Actions After Submit, then choose Webhooks.
  • Under the Webhooks option that appears, paste the URL that you got from your Zap
  • Fill out your form and submit it

In Zapier:

  • Click on “Test trigger” to receive the sample you just submitted
  • Add actions steps for your preferred apps

The Detailed Step-by-Step

If you’d prefer to follow along with instructions and screenshots, we’ve got that also.

Zapier: Create a Zap Using Webhooks by Zapier

💡 Did you know? You can create a new Zap by going to https://zap.new

  • Select Webhooks by Zapier as your trigger
  • From the Event dropdown, select Catch Hook

Zapier: Copy the URL That Your Form Will Use

  • Click Continue to get to the “Set up trigger” step
  • Click Continue again to get to the “Test trigger” step (and show the URL you need to copy)
  • Click Copy to the right of the URL, as shown above

Elementor: Activate Webhooks As a Post-Submit Action

  • Click on the Elementor form
  • Click on the Content section
  • Click Actions After Submit
  • Click into the field and start typing “webhooks”

Elementor: Specify the Webhook URL from Your Zap

  • Click on Webhook in the left sidebar
  • Paste the URL that you copied from your Zap

Elementor: Fill and Submit the Form

  • Fill out the fields in your form
  • Click your send/submit button

Zapier: Test the Trigger Step

  • Click the Test trigger button
  • Verify that the fields match :)
  • Notice all of the extra info you get (date, time, user-agent, form name, etc)

Zapier: Add More Action Steps

  • Decide where you’d like to send those form submissions
  • Keep filling out your Zap until you’re ready to publish it!

Using the Advanced Data Option in Your Form

 

If you enable the Advanced Data option by clicking on the toggle above, this is how your form submission comes into your Zap:

 

The main advantage is that you also get the field label. This would help if you wanted to do something like this, in an email for example:

[name of the field]: value of that field
[name of the next field]: value of that next field
[name of the last field]: value of the last field

That means you’ll always have the most accurate label name, even if someone changes it in the form.

Wrapping Up

Well, that does it! Hope this has been helpful in getting your Elementor form submissions connected to your other apps via Zapier 🙂 Please let us know if you have any questions about this process. Until next time 👋

hi

 

We were able to successfully test a zap but when we tried to copy the api key from our gohighlevel settings to zapier it continuously says undefined. Please let me know which api key we need to connect to. Do we need to pay for a leadconnector subscription or how can we get the right api? 

 

Thanks

Reply