How to add an additional webhook to an Elementor Form

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' );

8 comments

  1. 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.

  2. 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.

  3. Hey, does this plugin still work? I tried multiple times. Does it appear somewhere in the interface? Thanks in advance. T.

  4. 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.

Leave a comment

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