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

by

Hey there! Some links on this page may be affiliate links which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support!

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.

Elementor banner adPin

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.

AJAX response data from Elementor Forms API in Chrome Developer ToolsPin

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.

Elementor banner adPin


Meet Tony

With a strong software engineering background, Tony is determined to demystify the web. Discover why Tony quit his job to pursue this mission. You can join the Tony Teaches Tech community here.

9 thoughts on “How to Use the Elementor Forms API to Access Form Data in PHP”

  1. Dear Mr. Tony,
    i tried the same code to insert data into the table demo. It is not working. What would be the reason ? Any suggestions ? I am a beginner.

    Reply
  2. Great tutorial Tony! Just want to add that in the line 10 in the functions.php code, you should change ‘Adder’ by ‘form_name’, so it should look like this:

    if ( ‘Adder’ !== $form_name ) {
    return;
    }

    Reply
  3. Hi Tony,
    Great tutorial. Do you know if there is a was to have a range slider field on elementor form. And since elementor form can save submission database, is it possible to save the value to the submission database?

    Reply
  4. Fantastic Tutorial!! Unfortunately any variables that are created within add_action() are not accessable from anywhere else in functions.php. Is there an easy way to do this? I’ve been wracking my brain over it all day.

    Thanks!

    Reply
  5. Is it possible to insert in a field of the form a value that is the result of a query on the database with values inserted in the fields already filled in?
    Example:
    filled in form data [field id = “city”] and [field id = “typology”] (I have not yet submitted)
    [field id = “value”] = $ wpdb-> get_results (“SELECT value FROM mytable WHERE city = [field id =”city”] and typology = [field id =”typology”]”);
    Tanks

    Reply
  6. Mr. Tony,
    How to populate a select ‘field2’ based on the selected option of another select ‘field1’ in elementor pro? Is it possible in pro ?. Regards.

    Reply

Leave a Comment


The reCAPTCHA verification period has expired. Please reload the page.