Elementor Form additional webhook example

elementor-form-additional-webhook.php

<?php
/**
 * Plugin Name: Elementor Form Additional Webhook
 * Plugin URI: https://gist.github.com/csalzano/dfd754e0fe8b6ac10731fad8f257c0bf
 * Description: Adds a second Webhook to an Elementor form
 * Version: 1.0.1
 * Author: Corey Salzano
 * Author URI: https://breakfastco.xyz/
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

class Elementor_Form_Additional_Webhook {

	function hooks(){
		//Add our additional webhook right here
		add_action( 'elementor_pro/forms/new_record', array( $this, 'manipulate_form_submission' ), 10, 2 );
	}

	function manipulate_form_submission( $record, $ajax_handler ) {

		$form_data = $record->get_formatted_data();

		//change the names of fields before we send them somewhere
		$new_data = array(
			'First_Name' => $form_data['First Name'] ?? '',
			'Last_Name'  => $form_data['Last Name'] ?? '',
			'URL'        => $form_data['Website'] ?? '',
		);

		$response = wp_remote_post( 'http://api.somewhere.com/', array( 'body' => $new_data ) );

		//if the failure of our additional webhook should prevent the form from submitting...
		if( is_wp_error( $response ) ) {
			$msg = 'There was a problem with the additional webhook.';
			$ajax_handler->add_error( 0, $msg );
			$ajax_handler->add_error_message( $msg );
			$ajax_handler->is_success = false;
		}
	}
}
$elementor_webhook_239909870234 = new Elementor_Form_Additional_Webhook();
$elementor_webhook_239909870234->hooks();

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

Thank you! It helps a lot.

Thanks a lot for this snippet.

A great addition would be to include query params! For me this is a difficult as I am not familiar with php

query params

Not sure what do you mean by 'query params'

pass the query parameters in the url of the page to the webhook.

For example, I have a form with only the field $question, and a webuser is on the page 'www.domain.com/questions/?user=123'.

Then I want to have a post request like so:

//change the names of fields before we send them somewhere
		$new_data = array(
			'question' => $form_data['Question'] ?? '',
                        'user' => $query_parameters['user'] ?? ",
		);

The easiest way to get query parameter from URL, you can create a new form field and set the default value from the URL query parameter. And get it as a field in the webhook

Thanks a lot!

I cannot get the action to work, should it work if I place the gist in elementor-pro/modules/forms/actions file?

Put these codes to your theme 'functions.php' file.

Thanks so much, 5 hours wasted before this

@csalzano @Asikur22 - I'm trying to use that Webhook for the Lawmatrics integration. The API key is like:

https://api.lawmatics.com/v1/forms/067a0d61-ed44-4bb6-XXXXX/submit

and the documentation link is:

https://docs.lawmatics.com/#b590b79e-529f-42ec-b79b-9d9bc3e5de24

I dont' know why it's not passing data through API. Can you please help on this. Thank you.

@johnnny-bravoo, you need to send the data as JSON by setting the request header and need to use json_encode() function to encode the data array.

@Asikur22 thank you for your reply. I also tried with the data encoded in JSON, i.e:

$response = wp_remote_post( 'https://api.service.com', [ 'body' => json_encode($data), 'headers' => [ 'Content-Type' => 'application/json', ], ] );
'
but get error in add_response_data. Here is the source link: https://intermarketing.merkados.com/customizing-webhook-calls-in-elementor-pro

Hello everyone, thanks for this great code. i have modified it back in Jan, but i have decided to modify it a bit more and i think the new code would help more people.

in the code, i have added the benefit of using the additional webhook function on multiple forms but making a "allowed list" so you can place all the forms id there.

plus i have added an extra line where you can send the form data to multiple webhooks not limited to 1 as for the code above.

but again, credit to the original author for making this possible.

------------------------- copy all the code under here-------------------------

/**

• Plugin Name: Elementor Form Additional Webhook
• Plugin URI: https://gist.github.com/csalzano/dfd754e0fe8b6ac10731fad8f257c0bf
• Description: Adds multiple webhooks to an Elementor form
• Version: 1.0.2
• Author: Corey Salzano (Modified by Yousef Hekma)
• Author URI: https://breakfastco.xyz/
• License: GPLv2 or later
• License URI: http://www.gnu.org/licenses/gpl-2.0.html
• Put this code inside the function.php file of the theme (better use child theme), and remove the line 1
  */

class Elementor_Form_Additional_Webhook {

function hooks(){
    // Add our additional webhook right here - Don't change this
    add_action( 'elementor_pro/forms/new_record', array( $this, 'manipulate_form_submission' ), 10, 2 );
}

function manipulate_form_submission( $record, $ajax_handler ) {

    // You can add form id for any elementor form that you want this webhook to work on
    $allowed_form_ids = [
        'req_call_back_home',
        'contact_us_page',
        'free_trial_page',
        'get_quote_page',
        'menu_special_training',
        'training_popup_form'
    ];

    // Get form ID and check if it's in the allowed list - Don't change this
    $form_id = $record->get_form_settings( 'form_id' );
    if ( !in_array( $form_id, $allowed_form_ids ) ) {
        return; // Exit if the form ID is not in the allowed list
    }

    // Don't change this
    $form_data = $record->get_formatted_data();

    // Make form data dynamic by removing empty values - Updated section
    $new_data = array_filter($form_data, function($value) {
        return !empty($value);
    });

    // You can add multiple Webhook URLs here
    $webhook_urls = [
        'https://webhook.site/d7c56fb5-4bc3-4699-b5ca-dcaf27d39d6f',
        'https://hooks.zapier.com/hooks/catch/17016624/additional-webhook'  // Add your additional webhook URL here
    ];

    // Send data to each webhook URL
    foreach ($webhook_urls as $webhook_url) {
        $response = wp_remote_post($webhook_url, array(
            'body' => $new_data,
            'timeout' => 15,
        ));

        // Check if the request failed
        if (is_wp_error($response)) {
            $msg = 'There was a problem with one of the webhooks.';
            error_log($msg . ': ' . $response->get_error_message());
        } else {
            // Optional: log success or handle it
            error_log('Webhook sent successfully to ' . $webhook_url);
        }
    }
}

}

// Initialize the class
$elementor_webhook_239909870234 = new Elementor_Form_Additional_Webhook();
$elementor_webhook_239909870234->hooks();

Hey guys,
Any clue about how to handle Webhook responses?
I'm having issues when server response it's not inmediate.

@juanivallejoss Line 34 checks the response for an error. https://gist.github.com/csalzano/dfd754e0fe8b6ac10731fad8f257c0bf#file-elementor-form-additional-webhook-php-L34

If you need to examine the response data, use wp_remote_retrieve_body()