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.
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:
- Name
- 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.
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)
48 Responses
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?
Take a look at the Elementor Forms API documentation for new_record. Notice how there is a if block that checks the name of the form before processing it. You can add multiple if blocks like this to distinguish between forms.
@Tyler be sure to include the following line just before if block
$form_name = $record->get_form_settings( ‘form_name’ );
hello tony it was a great help but I was trying to link multiple forms in different pages with different table there was no successful connection can you give an example for that too. Would be a great help
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,
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']));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.
Hi Alex! To use your own custom fields, please change the “id” of the field (under the Advanced tab in elementor) and reference this in your functions.php file
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!
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
This tutorial which goes over basic CRUD (create, read, update, delete) PHP operations in Elementor/WordPress https://youtu.be/poYpLnYOp3g
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
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
Hi there. Unfortunately I’m not taking on new clients right now.
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?
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
} ...
Thanks Tony! How can we add a column and add the field id to it?
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.
Does this only apply to the child elementor theme, whereas I use the Medicalpress theme?
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.
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 );
What is the error you get?
Hi Tony, thanks for your amazing tutorial!
My question is: how can I insert data into an external database?
Thanks so much
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,
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?
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
} ...
Thank you, but how can I use an external database to make it like this?
Please see this post. You can change localhost to the hostname of your external database.
I cant save my submit data to my database
Even the code was right , the data was not saving to my database
I get The form was submitted successfully, but I don’t see anything in the database
Hi Tony, This is great video, Your video helped me a lot.
But I want to know one thing, I want to make a website 4 forms, they want to send the information of those forms in different databases, is it possible?
Thanks
For multiple forms, please see these instructions
Brother, I am new, maybe I could not use this code properly, can you tell me please, how can I use this code. I am really sorry for wasting your valuable time.
Thanks man! This saved me alot of work!
Only question i have, i noticed there is no check on the variable’s for injection and that kind of stuff. Is this something that elementor does automatic or do i need to add the security myself.
Good question. You’ll need to add these types of checks yourself.
Hi tony, do you have a tutorial of displaying data from database into a table ?
Here is a tutorial that will explain how to do that on WordPress
Great tutorial. I am trying to update usermeta table in WP after the form updates with some additional values based on the form input.
I have tried changing the $output[‘success’] line to update the terms_set meta_key for the current user_id (collected from the form data):
$output[‘success’] = update_user_meta( $user_id, ‘terms_set’, $update_terms );
This returns an error on the form and doesn’t update in the database the way the update_user_meta() function usually would.
Any idea why?
Not sure. Perhaps you can surround your call to update_user_meta with a try/catch block and return the PHP error to the client
Great Tutorial Tony,
I need to add another insert just after: $output[‘success’] = $wpdb->insert(‘demo’, array( ‘name’ => $fields[‘name’], ’email’ => $fields[’email’], ‘message’ => $fields[‘message’]));
Do you think I can duplicate this instruction and edit with other parameters?
Thanks
Hi Tony, I would like to ask how do I code an update query with operational. I do it in a localhost like this, $sql = “UPDATE `database_name` SET `column` = column – ‘ $variable ‘ WHERE `ID` = 1 “;
How do I convert this?
Hey Toni,
thank you for your grateful tutorial 🙂
I had some problems selecting the right form. In Elementor I set the form name to “demo_form” also the form ID to “demo_form”.
I use this code:
add_action( ‘elementor_pro/forms/new_record’, function( $record, $ajax_handler ) {
$form_name = $record->get_form_settings(‘form_name’);
if ( ‘demo_form’ == $form_name ) {
$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);
but it doesn’t add the data to the database. If delete the if-block it works well. But I have other forms on my website and I don’t need that data of other forms.
Can you help me?
Thank you so much c:
PS: Also try without “$form_name = $record->get_form_settings(‘form_name’);”
I created the same form with this code from instruction above.. but this does not add the data in the database..
I also tried changing the “form_name” in the $form_name = $record->get_form_settings( ‘form_name’ ); to my actual form name which “testForm” but still no result..
Greetings Tony, grateful for your code, it works perfect, in different forms and variables that fit it, definitely great … he asks me is simple, in my form I have a state select field, and in my database the states, I want to fill that select field of my elementor form with the data from my database ?. You have any tuto to see this?. Thanks in advance
Hi Tony, a question, could you put an example of how to cast various forms, since I tried using the recommendation you give in the tutorial, I did several tests in various ways and none of them worked for me. the forms were sent empty or gave an error … greetings and success
Hello, I wrote the codes for the form I want using HTML and created the database, but I want to link it in the correct way, because I do not have Elementor Pro.
Please modify this code because I only have elementor
add_action( ‘elementor/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(‘courses’, array( ‘name’ => $fields[‘name’], ‘id’ => $fields[‘id’], ‘number’ = > $fields[‘number’], ’email’ => $fields[’email’], ‘Job’ => $fields[‘Job’], ‘Aff entity’ => $fields[‘Aff entity’]) );
$ajax_handler->add_response_data( true, $output );
}, 10, 2);
Hi Tom, thanks for the video a million times. Do I have to activate the child theme before adding?