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.

YouTube video

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

How to Handle Multiple Forms

If your website has multiple forms, add an if block to the elementor_pro/forms/new_record code like this:

add_action( 'elementor_pro/forms/new_record', function( $record, $ajax_handler ) {

    if ( 'MY_FORM' == $form_name ) {
        // logic for MY_FORM
        ...

    } else if ( 'MY_OTHER_FORM' == $form_name ) {
        // logic for MY_OTHER_FORM
        ...

    }
    ...

}, 10, 2)

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.

28 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
  6. Hello Tony! This is GREAT! thanks for sharing!

    There is a way to customize the elementor pro form adding a maxlength validation to the input form.php?
    Something like that:

    I am searching all over the web and i can’t find anything similar.
    Do you know how to do it?

    Thanks for take a look!!!

    Ernst

    Reply
  7. Hello Tony! Wishing you well! I am using an Elementor custom form that automatically create new subscriber user BUT skipping the email submitting. I mean 1 form creates new fields in specific table in DB AND automatically create a new user. I hope this can be understandable. And with your amazing script, all the data can be stored into the database.

    Your code works like a charm, everything works great BUT i need to add an 18 characters validation in one of the input fields but honestly i don’t know exactly where tu make that customization.

    Can i send you the script to your email so you can please check it out and tell me if you can add that specific filter validation to the form and integrated with all the big code. I paypal you for that improvement if needed.

    Can you please help me with that?

    Best Regards

    3rnst

    Reply
  8. This was very helpful! I am really struggling to add more forms to my code. I have different forms that need to go to different tables. I’ve tried the code suggested for a different database, but the tweaks I’ve made keep failing. Any suggestions?

    Reply
    • If you’d like to have multiple forms, you’ll need to add an if block to the elementor_pro/forms/new_record code like this:
      if ( 'MY_FORM_NAME' == $form_name ) {
      // do something
      } else if ( 'MY_OTHER_FORM' == $form_name ) {
      // do something else
      } ...

      Reply
    • Are you using phpmyadmin to access your MySQL database? If so, phpmyadmin allows you to easily add another column to your table via the user interface.

      Reply
    • This will work wether you have a child theme installed or not, but I highly recommend installing a child theme. Otherwise when you edit functions.php, you’ll find lots of other code in that file. This goes for other themes like Medicalpress. If there is a child theme for Medicalpress, use that. If not, this will still work, but just be careful when editing functions.php.
      Please note that this only applies to Elementor Pro.

      Reply
  9. hello

    this function not working. Please help me

    add_action( ‘elementor_pro/forms/new_record’, function( $record, $handler ){
    $form_name = $record->get_form_settings(‘form_name’);
    //Check that the form is the “create new user form” if not – stop and return;
    if (‘External Agent’ !== $form_name) {
    return;
    }

    $raw_fields = $record->get(‘fields’);
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
    $fields[ $id ] = $field[‘value’];
    }
    $cust_name = $fields[‘cust_name’];
    $number = $fields[‘number’];
    wp_remote_get(‘https://www.namadomain.com/index.php?entryPoint=externalAgent&number=’. $number . ‘&cust_name=’ . $cust_name . ‘&name=’ . $name. ‘&type=’ . $type. ‘&company=’ . $company);

    }, 10, 2 );

    Reply
  10. Hi Tony, thanks for your amazing tutorial!
    My question is: how can I insert data into an external database?
    Thanks so much

    Reply
  11. Hi tony thanks for the video that really helps. but i got a problem, Is this code only works in name, email and messages? cause I’ve tried to add more value in column like subject and phone but it doesn’t work at all, and when i tried to delete the other value it works,

    Reply
  12. Hi, thank you for the tutorial but I have one question, what if I want to make multiple forms. Do I need to copy the whole code or what?

    Reply
    • If you’d like to have multiple forms, you’ll need to add an if block to the elementor_pro/forms/new_record code like this:
      if ( 'MY_FORM_NAME' == $form_name ) {
      // do something
      } else if ( 'MY_OTHER_FORM' == $form_name ) {
      // do something else
      } ...

      Reply

Leave a Comment