 Welcome back to the channel. If you've seen this video of mine about submitting contact form 7 forms and data to an external API or email, you should have probably been able to do a couple of things. But I got a couple of people asking me questions about what happens if I have a dropdown or a file uploaded and that's what I want to experiment with today to share with you. I just want to do something like this where we're going to send this same data to an external API or even to email. If you're interested in this, then let's dive into the code. So in my edit, I'm going to go into the WP content. I'll open up a new plugin in here that I'm going to call CF7 trap API. And I'll copy this and I'm going to make a new file inside here that's going to be a PHP file. And after doing that, I'll open up PHP right here and then I'm going to add the comments for my plugin to start by using a snippet that I have in my editor. So I'll say this is a contact form 7 form trap. Just need to correct this right here. And then I'll change the plugin link to my github where I'm going to save all of this github.com slash and you can be able to find this particular code on this github link that we have here so that you can be able to check out the code and see if there's anything that we left out or you feel like you need to just check out the code and use it as you want. This will be in the video description in any case that you can pick it up. So right here, I'm going to change this to take your price. Get contact form 7 data and send to API. So I'll just change this. I'll give this a JPA license so that you can pick it up without any trouble. And then I'll just add a text domain which I'm going to use as my plugin right up here. So the first thing that I will do is I'll define do some security measures and I'm going to say if that is not fulfilled, then we should die. And what we want to fulfill here is that we want to check if the app's path has been used, which is basically a WordPress constant that is used when these particular plugins are run. And if that's not positive in terms of check, I'm going to say unauthorized access and that will stop the code from running and the hacker will be left standing without thinking of anything. So the first thing that I will do here is I'm going to add an action and inside here it requires about four things but one it requires the hook ID or the name of the hook. Then you have a function here that you're going to run. I prefer not to do anonymous functions. So I'll say take a press contact form seven data and after this you can have things like priorities and then you can also have the number of arguments you're passing in maybe the two or three or it's just one. So for now I'm just going to leave this here and I'll add the semicolon right here. So the hook that we are going to use is wpcf7 mail sent and this one is going to check for whether the mail has been sent and then it will pass the data in here into this function. So let's write this function. I'll add it there. I'll add the name to it and I'll add these brackets right here and the one thing that we get from this hook is actually we get the contact form. So I can check the contact underscore form. That's what I'll have here and then I'm going to use this to check for the forms title to see if I'm actually running the right form. This should not be happening on every form. It should be happening on the right form and then we can do the rest of the code right here. So let me go back to my wordpress install and I'm going to set up my form. We'll be able to see what data is coming in from here and save it right here. So if you don't want to see me set up the form you can skip that particular section by checking in the description you will see that there are video chapters. So you can go to the next part that says we are coding and we have skipped the whole process of making up the form. So otherwise if you want to see me create the form let's continue the video. So I've activated my contact form seven here and I'm going to create a new form and in here I'm going to call it web API and inside here I'm just going to delete all these fields that we have here and I'm going to start afresh so we want to have a text which is going to be required and it will be a name so we can have a placeholder right here we'll not have a default value no classes I'm not going to style it after adding our text we want to have an email I'll make that also required we'll have a placeholder right there and then we're going to have a drop-down menu which I'll say is also required and we're going to add options right here line by line so I'll say someone has to choose maybe a particular type of food so we have spaghetti we have onion rings we are going to have rice and then we shall say someone can probably get stew so we won't allow multiple selections we'll just say let's allow only one item so I'll insert that tag as well and then we're also going to upload a picture for them to tell us who they are so I'm going to add a file right here I'll say this is required the file size can be those many number of zeros I'll add a PNG I'll add JPG I will add GIFS I'll add also BMP for bitmaps I'll click to insert this and those are the files that are accepted and then we'll finally add our submit button here which I'll say send and I'll click the insert tag here so after setting this up I'm going to go into the mail section of course this is telling us that it will require us to add all this information we'll send it to this email it will be from this link the subject can be anything but I can just say web API data that will be the subject I'm just going to copy this email and I'll paste it down here as the email to reply to so in here we need to pass the arguments that we have in this form but we cannot quickly see them from this section so I'm just going to save this for now so that we can be able to pick these items easily so I'll copy this and then I'll paste them right here so in the message body that's the information we want to get here the name shall say email we shall talk about the food that is chosen and then we shall say maybe picture so that will be sent to us and we're almost good to go so everything else is okay I can leave it as default I'll hit save here and you'll see that our form is confirmed it's all good I'll copy this and I'll put it on a page so I'll create a new page right here CF7 form and then I'll look for the short code block right here and then I'll paste in this form I'll click publish right here so we're going to be looking for the web API form right here when we save it I'll go ahead and look at this so that we can see it now it's a little bit hard to know what's going on here because I set up my form poorly let me just go back a step and just save a couple of things to make sure that we are doing a very nice form so I'll edit this I'll just add a label so I'll say label I'll say 4 and then I'll send name right here and then at the end I'll close off this label this label is going to be for this particular field so I'll copy this and put it here and then we are just going to basically do the same thing I'll copy this paste it here and this will be for this email and then I'll do the same for the select so just I choose your food choose your food and then here it's supposed to be email and then the food will be for menu 30 and then I'll just copy this finally and say send us your picture send us your picture and I'll hit save right here we shall open up our form again at least now we can see something the name will be take a press the email will be drawn at dough.com we shall choose to have rice we can browse for a picture from our computer I'll just add this picture right here and then I'm going to click send and you can see that our form works really well so let's go and trap to see what information we get from each particular form so I'm going to go back to my code and in my editor here I'm going to check and say if and here the condition we have to meet is if the contact form that we have here we're going to look for the title on this and we're going to say if the title we get is actually equal to web API web API because that's what we set up for the title of our particular form that we're using I'll just add some space here so that you can see this clearly if we are getting information from this form so in here I'll set up a variable that's going to be for the submission and in the submission we're going to use the WP CF7 class that's what we're going to be looking for and we're going to add underscore submission so this particular class has a method which is called get instance and this method is actually a static method so that's why we're adding these two full columns right here so we're going to get the instance of this WP submission class now if you're not well versed with what object-oriented programming is or which is normally called OOP object-oriented programming has classes and in the classes there are functions which we usually call methods so this method is what's being called so whenever we trigger a form and we send data this class will be called and this instance will be got so from that submission I want to get something from it I want to get a particular method which is actually called getPostedData and we want to get that method chained in here and what I'm going to do is I'm going to say this is our data and I'm going to store it in a variable so we're declaring this and then we're adding one method to get this data and we're saving it as data here now in order to see what's coming in I'm going to use error log underscore log which is a PHP function and it's going to allow us to log our data in this debug file that you see here under wp content and that can only work if you've turned on the wp debug log and you make sure that it's defined as true inside your wpconfig.php so make sure you have this line in this file and then you'll be able to debug and log all your information here so this is what I use to help me to see what information I'm getting so I'll add a printR function as well that's going to get this data that we have here and then we're going to add a comma and add the word true because this printR actually is going to convert our text into a string that error log will finally accept so I'm going to go back to my browser and in my browser right here I'm going to add a new name and say John I'll say John John at John.com John at get.com and then John is going to hit onion rings we shall add a new picture that's going to be this image right here and then I'm going to hit send and after sending this I want to go and check my error log so I'll go back to my editor here I'll look at the debug that we have here and we'll see that my debug is empty so I need to check what the problem is and it's most likely something to do with the check that we have here so I'll go back to my editor I'll look at the form and you'll see that the form here title is actually in lower case right here so let me go and correct this I'll change this right here and say that's our title save it and just to be sure I'm going to go back and check in the admin section and I'll make sure that my plugin is actually activated I'll activate my plugin and then I'm going to come here I'll reload this page let's try to send some data and say me me at me.com I'll choose spaghetti I'm going to add this image I'll hit send so let's go back into our editor I'll look inside our debug log we have this data in this form now fortunately this is a text this is an email this is an array of data so we get what was chosen and then we get this file that has this encoded string now this string comes from contact seven and it's just a coded because what happens is that contact form seven never stores any data on that on the server for you all it does is that it gets that information attaches it to an email and sends it out so once it's sent out that attachment it will always destroy it or it will always erase it from its code what do I mean by that if we go back to our code here I'm going to introduce something that's a little bit different in this particular class there's something called uploaded files and this uploaded files is going to give us whatever file we upload so I've changed our data here we're going to see the uploaded files when we error log them so I'm going to save this I'll come back to my front end here I'm going to just do another ping and say me at memem.com we'll choose to have rice onion rings and I'll add a new screenshot that I have and I'm going to send it and once I do that you check that our debug log is actually going to have quite a number of things ignore my errors that I'm having here you will see that this array that we have now actually has a file path here and it takes us to WPC 7 uploads and we see that this is happening here and we have the name of this particular file and if I come here in this plugin itself if I go into my uploads here and then I look at this you will see that we don't have that file there or if we look in our uploads in 2021 07 you will see that those particular files actually don't exist in our uploads now that sort of puts us off because we can't get the file we can't do anything but I have a little trick that you can use there is a plugin addon that you can actually use and it stores this data when you send it and that plugin is actually something that we can come in our plugin section go to add new we shall look for contact form 7 and we're going to install this contact form 7 database addon and what this plugin does is that it creates a database table inside our database so I'm going to open up my database tools and you're going to see that database table and right now you will see that we don't have any WPC 7 database table in here but once I come to my plugins here and activate this on activation you're actually going to come back to our database tools and you'll see that we have a new table here called wpdb7 forms and right now we don't have anything here but if I come and then add a name I'll add my email and then I'm going to do maybe rice or stew I'll choose to have this image coming in here and then I'll click send this particular tool is going to allow us in here to see that we have forms and when I click on that form you'll be able to see the email that I sent you'll see the name that I used you'll see the stew you will see that debt this was sent and you'll see a file that actually is attached to this now this file is actually downloadable because it has been stored inside our database and if I go back to my editor and just look inside uploads I go to cfdb7 uploads you'll see that we have this file in here it's local and part of our site so with this we can actually be able to send that information to our API so instead of tapping contact form 7 we are going to tap this particular plugin when it has saved this data we can actually pick this data and send it to our own API because that data will be saved so I'm going to just look inside the code of this plugin and we'll see whether we have some action hooks that we can actually pick so here we have the function that creates the table we have the function on activate which basically creates our table we have the function that upgrades our table and then we have a function to deactivate and if I scroll you'll see this function that says before send email and you'll see that we have our files here uploaded we store a variable in here and it's the link to the upload folder and once we actually submit our form we get all that information coming in we save a few filters and then in here we actually make a copy of that file and then save it inside our upload folder and that's what this plugin is actually doing so if I scroll down you'll actually see that we have a do action here called CFDB7 before save and it comes with the form data that is actually available for us to use so I'm going to use this do action I'll copy this right here and it's what I'm going to use to get my data and send it to the API so we're going to have a couple of changes coming in here and then I'm going to change the action hook to this I know we shall be getting our data from here so I'll get from data and I'm going to change it to this location here I'm going to just comment everything out here and then I'm just going to error log our form data when we get it so I'll copy this and then I'll test it right here so we are now basing all our code on the new extension plugin that we've added so I'll close this up I'm going to clean out my debug so that we have a clean start and then I'm going to go and send some new files so this time I'll say the police is sending police at police.com I'll change this to stew I'll add a new file with this click open I'll send this our form is cleared once we come to the database here and select the data you will see that in the first instance we had this form that was sent we now have another form that has been sent with our police data that is actually serialized right here so I'm going to go back to my forms as well and just look at the contact forms and you will see that we have this data showing up here and if I go to my editor you'll actually see that we have our data here we have this string of data that actually goes inside our uploads so I'll go to uploads I'll go to CFDB 7 and you will see that we have a similar file with the name L logo with gold and this is what we have here so this makes it very easy for us to actually manipulate and send to our API so I'll just get the link or the URL that takes us to this file folder and then I'm going to patch it and add on this extra string coming from this particular file so this is what we're going to use so I'm going to copy this I'll reduce this down here and I'm going to paste everything that we have here so that we can quickly follow through and be able to make our changes and then number two I'm going to just go back to this form I'm going to pick this code that they use to make this variable which is basically the upload directory and get this I'm going to come back here and I'll say this is I'll paste this and I'll say the upload directory is actually just going to be what we have here so we have this CFDB name and that is brilliant so we'll just get what we have here and we're going to attach it to this and we shall be able to get the link of our files so all I need to do is just get what we have here and then paste it here now in order to get our data here we're just going to say we'll get the form data and I'm going to pass this in as an array so we'll have an array here and inside this array I'll say we're going to have our name so name is here I'll chain it to our form data and then I'm going to pass in this value so I'll just copy this put it here and then enclose it in quotes add the semicolon I'll duplicate this we just need to get this we need to get the email as well copy this paste email here this semicolon won't work in our array we just need to pass a comma and then I'll make this as email and then I'll duplicate this to get our menu so copy this change it here and then we'll get our food and the only difference is that this array comes only with one option so we need to get this bracket and the zero as well to give us our food we don't want to get the array we want to get this final string that comes from the first entry in our array and then finally I'm going to get the upload and this upload is basically going to be what we have here so I'll copy this paste it here and we're going to say from the form we want to get this file so I'll copy this and then I'll paste it here and remove this zero because initially it wasn't part of this particular array item so I'm going to just remove the rest of this code because we don't need it and we have our data here properly which is a good step the next thing that I'm going to do is use the wp remote post so I'll add a semicolon here and I'm going to describe my URL which needs to be enclosed in strings and then I need to also describe what my arguments are and this is usually an array so in this array we can actually pass a couple of things one is we can find passing the method that we're going to use whether we're using a get, a push, a post, an update and in this case we're going to be sending data so we need to use a post the other thing that we need to do is pass in the body and here the body that we shall pass is actually going to be our data here so I can copy this and pass it in here as the option and then we need to get our URL we are going to send this data now what I do usually I use an automation tool and this tool is actually on intergrammat intergrammat is an automation tool that allows you to sort out like your API needs and so much more so you can actually go here and sign up you can use the link that I've left in the description so that I can get a tip of your purchase if you ever purchase from it and that doesn't mean that you will get any extra charge on you so that's one way of supporting the channel so I'll click sign in here and once I log into my account here I'm going to create a new scenario here and the scenario that I want to create is I want to get a webhook now I'll choose this webhook and I'm going to choose one that triggers off an action when it receives the data so the first thing that we need to do here is add a name to our webhook and I'll click add and I'm going to say this is our CFDB I'll say this is our CF7DB data I will not place any IP restriction because we want this to be general but if you want this to be private you can always add an IP and I will hit save after adding this webhook name I'll hit save and you'll see that Integroma tells us that it's now listening for the data to determine what kind of data is going to be coming so I'll need to just copy what we have here so I'll copy that address and then I'm going to come to my editor here and I'll put that address inside my code and I'll save this and what I'm going to do now is just come back here I'll make a new post and say this is someone who is probably an employee somewhere they're ordering for stew they are putting their picture here and then they are hitting send so once that is done and you will see that Integroma tells us that the data has been successfully determined and we can now click OK right here and you will see that it refreshes the data I'm going to add a new module here which will be a JSON module I just want to see my data in JSON format and I will choose to aggregate that data in JSON now I create a link among these two modules and you will see that this quickly picks this as the source module so it's basically picking the data from it and now we need to add a data structure here and I will say my data structure will be CF7 DA data structure I will now click add item here and you're going to see that we expected to have a name which would be a text I will say this is required I'll add that I'll add another item which was our email and that needs to be a text as well I'll add it as required I'm now going to add our food the food is also a text required I'll add that and then we're also going to have an upload or a file I'll say this is image and this image is also going to be a text because it's a long string so I'll choose a text and I'll say that's required as well and add so once we do that I'll hit save here and you will see that this creates a new open dialogue box so that we can actually pick information from our webhook so here I can pass in the name here I can pass in the email here I can pass in the food and right here I can pass in our upload so I'll click OK here and you will actually see that this is going to work out so I'm going to click this to run and now that this is running let's go back here and do some more changes so I'll say John at doh.com that should be an email so I'll cut this and put it in the email I'll say this is John Doe I'll say John Doe likes Stu and John Doe is going to send an image from here and then we'll click send and once we do that our intergrammate here has run that operation you will see that we received all this data showing up here we need to make the correct link for this URL but we can also click this and now you will see that we have our data in here and everything is working as it should actually look so this is how you send data to an API you can be able to do so many things from this point you can use intergrammate to send to emails to send to various servers to do different things and that's how automation tools actually help you but you can see that that's how we can send data from our web form and actually send it out so the only thing that I need to do is change what we have here so I'm going to change this to the home URL and inside our home URL I'm going to pass a couple of things in here so what I'll say is when we come to our home URL let's go to the wp content we'll do a slash and we're going to go inside our uploads and then inside the uploads we're going to go to this particular file so I'll change this right here and then we'll have a slash here so we know that we're going to the right URL I'm going to remove this because we don't need it anymore and we shall use our upload directory actually right here so we shall be getting this and we're going to chain on the name of this file so I'll save this let's actually go and test this out and see that it works so I'll come back here I'll say let's have Kylie going to send onion rings and then we're going to upload a new file which is this I'll click open I'll hit send here I'll process the existing push that we made to our server because that was recorded and when I click here we have the correct string for our data here and we can also see that that's happening right here in our JSON string and if I actually go to this link and open it in the new tab you can actually see that we have our link it's downloadable it's can be usable in any place so our contact form 7 database addon actually does it really well for us and that's how you can actually get your file upload that's how you can get your information working from a drop down so feel free to try all the different fields in contact form 7 enjoy them use this new knowledge that you've got expand on it and do some wonderful things and in the next video I'm going to do something with gravity forms so be on the lookout for that to see how you can get information from your gravity forms and send it to an API or any other place you want to do that if you enjoyed the video don't forget to give it a thumbs up share it with your friends or even subscribe to the channel for more interesting WordPress stuff otherwise enjoy whatever you're developing