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.

9 thoughts on “How to Save Elementor Form Data to a MySQL Database”

  1. Hello, Thanks for the amazing videos and “not using pluggin” lol, please what about the case of multiple forms on same websites that need to be saved in different database
    how can i append the code for that?

    Reply
  2. Hi Tony,
    This is just what I was looking for. Thanks! I put the code in my own plugin (had to seperate the function from the add_action, but it works). Is there any objection to doing it this way in your opinion?
    Furhtermore I would like to put the data from the form in a seperate mysql database called “mycontacts”. This database has the same credentials as my wordpress database. I tried to change $wpdb to “mycontacts” but this raised an error. Do you think this is possible?
    kind regards,

    Reply
    • Hi Berry, it is most definitely possible to insert your data into a separate database. You’ll need to change the wpdb line to something like this:

      $output['success'] = $wpdb->insert('mycontacts', array( 'name' => $fields['name'], 'email' => $fields['email'], 'message' => $fields['message']));

      Reply
  3. Great post Tony! I can replicate when I use the default fields: Name, Email, Message. But how do I change one of the form’s field name to something else? For example if I wanted to change the Name field to EmployeeID, I change the label in the form to EmployeeID and don’t change the functions.php code and everything still works. But if I change the functions.php to the new field name the data no longer inserts into the database. Not sure what is going on.

    Reply
  4. Thanks man, simple fix so don’t know how I missed it. Wanted to say checked out your about-me page while on the site and inspirational story, keep it up!

    Reply
  5. Hello Tony,

    Thanks a million for this tutorial. What is the best way to allow the user to also edit what they have submitted in future? So pull the database from php database, edit and save.

    Thanks
    Naresh

    Reply

Leave a Comment