Submit Contact Form 7 Field Data to External API or Email

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Welcome back to the channel. In today's video  I’m going to show you how you can get your data   that you collect on a contact form 7, send it  to an API or even use it to mail it elsewhere.   So what we're going to do is we're going to use  a function that's embedded in contact form 7,   and then we'll use some objects that are available  in the plugin itself. So let's write our own   custom plugin. In my plugins I’m going to create  a new folder and I’ll call it “contact form 7   api sender”, and then I’ll copy this, drag and  drop it in my editor, I’ll add a file with a   php extension, of course I’ll start with the php  here and I’ll use my start plugin snippet to make   this possible. So I’m going to contact form 7 API  sender. I’ll change the URIs and then I’ll leave   everything else as it is. So I’m going to go into  my plugin section and I’ll activate the sender,   and then I’ll begin coding what we have here.  So inside here we're going to start with an   action hook that comes contact form 7, so I’ll  write a function here and call it “techiepress   contact form 7 api sender”, and this is the  function that I’m going to use with my hook,   and the hook that we are looking for is actually  called wpc; for WordPress contact form 7   mail sent, and that's what we are looking for.  Now this hook gives us an object which we can   use and that's basically the contact form that  we have. Now with this object we're able to get   the title from it, so we'll get the title, and  what we're going to do is save this as a variable,   we'll call it title is equal to the contact  form title. Now why we need to save the title   is because we might have so many contact  forms on our particular website and we   might just want to use this one. So we can  see here the title is called web response,   so I’ll copy this, come here, and I’m going  to do an if statement and say if the title   is equal to, I’ll add a string web response,  then we are going to do a couple of things   with this particular form. Now if we  want to work with the submitted data,   we're going to have to use the “WordPress contact  form 7 _ submission object”, which is basically   a class that is from contact form 7. Now with  this particular class it has a particular method   inside it. If you do not understand the  terminology I’m using, it's because the   plugin uses object oriented programming; where you have a class and a class has inside it a function,   and the function in OOP or object oriented  programming is what we call a method. So this   class has that static method which is called  “get instance”. So the first thing we do is we run   this submission class, and we're going to store it  inside a variable, so we'll call this submission   is equal to the submission class and we're  going to get an instance of that. So next we   are going to say if the submission is true, then  we shall have something running. So submission;   if the submission is true what we're going  to do is we're going to get the posted data,   and we're going to say the posted  data is equal to the submission,   which is a reference to us getting an instance  of the submission class, and we're going to get   a method from there which is “get posted data”. So  we're going to get the posted data and we're going   to save it inside this variable. So after getting  our posted data saved up, we are now going to   start getting the different fields that are inside  our forms. I’ll go back to my page right here,   copy the code that is here, and I’m going to  come and just paste it here and comment it out.   The reason I copy it is because I want to get  these particular ids of our fields. So I’ll copy   this and say if I want to get the name; variable  name, it's going to equal to the posted data,   and then of course the posted data is going to  come as an array of data. So if I want to pick off   the name, I’ll have to use this id of “your-name”.  Now depending on how your ids look like,   you might need to change this or you might  need to get the ones that are available   for you. So what I’m going to do is just duplicate  this over and then get all the other pieces. So   I’m going to get the email, I’ll get the subject  and then change it to “your-subject” here,   and I’ll get the message which I also call “your-  message” right here, I’ll take away those comments   and that means we have all this content that  we actually wanted to have here. Now what I’m   going to do is I’m going to var_dump all this  information, and then I’m going to choose die   or wp die so that I can see what happens. So let  me get the name, dump it, let me get the email,   then the message. So copy this and paste  this, save. Now let's go to the front end   and try to send a message. So I’m going to  copy this code, so I’ll put a shortcode and   I’ll call this contact form 7, and then I’ll  publish this page, and I’ll go to view the page.   Now when we reach here I’m going to add in my  names, so Techiepress, I’ll add in my email,   I’ll add a subject, and then I’ll put in a  message which I’ll say “message goes here”.   So I’m going to hit send and we'll see that  this uses Ajax to send this message. So   let me inspect this to see if we are  going to get any particular errors.   So when we trigger the send you  will see that we have a post here,   all this different information here, we have  a response; message has been sent, and it had   a particular payload we've decided to var_dump,  and you can see that we are var_dumping the name,   the email, the subject and so on. So what I’m  going to do instead of doing this, I’m going   to get this particular information and I’m going  to email it to myself. So instead of var_dumping   let me email this. So I’m going to use a  particular function which is wp mail that is   default to WordPress, and we're going to say to,  let's just say we're going to send it to that email,   the subject is already set, the message is set,  the headers and attachments are what we might not   need. So I’m going to just email this to myself,  so let me save this, go back here reload this,   and let's try to add that  information. So we'll just add,   hit our send, we'll hit send, says message is  sent. Now I’m using local by flywheel so let's   check the mail traps that it has done to get  our info. So we'll open up Mailhog and you'll   see that we have our subject is here, so it was  trying to send that information, it's saying the   message is from techiepress at that email, the  subject is this, the message body goes here,   and you can see more of the information  if you're really into that kind of thing,   and you'll see everything is as it should be.  So instead of sending an email, you can actually   decide to just post this information to a foreign  server. So you would have to use the “wp remote   post” function of WordPress. So in here I  would put this comma, I’m going to add a url   here and I’ll say this is my url where this data  is going, and then I can add arguments, or args   that will be used to send this data. So in  here in the args I could maybe add a header,   I could let's say if I needed to authenticate  what I’m sending so I can add it in the headers,   I can add a body with all the  text, so let me add a body,   I’ll wrap this in here, and then our  body is going to have an array of data,   so we can have the name, subject and email,  copy these, I’m going to put them here,   I’ll put these quotations, add the arrow signs,  at the end put the commas that are needed,   go back to the beginning, paste this in here,  go back to the beginning and clean this out.   So this is just something I’m using with my  editor so that I don't have to duplicate this.   So we have our body it's already in there, so all  I need to do here is actually just paste the url   that's going to receive our data. So I’m  going to sign into Integromat which is   a platform like Zapier; it allows  you to do so many different things.   I’m going to go to scenarios and  I’m going to create a new scenario,   and this scenario is going to be a web hook, I’ll  click on webhooks right here and click continue.   What it's going to do is that it requires  you to add some particular information, so   I’m going to add a webhook name and I’ll call it  “receive cf7 data”, I’ll not restrict any ips,   and it's going to give me a url that I can  ping. So I’m going to copy this right here   and I’m going to go and paste it inside my  plugin. So we have the url, we have the arguments,   we have the remote post. So what we are going  to do is add return at the end of the day   when we are done posting all this information.  So our web hook is going to be waiting for the   information that's coming, and once we get  the information we'll be able to structure it   as it should be. So let me go  back to my form right here,   I’ll reload it so that we don't have any  issues, I’m going to say “techiepress 2”,   I’ll say give my email, add API sending; that will  be a subject, and message is “here we go”,   I’ll hit send, of course we get this working,  the message here we are told the message is sent.   Let's come back here to our API,   hit determine the data. Now let's go back  to our front end, let's add our techiepress,   we'll add techiepress 2, we'll add our  email and add a subject; API sending,   and then I’ll say here we go as our  email, click send, and you will see that   this has been pinged and that's why we're having  this is successfully determined. So let's click ok   and it's going to refresh our data. So on our  webhook what we're going to do is we're going   to add something else that's going to show  us what we'll do, and we'll add an iterator,   and when I add an iterator here and click on  it, you see it says array, and it's already   picking information from the web hook that was  triggered. So we have the name, the email subject   and message. This would be a nice tool for you  to look into if you're into automation and so on.   I got to know it from a friend who was using  this to automate their processes. So if you   like the video give it a thumbs up. If you have  something to say please leave it in the comments,   let me know how you're finding this video and  other videos, and if you haven't subscribed   consider doing so because there is so much coming from this channel. Otherwise enjoy your day.
Info
Channel: TechiePress
Views: 13,186
Rating: undefined out of 5
Keywords: Submit Contact Form 7 Field Data to External API, Send Contact Form 7 Field Data to External API, Email Contact Form 7 Field Data to External API, Custom Plugin to send Contact Form 7 Field Data to External API, Custom WordPress Plugins, Contact Form 7 Field data, wpcf7_mail_sent, WPCF7_Submission, Contact Form 7 Submission to External API, Contact Form Submission, WordPress Contact Form 7
Id: QOjpqHFM9v8
Channel Id: undefined
Length: 13min 53sec (833 seconds)
Published: Wed Oct 07 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.