How to Use the Elementor Forms API to Access Form Data in PHP

Elementor Pro gives you the ability to perform actions after submitting your form data. These “Actions After Submit” include sending emails, redirecting to another page, and integrations with Mailchimp amongst others.

As developers, we need more control over our form data than what’s built into the Elementor editor. What if we want to build a calculator and process our form data in the backend? Well, that’s where the Elementor Forms API comes in handy.

With the Elementor Forms API, we can pass our form data to the WordPress backend with AJAX, process the data in PHP, and return data back to the client with JQuery.

In this tutorial, you’ll learn exactly how to do that. We’ll be building a calculator that simply adds two numbers together.

There are two main components to this setup: the frontend form and the backend data handler.

1) Frontend Form Design

The design of our calculator consists of a Form widget containing two form elements of type number and one form button.

The number inputs have an ID of “a” and “b” respectively. In Elementor, the ID of a form element can be set in the ADVANCED tab.

The only other widget is an HTML widget with the following HTML code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    jQuery( document ).ready(function( $ ){
        jQuery( document ).on('submit_success', function(event, response){
            document.getElementById("answer").innerHTML = response.data['1'].result;
        });
    });
    $( document ).ready(function() {
        $("#form-field-a").attr("placeholder", "0").val("").focus().blur();
        $("#form-field-b").attr("placeholder", "0").val("").focus().blur();
    });
</script>
<p style="font-size:2em" id='answer'>0</p>

• The first JavaScript block pulls in the JQuery library.
• The jQuery block assigns to the HTML element with ID of answer the value of the response data named result.
• The document ready function assigns a placeholder of 0 for both form fields. I found that the built-in placeholder in Elementor is finicky and doesn’t always show up.
• The last line defines the HTML paragraph with ID of answer which will display the result of the addition.

Please note that there are no “Actions After Submit” as we will be working with the form data in the backend with the Elementor Forms API.

Pin

2) Backend Data Handling with the Elementor Forms API

In the WordPress admin dashboard, we can edit our theme’s functions.php file by going to Appearance > Theme Editor.

• I recommend that you install and use the Hello Theme, a WordPress theme built by Elementor.
• I also recommend that you edit the functions.php file for the Hello Child Theme rather than the Hello Theme directly.

Below any existing code in your functions.php file, paste the follow PHP code.

function add_two_numbers($a, $b) {
    $c = $a + $b;
    return $c;
}

// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
    //make sure its our form
    $form_name = $record->get_form_settings( 'form_name' );
    if ( 'Adder' !== $form_name ) {
        return;
    }

    $raw_fields = $record->get( 'fields' );
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }

    $a = $fields['a'];
    $b = $fields['b'];
    $output['result'] = add_two_numbers($a, $b);
    
    $handler->add_response_data( true, $output );

}, 10, 2 );

You’ll see here that we first simply check if the form name matches up with the form name that we defined in Elementor. Next, we execute some generic code to unpack the form data into a name-value pairs data structure.

With the form data at our disposal, we extract the value for form field “a” and “b”. We pass these values to our add_two_numbers function which does just that.

Finally, we add the response data of the resulting value from the addition to the AJAX handler. This will send the data back to the client where we’ll use the JQuery code from above to get and display the answer.

In Google Chrome’s developer tools, we can visually see the data structure that we sent to the client by accessing the Network tab and filtering by XHR.

Pin

My hope is that this Elementor Forms API tutorial helps you process your form data in your PHP backend. While this is only a simple example with much room for improvement, my goal is that his demonstrates the concepts of how to directly work with your Elementor form data.

If you have any question, don’t hesitate to ask below.

Pin