How to Save Elementor Form Data to Your Database

hey everyone this is tony teaches tech i'm tony and in this video i'm going to show you how to save your elementor form data into a database now there's definitely different solutions different ways to go about this but this is going to be a custom solution we're going to be saving the data that the user enters into our elementor form directly to a mysql database so let's go ahead and get on into the tutorial here this really doesn't matter i'm going to be working with my video production company swamp swampview productions that i run with my friend what we're going to do is go to the dashboard and you want to make sure that you have elementor installed so i'm actually not sure if you need the pro version i do have that installed but either way i'll have a link to elementor down in the description below so anyway let's go into our pages section and we're just going to make a page a demo page we'll call it demo data test something like that and we'll edit that with elementor and just to keep things simple we're going to look for the form widget we're going to drag that into our layout here and we're just going to use the basic you know their default form with name email message and that does not have to be the case at all you can have you know numbers or checkboxes or whatever but just to keep it simple like i said we're just going to use these fields the goal here we're going to publish this the goal here and we're going to look at it is to when somebody enters their information so like tony tony at tony teaches.tech and hello love your site when somebody sends this clicks that button to send it we want to insert that data directly into a database okay and if we come back over here to the elementor editor what we're doing right now in this actions after submit tab is we're sending ourselves an email and that's great but we don't actually want to do that there are these other solutions that i was alluding to but none of them are custom solutions right i mean the closest that you'll get to that is a web hook but we don't even need a web hook we can use the built-in hooks that elementor gives us and that's how we're going to be able to insert this data into a database directly so let's go ahead and since we removed that email action let's just update it there is going to be no action but behind the scenes there actually is so let's take a look one more thing before we leave the editor under form fields i just want to take note of what the id of these elements are so for the name field right here that has an id of name as you would expect email same thing it has an id of email and message and id of message so that's good we know that let's go ahead and first create our database table that we want to insert this data into and for me i'm using phpmyadmin you can definitely do this on the command line phpmyadmin is probably easiest if you have access to that so i do have that open here in another tab in the database for my my website swamp view is this one right here so i'm going to expand that and i'm just going to make a new table here in that database and the new table is going to have those three columns those three types so it's going to be name email and message and just again to keep things simple just make these all text text of type text right and um i think we're safe to keep everything the same so let's go ahead and save that oops we have to name the table so what should we call our table um do i have something i'm looking at my cheat sheet over here do i have a name for that yes i just called it demo so we'll call it demo and we'll hit go and if that works uh not sure what happened here let's refresh the page i don't know if that actually created that table for me or not let's check it out i don't think it did so bear with me for a second oh it did okay so here it is we have our demo table it's just a little bit laggy right now and i just want to show it to you when it loads what the the structure of that is um maybe it didn't okay so it created the table but it did not add those columns i don't believe so let's let's try that one oh it did okay it did so if we look at the structure of the table um for demo we should see yep so we sorry about that we have name email and message three columns no data in the table yet so how do we get the data from our form here in elementor to the database well if we go into our wordpress admin dashboard we actually don't need to do anything else in here unless we want to make changes but that's not the case we actually go to our wordpress admin dashboard go to appearance and theme editor now just real quick i highly recommend that you install the child theme if you're using hello to install the hello theme to install the hello child theme or whatever theme you're using to install that child theme so that you're not working directly with the core functionality of your wordpress website i'll have a video about that that i'll link in this video or down below so i am using my child theme as you can see here and what i want to do is go into my theme functions.php file and just at the bottom or wherever you want to put the code come down in here and i will have this code again linked down in the description if you don't want to type it but we want to paste the following code and this this i found um the structure of this code just google elementor forms api that's where this comes from most of it but except for the database stuff okay so basically this is a hook that anytime a form is submitted um this this function right is going to execute and it basically takes two arguments the record and the the ajax handler so these first few lines up here is basically just copy and paste that that's going to take your data from your your that your user inputs into the the fields the form and put it into a an array it's more of like a dictionary key value pair called fields okay and then these next two lines here is really what the core of this tutorial is about this is actually going to take that data and insert it into our database so right here this is just necessary to access the database that's associated with your wordpress instance and what we're doing here is we're asking that database or yeah we're taking that database instance and inserting the following data everything in between these two parentheses so the table we're using is called demo we just created that and we have an array of data fields that we want to add so into the name column we want to add the record that the user entered in the name field same thing for email whatever the user entered into the email field and message whatever the user entered into the message field so that's the basic structure for how we're going to get that data into the database and then i'm simply just assigning the value of whether that's successful or not into this variable called output and we'll return that back we're not going to use it but that's just something that i wanted to show you how to do so let's go ahead and update this file we'll save it and that is an instantaneous change so if we go back to our uh test web page here i'll just refresh it just for good measure and i'll type in some some dummy data here so we'll say billy billy billy gmail.com and we can say um keep up the good work tony okay so we'll go ahead and send that hit the hit the button right and we'll go back over into our phpmyadmin page and let's see refresh and if everything goes according to plan we should see that data i have no clue why this is taking so long today um maybe i'll just refresh the page all right so there's our data so we're looking at the serial um i'm sorry not the the swamp view database and it just closed on me but anyway while that's loading we can see that we now have billy's name his email and his message in our demo table so that's that's cool that's exactly what we wanted to set out to do let's just try it one more time we'll say sally sally gmail.com and i'll say thank you tony for this tutorial okay let's actually let's do this we'll look at their developer tools so if you're using chrome view developer developer tools um just so i can show you the the result of this and we'll go to the network tab hit on a filter of xhr and we'll send that and the form was successfully sent and you can see that we get that um like i was talking about that return value uh is it in the header it's not in the header it's in the response okay so in the response you'll see that um we see our return value of success equaling one okay and just to make sure you understand where that's coming from that was this uh this output that we're returning here so the key is success the value is one so let's go check on our database um i don't know what the let's i guess try to refresh again see if that works yeah this the the website the hosting company that this is hosted on is not doing too good today we'll refresh the whole page and there we go we can see sally's information sally sally gmail.com and thank you for this thank you tony for this tutorial um that's it that is how you insert data from your elementor forms into a database this was a very basic example but like i said throughout this tutorial here you can make it more complex by adding different types of fields and doing some you know validation on the data that the user inputs so like for example if you're collecting an email address and the user enters like some numbers instead of an email address you can actually come back into your code on your wordpress website in the functions.php file and do some validation of if that looks like it looks like an email address or not something like that right and then instead of returning successful equaling true down here on line 41 you can return false and handle that some other way so like i said basic example but that should give you a good idea about how to do this guys if you have any questions about saving elementary form data into a database let me know in the comments below i'll do my best to help you out and definitely if you got some value out of this video please give it a thumbs up i have other videos about elementor on this channel so check some of them out please subscribe and if you do i'll see you in the next video [Music] you

Channel: Tony Teaches Tech

Views: 29,452

Keywords: save form data elementor, elementor save form data, save data to database elementor, save elementor data to mysql, elementor insert data to mysql, elementor forms, elementor pro forms, elementor forms api, elementor pro forms api, elementor custom form action, elementor developer, Form New Record Action, elementor ajax, elementor php, elementor api, save elementor form data

Id: tw4CO3u81Ts

Length: 12min 45sec (765 seconds)

Published: Tue Oct 13 2020