How to Use Elementor Forms API and Access Form Data in PHP

hey guys what's up this is tony such as tech i'm tony and in this video i'm going to show you how to work with the elementor forms api specifically we're going to be looking at how to act upon modify work with that data in the back end and we're going to be doing this through a simple demonstration of building a addition calculator we're going to take two numbers from the client send them to the php backend add them together return the result back to the client and display that on this screen so if that's something you're interested in stick around this will be a moderately technical video but if you follow it step by step you'll know exactly how to take this concept and apply it to your own websites let's take a look [Music] all right guys so before we get into the meat of things let me just show you the plugins and the theme that we'll be using as far as the plugins are concerned we're just going to be using elementor and elementor pro the reason we need elementor pro is to access the forms api as far as the theme is concerned we're going to be using the hello theme but we're going to be installing and using the hello child theme as well if you don't know how to do that i'll link it down below there's a really quick easy tutorial that you can follow for that and i'll also link down the plugin for elementor pro as well so let's get into this so in our pages section we want to add a new page and this is going to be the placeholder for our calculator and again it's just going to be something that we're going to do very simply we're going to add two numbers together so we'll call the page add numbers and just to keep it short and sweet we'll call the page url which they call in this case the slug adder okay so that looks good we'll add all the content in with elementor so you can click this edit with elementor button and if you never use elementor before don't worry it's very easy it's drag and dropping these widgets into your page so you can easily customize an html page but we'll primarily be using the form widget today so i'll drag that in here and you'll see that it's pre-populated with some fields basically we're going to do is we'll get rid of these fields but we want a a button with two numbers to the left of it and the answer on the right so it's just going to be number a plus number b equals c the result so let's go ahead and design that we're going to work on the design first so right here you can see under this form fields section we have name email and message that's corresponding to these three elements so let's get rid of them and unfortunately it doesn't let you have a form with zero elements we have to add a couple of our elements first so let's do that right now i will add um the second or the first element we'll get rid of the message element finally and then we'll add another one and these are going to be our two numbers we'll change the text on the button and we'll reformat things right now so item number one we will make that a number field i'm not going to give it a label uh you know what i will give it a label i'll call this first number and um i won't give it a placeholder this will be required value and i'll do the formatting in a bit but we'll call this field id a and that's just the html elements field id okay so that's good for the first number let's do the same thing with the second number this will also be of type number we're going to give it a label second number and this will also be a required field now i would like these all to to appear in one row so let's change the formatting the first thing i want to do is make this whole form widget take up only half of the page width so you can do that under advanced and under positioning i believe the width you can set that to a custom width and we'll make that 50 not pixels but percent so there we go we're taking up a little bit more but we'll uh we'll adjust that in a bit okay so how do we get these individual elements to come next to each other well you can come in here and for each one you can each element you can see that there's a column width so let's make them each take up 33 percent of 50 percent of the page so the first number is 33 the second number is 33 and then down here you have buttons we'll also make that take up 33 so we have first number second number send let's change that just to an equals sign okay so that's looking pretty good so far let's put the result over here now this is where it gets a little bit tricky but just stick with me for a second we're going to use go back to our elements which you can your widgets which you can access up here in the upper right hand corner and you know typically you would think you would put like a text box in there or something like that a header some type of text but we're going to actually do a custom html element and you'll see why in a bit so right here when you drag it in you won't be able to put it in here by default you'll have to put it below and then when we're editing the formatting of this element we can actually do the same thing that we did before put the width at a custom width and we'll make that 50 percent as well and that's going to take up 50 of the page width okay now we're going to leave the html code blank but we'll come back to it and that's where we'll put the resulting value but before we do that let's actually um i think i think this looks good otherwise let's start oops did i miss that button the button i wanted that to be an equal sign okay so that actually looks good we'll give this it doesn't really matter for this case but we'll give it an id of equals okay so i think we do actually want to add some code some html code into this element right now and i have my little cheat sheet over here i'm going to copy and paste some code into here and this is going to be the overwhelming part the part that i'm trying to avoid but i'll explain it each line and it'll make sense in just a couple seconds so this first block here script is just pulling down the jquery library okay that's something that we need in order to execute these functions down here okay and then basically the the only formatting let's get rid of some of this to make it a little bit less complicated the only formatting that we're seeing here is this paragraph okay so that's your typical html this paragraph element right here and we're just giving it an idea of answer and you'll see like if we wanted the default answer to be a hundred we can do that right like that but we want the default answer to be zero okay so that's just the actual formatting the first line here i'll clean it up a little bit for you the first line here is pulling in the jquery library which we need for this last section which is a script a jquery script that will be actually accessing the resulting value so basically how this is going to work is we're going to enter a number here we're going to enter a number here we're going to hit equals those two numbers are going to go up to the server the wordpress backend and we're going to do the math on it in the back end and then once we have done the math on the back end we'll send the resulting answer back down to the form itself and the form is going to pick it up in this field right here and it's basically going to be this line right here so this element which has the id of answer okay we're going to assign to that that value instead of zero we're going to assign to that value the response data that we get that's named result we'll come back to it we'll we'll explain it we'll bring it full circle but for now just know that's how we're going to get the results these other two lines right here three four lines of code is basically just setting the placeholder values i find it that elementor doesn't necessarily show the placeholder values we looked at that a little bit earlier so let's let me just confirm that and explain what i'm talking about here so there is an option to have a placeholder here in elementor for the first number and for the second number but i notice that sometimes they don't show up so what i like to do is fill out the default value for each one of these as zero we'll get rid of the placeholder for both of these numbers and make sure the default is zero and then when you go back into our custom html code even though this is associated with this element we're accessing these form fields named a and b via html and we're just going to put the default value as 0. you can put 0 0 you can put and i don't know where there's a lag here but every time you type it freezes up so 0 0 and zero for that and again it's it's quirky so i don't know why that zero is not showing up but it when we publish the page we'll see that show up okay let's move on to the back ends so this looks good for now so let's publish it but you know if we go to this page and we try to do math on one plus two we're not going to get any answer what we have to do is write the logic in the back end to actually add these two numbers together so let's go get out of elementor for a second and we're going to go back to our wordpress dashboard and go to appearance and theme editor now when you come in here initially you will probably have the hello elementor theme selected like i said in the beginning of this video we are we want to be working with the child theme not the parent theme directly so if anything goes wrong everything's contained within the child theme because we're going to be writing code you probably also see the error message or not an error message like a warning message when you first come into this this section of wordpress to say like if you screw things up things things can go really really bad and break your site and you can't access it anymore so that's why we're using the child theme so make sure you have the selected theme as the hello elementor child theme okay so here is where we're going to access the forms api and i have this in another tab here for elementor they have a forms api like i also mentioned in the beginning of this video and specifically this is going to allow us like i said earlier to get those two numbers a and b we're going to pass it from the client's web browser over to the wordpress backend server and work on it do some math on it there and then return the results so the one that we're specifically interested in is number eight here forms new record action i'll be the first to admit this is pretty poorly documented um but that's why i decided to make this video to help you guys out with making custom forms and accessing the data on the back end you know form data that's not just name email address phone number stuff like that you want to actually act upon the data and do something with it so they have this example here which we're going to actually copy and come back over to our hello elementor child theme we don't want to work with a style sheet we want to work with the theme functions and just under the last line here we can paste that code in and let's take a look at it real quick so when this function executes which is it's going to execute when that form data comes to the back-end server we want to first make sure that it's the form that we're talking about so what was our form name let's go check that out so edit with elementor the name of our form we just want to look at this the form itself and the name of our form is new form right now let's call it adder okay with a capital a so we'll update that and we'll come back over here and we'll say adder in here because it says adder replace my form name with the name you gave your form so it's basically saying get the name of this form if the form is not equal to adder we don't want to do anything with it it's another form on the website we only want to work with the adder form okay this block of code is basically going to extract out the form data and put it into a nice dictionary for us and if you're not familiar with computer science terms it's just basically name value pairs so the name of our field is a the value is one the name of the other field is b the value is two something like that okay this last three lines of code four lines of code we're gonna get rid of it we don't have a web hook we're just going to return the data directly so what we want to do here is to actually act upon the the data that we sent over to the backend so let's first write a function to do that so it's going to be a very simple function we're going to call it add two numbers we're going to take in our um let's take in a and b okay those are our two inputs to our function and we're going to say c equals a plus b that's that's really all our function is going to do it's going to take the value of a the value of b add them together and give us c so we're going to return c to whoever called this function okay so let's call the function and i have to use my cheat sheet about back here again we're going to set up another dictionary so it's going to look something like this so output so this is a this is a variable a new variable that we're making so the output is going to have a value or a name of result and the value is going to be what do we call our add to numbers and then it's going to be a and b but where do a and b come from a and b come from our fields right here so we want to say that a is equal to fields of a okay and b is equal to fields of b let me just explain this so like i said these are name value pairs so this is a variable with um the name of the let's go back to our form the name the id i should say the id of our form itself so this element right here this form element has an id of a and this form element the second number has an id oops we didn't give it an id of b that has an id of b so we're taking we're accessing that in code by extracting that id from the fields variable that should make more sense so we have a we have b we're going to pass those two values to the function that we wrote the add to numbers function and we're going to put the result in another variable a name value pair called output and the value of or the name of that is going to be results okay the last thing we want to do and i'm going to pull this from my cheat sheet is to add the response data to the handler and this is this is the part that you really have to understand fully this is just the syntax for returning the result to whoever called it so we're going to add the response data named output to our handler which we defined up here okay so let's update this file and if everything looks good it'll save it so file edit it successfully let's go back to our form just make sure everything looks okay i want to double check that our html element looks good here and this this will make a little bit more sense now because [Music] like i said before we're going to take this id this this element remember this element right here has an id of answer okay that's what's showing the zero right now we can change it to one or something else and that froze up on me again so that's that's what we're acting upon that element that i'm toggling right now and we're going to assign to that value the response data that we get back from submitting the form and we're going to access that and why didn't that send to zero and we're gonna get the result so why why do we say dot result well because that's what we called our variable in our php code here that's the the name that i was talking about that could be something else that could be answer that could be um final number you know something else but we're in this case we're calling it result all right let's test it out let's see if it works so let's update that we already updated the back end code let's go to our website site five dot x y z slash adder and if everything's in place the way it should be we should be able to type in 1 plus 2 equals 3. that's really cool let's try it again let's do 5 plus 8 what should that be because 13 you're right all right let's let's dig dig behind here and just just to bring things full circle let's open up our developer tools that's if you're using google chrome you can go to view developer developer tools and that'll let you see kind of what's going on in the back end here so let's type in two more numbers two plus two and let's make it two plus three so they're different equals five the data that we're getting back if you filter your if you're under the network profile here and you filter everything by xhr you'll see that you get an ajax response back from the php back end and you can kind of parse out the data that we send back so this is kind of like reverse engineering the code that we just wrote so we see here that we have some data and inside the data there is by default i don't really know how to change this but this is just what it is by default there is a name value paired the name is one and the value is a another name value paired called result of five and that's exactly the corresponds to the code that we wrote the result and the answer being 5 in this case so every time you do that you get back another data structure from the the back end and you'll see it let's do it again let's do seven plus three you'll get back another response admin ajax.php response and if you drill down in here you can see that the result was assigned to 10 in this case so obviously there's some formatting cleanup that we can do you know this this is 10 is a little bit high we could put a plus sign in between here we can change the colors change the formatting more elementor allows you to do all that um we could add some logic checks in the back end to make sure that we're not you know sending number like letters or k special characters we only want numbers in the back end there's there's plenty more to do to improve upon this this simple calculator but the purpose of this video was just to show you that it is possible to access the forms data in elementor that was something that i was really curious about i actually reached out to elementor support about it and they pointed me to the forms api but like i said it wasn't really documented that well so that's why i went ahead and made this video for you guys just so you can kind of see the code that i'm working with and if by the way you do want to do something similar to this i'll have code snippets for you on my website i'll have that also linked down below if you're interested it um that's about it guys thank you for watching if you have any questions let me know in the comments below i know this was a little bit more technical a little bit more in depth than most of my videos but i kind of want to try out a little bit more complicated technical videos like this and see how you guys like it or if it's too much let me know as well if i need to slow down if something doesn't make sense i'll be more than happy to help you out so yeah thank you guys if you'd like to give it a thumbs up and if you want to see more videos like this consider subscribing and if you do i'll see you in the next [Music] video [Music] you

Channel: Tony Teaches Tech

Views: 38,757

Keywords: elementor forms, elementor pro forms, elementor forms api, elementor pro forms api, elementor form actions after submit, elementor custom form action, elementor developer, Form New Record Action, elementor ajax, elementor jquery, elementor php, elementor api

Id: Mdn2gFodpy0

Length: 22min 42sec (1362 seconds)

Published: Wed Aug 12 2020