How to Save Elementor Form Data to a MySQL Database

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!

In this tutorial, you’ll learn how to save Elementor form data to a MySQL database.

While Elementor has quite a few “Actions After Submit” options, you can utilize the the Elementor Forms API directly by adding some PHP code to your WordPress website.

If that sounds like something you’re interested in doing, I invite you to follow along in this tutorial.

1. Add Form Widget to Elementor Canvas

Drag and drop the Form widget on to your Elementor canvas. In this example, we’ll be working with the default form in Elementor that has three input elements:

  • Name with id of name
  • Email with id of email
  • Message with id message

This is strictly for simplicity and the concepts in this tutorial will work for any type of input elements or form design. The default Elementor form widget looks like this.

Default Elementor form widget with name, email, and message

2. Create MySQL Table for Data

Next, we want to create a MySQL table in our WordPress database to hold the form data. In this example, the table will have three columns:

  1. Name
  2. Email
  3. Message

To keep things simple, the data type for each of these columns can be TEXT.

You can use phpmyadmin to create the table or do this directly with MySQL on the command line. In either case, I have a video that will walk you through the process.

3. Save Elementor Form Data to MySQL

Finally we can leverage the new_record function of the Elementor Forms API to get the data that was submitted from the form and insert it into our database.

Copy and paste the following PHP code snippet into your WordPress theme’s functions.php file (ideally your child theme). Your functions.php file is located from within your WordPress admin dashboard > Appearance > Theme Editor.

add_action( 'elementor_pro/forms/new_record', function( $record, $ajax_handler ) {
    
    $raw_fields = $record->get( 'fields' );
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }
    
    global $wpdb;
    $output['success'] = $wpdb->insert('demo', array( 'name' => $fields['name'], 'email' => $fields['email'], 'message' => $fields['message']));
    
    $ajax_handler->add_response_data( true, $output );
    
}, 10, 2);

As you can see from the code above, we first get the form data from the input record parameter, and then insert the name, email, and message into our MySQL table.

For good measure, we send back to the client the status of the insert (1 means success, 0 means failure), but this step is optional for this basic example.

Now when you fill out the Elementor form and submit the data, it will be inserted into your MySQL database.Elementor form data that was inserted into MySQL database

Please let me know if you have any questions below.


Meet Tony

With a strong software engineering background, Tony is determined to help as many people as possible start their online busines. Discover why Tony quit his hedge fund job to pursue this mission. You can send Tony a message here.

Leave a Comment