Elementor Pro includes a form builder widget, complete with a webhook to which all form data can be sent and a redirect URL to send users after successful submissions. I have been tasked with adding a second webhook to a form because the first was being used for an integration with Zapier.
We need to use the elementor_pro/forms/new_record hook to make this work, and it is possible to prevent the form from submitting if our additional webhook fails. Here is a simple plugin that adds a webhook to all Elementor Forms sitewide:
https://gist.github.com/csalzano/dfd754e0fe8b6ac10731fad8f257c0bf
If you need to target a specific form, access the form name or ID using the $record object.
//Get the Elementor form ID
$form_id = $record->get_form_settings( 'id' );
//Get the Elementor form name
$form_name = $record->get_form_settings( 'form_name' );
Comments
8 responses to “How to add an additional webhook to an Elementor Form”
How to use your code to connect with GoToWebinar Forms?
I’ve never used GoToWebinar Forms before, so I can’t easily help you.
Hi,
How can I make this form for only one form and not all forms?
It’s been some months since I’ve worked on this, so I don’t know for sure. I’d
var_dump( $form_data );to see if it contains a form ID or another unique identifier. You might also use the WP post ID to short circuit.I think that Elementor has a complete example in https://developers.elementor.com/forms-api/custom-form-action/
Look for the complete “sendy” case.
Thank you so much, Corey Salzano!
The thing $ajax_handler object and error message I didn’t found this anywhere. But got this here.
And also found the action elementor_pro/forms/new_record is very very useful.
Hey, does this plugin still work? I tried multiple times. Does it appear somewhere in the interface? Thanks in advance. T.
Tomas: I added a screenshot to the post where you can see the Webhook section of an Elementor form widget. The site I worked on already had the form data being sent to Zapier, and I needed to send the data to a second webhook. Elementor doesn’t support more than one, so this code makes it happen. There is no indication that the form sends the submission data to two different web services in the Elementor interface.