Custom WordPress Form with reCAPTCHA v3 | Create Plugin

hey what's going on guys my name is victor and in this video i'm going to build a wordpress custom form uh i'm actually going to build a plugin which is going to generate a short code and this shortcut is going to display this form um i also integrated recaptcha version 3 here to secure this form against spam and um so just to show you how this works for example i'm going to enter an email here my name enter a message click send email this is gonna output a notification thank you for contacting us but now for example if i resubmit this form and i send all data to the server i'm going to get recaptcha error and the form on the server on process the data from the form so this is a recapture security for uh measurement here just to show you that recapture works all right so um i'm going to write everything from scratch in case you want to follow along with me there is also going to be a link in the description from where you can grab the source code so that being said let's go ahead and get started all right so if i refresh this page now i'm going to see just a shortcode which is by code contact form um i just paused the video and i removed the plugin here so under my plugins i don't have anything uh this is the contact uh page and i'm i'm gonna have this shortcode here so let me actually just gonna click edit um and i'll remove this block and i'll just update now just leave it like so this this page is blank now just to just want to mention that i'm using samp all right so i'm working on on localhost i have exam here php apache i installed uh wordpress is installed i'm using uh the storefront team i have a child team here but i'm not going to touch this theme i'm just going to build a plugin so what i did is under my wordpress content folder so this is hd docs this is the main servers folder it's like public public html maybe on your server i don't know but under wordpress content and then plugins i created a folder which is contact and this is the form the the folder is empty now so i open my vs code in this folder and here i'm going to create a file and the first file is going to be form.php and i'm also going to have another file which is the style.css i'm going to add some styling to the form okay so first thing i want to do here is add the plugin comment um so i have to open the php tag here and add this comments here which is plugin name contact form plugin this is very important because wordpress reads this plugin and this is how wordpress knows which file is the main file from our plugin folder uh it knows the description you know grabs description the plugin url author and the version all right so um i'm just gonna save it like this and i'm gonna go back to my website and i'll refresh this install plugins page and i'm gonna see this plugin here it doesn't do anything i can click activate but it's not gonna do anything for now because i don't have any functionality in it yet so i'm gonna start um i'm gonna start with importing the css file in my in my plugin because i need to call it and um to do that i'm gonna use an action i'll add a new action to the wordpress inquiry scripts so let me just i mean i'm going to have a function call back for style no parameters and uh here i'm gonna have i'm gonna use the wordpress register style hook so i have wp underscore register underscore style and the first parameter is going to be y code this is the handle and then plug in and then this is the style url this is where the the style is so i'm gonna have plugin url underscore url and here i'm gonna have slash style dot css and uh there's gonna be another parameters here which is underscore underscore file underscore underscore [Music] comma false and then the file versions output 1.0.0 and the media is going to be all like this so if you don't know what this is actually you can you can just uh let's just search in google to see what this does so we go to developers.wordpress.org this is your best friend whenever you are customize your wordpress website so here's what we have we have five handlers here five uh parameters the first one is the handle as i already said the name of your stylesheet which needs to be unique and then the source that's where the file is so this is the handler this is where the file is that's how we detect the plugin url and then the file and then we have um statute dependencies this is an optional so i just put false we don't have any dependency dependencies usually as we have other css file or javascript files that depend on each other so this is where we add the dependencies and s already said this is the version you see here and then the media so different types of media i'm gonna put i'm gonna leave it for all all right and then below here i'm gonna have to now we register it now we have to inquire the style so i'm gonna use the wp underscore e and q o e o e underscore style and here i'm gonna put this handler which is by code like this just make sure they match okay and above this function i'm going to have to add new action and the hook for this action is going to be wp inquiry script wtpa underscore e m q o e o e underscore scripts and the second parameter of course is the function name and i'll save it so if i go back just make sure we don't have any errors so there we go we have one on the 12th saying call call to undefined function plugin url plugin needs to be s plugins sorry about that guys that's misspelling all right so it's working fine now if i press ctrl u i'm on windows so if i press ctrl e in google home and i search for style.css i'm supposed to find this file which is here localhost wordpress content plugins contact this is my plugins folder and then i see this file here which is 1.0.0 that's the version so if i click on it it's empty now because i don't have any i don't you know i don't have anything in my css file so i'm going to close that i'm going to go back here and i'm going to keep going so what i want to do now is i want to generate a short code which is going to output a form wherever i'm going to use that short code so to generate a short code in wordpress i'm going to use a function i'm going to use just functions in this example i'm going to try to make it as simple as possible for you guys but you can customize you can add objects classes here so i'm gonna create a function now and i'm gonna go i'm gonna call it vi code contact form like this i'm not going to have any parameters and below here i'm going to have to use the add shortcode add underscore shortcode and here i'm going to put the shortcode so the shortcode is going to be vi code underscore contact underscore form you can basically choose here anything you want this is going to be the short code and then whenever we use this short code this is the function the next parameter is the function that's going to be called um whenever we you know display this shortcut somewhere on our website this way like this okay so just to make sure everything works i'm gonna put a return and i will say form here i will save it i'll copy this one from here go back to my page and i'll add a short code and here i'll do like this pump bomb update go back to the contact page and if i refresh i'm gonna see form here this text comes from my uh vicod contact form function here okay so the first thing i want to do is just to display the form html tags and all that stuff so i'm going to have a variable which is going to be content apostrophes here and here's where i'm going to add the form so i'm going to have a form action and then this form is going to have an id and the id is going to be i'll say contact form and then i have a method and the method is post close the form tag now i'm gonna have so each field is going to have a label and it's also going to have an error below the field whenever it needs to be filled out or if somebody entered the wrong email or something like that so i'm going to have a separate div class for each of this for each field so i'm going to have here d class like this on the d of class is going to be form group and then here i'm gonna have label for and i'll say here contact name close the label tag and then here i will say name like this now we don't have to add space all right then below we will have our input uh text field so we have input type text and then name contact name and it's going to have an id for the label and there is going to be contact name make sure this uh where is that label this for uh attribute matches with the field id because whenever you click on the label it's gonna go the cursor is gonna go to this field here okay and then below here we'll have a spam class and the class is gonna be error like this so here we will output the errors but i will do that whenever we will handle the submission okay uh now here where the action is uh we want to do the concatenation like this and here i'm gonna add get underscore the underscore thermal link like this so what this is gonna do it's gonna crop the permalink from the current page so whatever we use this form it doesn't matter what page it's gonna be on for example on the cards page for example i had just woocommerce and i disabled so that's why it has it but it's gonna be a card whenever we will click on that submit button it's going to go to the same page so the the form is going to be submitted on the current page on the same page so let's go back to the contact here let's go back here all right we have this in place this field is good let me just save it just to see that everything works fine okay it doesn't because i didn't return it yet so i have to return content so back here refresh so we have this field here there's the label name and the field it doesn't look pretty though but i'm gonna add styles and it's gonna look good okay so we want to add another form group for email one and one for message form group this is going to be contact um okay label for email okay this is going to be email type text here name email id email and we will have an error of course and then below here we will have for comments text comments text and we'll put here message um except here we will have it's going to be a text area so we have text area name comments id comments text comments text rows we will have five uh columns 20 and i'm going to close the text area attribute uh tag sorry about that guys uh and then we have this error span which is fine we leave it here we will have another so we should have the submit button also and we should also have two more hidden fields actually one more hidden field for this step next step we'll add more but for here for now i'm gonna have input type and it's gonna be hidden name submitted i'm gonna use this field for the submission and then i have id submitted value true we'll close it like this and then below here i'm gonna have the submit button so i'm gonna have input type submit [Music] value send email like this and i'm gonna leave it like this for now so let me save it i'm gonna go back and refresh the page so i have a name email message send email but nothing happens here if i click on send email it's just gonna refresh the page but nothing else okay so uh it's time for me to add some css styling here so what i want to do here i want to make this fields full width so we'll start with um because i have this contact for my d contact form id here so i'm going to grab it just to make sure i assign this style um this css styles just for this form so i'm going to have this contact form and i'll have input and then type text and i'm going to have again contact form and for the text area so i want to do this and with 100 so i'll save it now this is where this thing comes on because your browser saved the css file sometimes so if i made changes i will change the version of the file put here one and i will save it now if i go back and refresh i'm going to see these fields full width but now i want to add some margin below each of these fields so it doesn't look so cluttered all right so i'm gonna go back um style css and here i told you that i have a form group class for each of these fields so i'm gonna grab this and i will add margin bottom and i'll put 15 pixel um and i'll save it so i'll go back and refresh and i will see i have a margin here and everything looks prettier than before which is nice i like it now what i want to do is i want to start validating this data the submission and all this other stuff make sure i don't have any errors or anything you know like um just to make sure people entered some data in these fields so right here in the same function above this content variable i'm going to have some if statements so the first if statement is going to be uh just to make sure this just to check if there's any data in this field which is submitted so i will have a if statement here can have if so if is set post and uh the field i'm checking here is this one submitted the name of it so paste it here so if it if this is true that means somebody clicked on that submit button okay so now i want to check each individual field i want to check the data because i want to make these fields all of them required so i'm going to have another if statement here i'm going to have eve see if chim chim removes the spaces before and after the the value and then here i have post and what i want to check here is the contact name that's the field name for the name which is this one the name from here contact name so if this is true oops okay uh is sad let me just add some space here so i don't get confused and i don't confuse you at the same time okay tree and post contact name so if this is equal to nothing then that means that there's an error this field is empty so i'm going to have a variable which is going to be name error and i will assign here please enter your name and there's going to be another uh variable which is going to be has error and i will sign true okay uh else i will have a name variable and i will assign trim post and here i'm gonna have contact name so we'll assign this data to this variable to the name variable i'm gonna need this to send the email okay okay and now i should do the same thing for the email so i can just copy all this stuff from here paste it here and just change this name here to email email this is going to be email error please enter your email like this for email address error true else um there's gonna be another if here so because i want to make sure that this is a valid email uh in order to do that i can use the php prac match function with um with a rule so what i'm going to do here i'm just going to post it because it's a long rule but let me see here i have if right this else if it's different then so i have prague underscore match all right and the the rule for the pragmatch is the following it's like this so you guys can just pause the video maybe you already know it but this is a rule that's universal anywhere you can use it this is uh detecting if the aml is valid or not all right and then the second parameter is going to be trim and we have here post and email okay like this so what we do here we just assign uh okay so if this is true let me just get rid of this if this is true then we have the same thing we have here except we will say please enter a valid email address this is true and then we have yells and here at els we just assign the email to the email variable so we will have here gym and we have post email like this all right so we have the name and email there's the last one the the message but what i i want to do what i want to do now is i want to grab this variable and out and paste it here just to make sure everything works but before i do that i need to validate these variables because if i just paste them here i'm gonna get an error in php so so bear with me i'm gonna grab it just to show you so if i paste it here i need to concatenate of course like this so if i save it and i go back to my page if i refresh this page i'm gonna get this uh notice that undefined variable name err on the 46 line so the 46 line is this one so i usually validate them just double validation for this variable so i'm going to have validating variables so i'm going to crop this variable and i will reassign the value of this variable in the following way i'm going to check there's going to be if statement if you set name error then i assign the name error otherwise i assign nothing all right so if i save it now here and i refresh it everything works fine so if i click send email i'm gonna get this error here please enter your name right so the validation works for the name now i want to do the same thing for the email so where's the email here let me just do the validation for the email first and i have email okay replace everything here and i want to output the email error so where is that error here i'm gonna do a concatenation here and i'll paste email error right so i go back i refresh the page undefined email error oh okay so i should do that for the email error not for the email sorry sorry about that guys okay let's go back now all right everything works fine if i click send email i'm gonna get please enter your name please enter your email address now look bear with me if i put an email here like this and a crappy email like that if i click send this is gonna show me please enter a valid email because it wants to be a valid email with a domain.com you know he needs to have something something something at for example at gmail.com or at yahoo or at whatever.com it doesn't matter it shouldn't it doesn't matter if this.com or not there needs to be a domain okay let me do the same thing for the comments and for the comments it's gonna be let's see yeah let me just grab and i'll just this is the basic one grabbed everything from the name so what we so i'm going to do here is going to be comments comments like this please enter your message error true yells get rid of this and here i'm going to have an if statement because i want to use the strip slashes i want to remove the slashes and everything from this kind of like t filter the comment so i'm going to have another if statement and i will check for the strip slashes function if it exists so i'm going to have function underscore exists and the function is strip slashes like this all right so if this function exists then i will assign to the comments variable i will assign the strip slashes function with a parameter which is going to be trim it's another function which is going to uh it's already said removes the space before and after the value and then here i'm going to have dollar sign post and i'm going to have comments just make sure these comments is the name of the field that they match see the name comments here okay semi column but if this function doesn't exist yells um i'm gonna do the same thing except the strip slashes so remove the strip slashes from here like this all right and i'm gonna do the validation for this as well so here i'm gonna have the comments hey i forgot i forgot to update this needs to be comments error comment error comment error has errors okay common error okay so i'm gonna update this command error commander commander and whatever is this error here i'm gonna do concatenation i'll leave this common error here make sure it's a variable i will save it so if i go back now refresh this page click send email i'm gonna get these errors for for each of this field now if i enter something here's something good submit i don't have a confirmation but i don't have any errors either so everything works fine until now until now okay i have this form okay these fields are in place so what i want to do now is i want to integrate the recaptcha version 3 with this form right in order for me to do that because we have the validation everything is fine so in order for me to do that i should go to google.com slash recaptcha and i'm going to v3 admin console click there uh i choose my project which is via code media if you don't have a project yet you can click on this plus button here which is create i'm using i'm using localhost so you can choose here a label you can write everything anything here and then pick version three under your domains if you're using a local host like me you just type in localhost localhost and press enter okay i'm not gonna do it because i already have it uh accept the recaptcha terms of service just check that and uncheck this and alerts your owners because you don't i mean if you want you can just leave it but i usually uncheck it okay so you have all this in place i'm gonna go back here uh you click save and that's gonna show you uh site key like this click here it's going to show you a side key and the secret key so you want to have this just keep it open now here because that's this is where we will use right here so i'm going to leave a comment here i'll just say recapture v3 and i will have two defined variables i'm going to define them here so i'll have define and i'm gonna have side underscore key capital letter and i'm gonna have the secret key okay so i'm gonna grab them from here copy the side key i'll paste the site key here and the secret key and i'll paste it here and now in the submitted here i'm gonna add a um okay i have this so this is how this works this is this recaptcha works you should have we should have a hidden field so i'm gonna add another hidden field here and basically whenever somebody will access this this form this page um i'm gonna have a javascript for a javascript code which is gonna call google using the site key and the secret key and google is going to return a session to our website and now we'll insert that session in that hidden field of the form and then i will just submit the form and i will send that session to google and then google will detect if it's a robot or not if it's a you know if it's spam or not okay so um i'm gonna have an input type this is gonna be hidden it's going to be hidden victor and what else i will need an id because i'm going to insert data with javascript so i need i definitely need an id and the id is going to be g hyphen recaptcha hyphen response and i will have a name and the name is going to be g the same thing i have here actually like this and i will close this field now below my form i'm gonna have a script and in this script i'm gonna use the let's see there's an object that comes from google so in order for me to call this object i should first import no i'm just trying to think how to make it easier for you guys but uh if you go to recaptcha version 3 documentation we click here documentation and they have this where is it button class um they have this documentation here where they explain how to insert this action submit a little bit what i'm doing now is a little bit different um [Music] is it i'm i a little bit customized it this is more for javascript but i'm using php so so um as already said i need a script which is going to insert a code here in this response in this hidden field so i'm going to use g [Music] recapture the already i'm gonna have a function like this and okay like this oops oops all right and then here i'm gonna have another g recaptcha which means google recaptcha and then execute all right and then here i'm gonna have [Music] the side key so i'm gonna have this concatenation so i'm gonna have site key and then here i'm gonna have um curly brackets i will have action and the action is gonna be homepage there are different actions on google documentation you can check that out if you want um there's also and then then i'm gonna have another function and it's gonna grab the token okay and here i'm gonna have um let's do a console log and i want to log the token okay like this uh console.log okay i'm missing something here just needs to be like this okay so this is not gonna work now because i need to call this google server uh so in order for me to call it i should do it right here in the submitted under the submit um so i'm going to have a variable which is going to be response and i will check file get contents i will use file underscore get underscore contents all right and here i'm gonna have to google url so i'm just gonna grab it just to make sure oh i'm gonna misspell it i'm gonna explain what i have here just bear with me bear with me okay right so what do i do here is um get file contents this is the url we were supposed to call whenever using google recaptcha which is google.com slash recaptcha slash api slash site verify question mark secret and then we assign the secret key to this secret get variable and then response which is the data from our post get response recaptcha let me just do this just remove the poster face and leave like oh no no never mind it doesn't matter but let me see if i don't have any errors i'll save it and of course on the 26th unexpected form 26 okay that's because i forgot the semi columns let's see if this is the problem yeah so it works now let me see on the console uh is not defined you recaptcha is not defined so there is something going on here and that's because i didn't call the library okay we send this data whenever we click on submit button but we should also call this library because um that's why it's showing this error it can't find this object because we didn't import the library to google library so in order for us to import google library above the form we will have a script source and the source is going to be uh let um see i'm just gonna copy and paste it guys just for the second time okay so the url is https www.google.com recaptcha api.js question mark render and then we assign to the render the site key okay so if i save it now and go back here and refresh the page i'm gonna get this in the console this is the session we get from google and now this session needs to to be inserted in our hidden field so if i inspect this form and i'm going to the hidden field which is g recapture response i want to insert this data here in this field and whenever i click on the send email all this data is going to be sent to this url which google is going to check it so if you see here we send this response and so we have this return here we assigned to the uh return i don't know uh make sure you have this line here because i paused the video and i was like i was digging into it and i think this is the only thing that's missing right now so make sure you add this return json decode response here like this okay and let's see so we have that so now if we go back down here so as already said guys make sure you add this line here i didn't i didn't show you how i edit whenever i added i had to add it but you should add it here we don't use this return yet but we will we will in a second now let me just in in inject this data into our field so in order for me to do that i'm gonna type in here i'm just gonna comment this like this and then here i will have document dot get element by id and then here i'm going to have the id of this field which is g recapture response i'll paste it here like this and then dot value and i assign the token so i get a token i assign it to the value of this field now if i save it go back just to make sure it works so if i inspect it here form and then we get this input type hidden field and we get this value here in this field which is awesome everything works fine so now having this data here whenever we click on the send email all goes to google now whenever google gets a response it assigns a response to the response variable and then we decode it using the json decode and we assign everything to the return variable now using this return variable i can uh check the score we get from google so in order for us to check this score we will have a new statement so we'll have if return uh no return response success equals true and the return function score greater than 0.5 then so let me make sure one more time response okay if now this needs to be returned we don't play with the response return so if return success is true and the return score is zero point greater than 0.5 then we have has error and we assign false else we have a google error google error and we assign here recaptcha error like this and then here has error true has error is true now let's grab this google error let's validate it here like this and then i'm gonna copy this span class error and i will add it before the send send email button which is the input button but actually i'm gonna i'm gonna also add this form group div class like this so if i okay so make sure this is google error so if i save it now go back to the form refresh the page everything works fine click send email we get these error errors here so if i refresh it one more time just to send double session i'm gonna get this errors here and also recapture error because we sent an old session to google and google didn't like that okay so this uh everything works fine now until here what we want to do now is we want to send the email if everything is fine we want to send this email to our um to the admin email so in order for us to do that [Music] we will have another if statement here so right below our our yells this else here we'll have another if and we'll check if it's different then is set and the variable is has error then we will have a variable email to and this is going to be the admin email so i'm just going to put info by codemedia.com we have a subject and the subject is going to be i don't know let's just say contact form from endless concatenate and let's say here name which is going to be the username the name they will insert in this field uh yeah so we grab it here okay and then the body email body here we will say name and we'll have name like this and and email and we will have email and then we have an n and then comments and then we will have comments like this okay and then below here we will have the headers and here we have from and we okay let's select this from and we'll concatenate and we put name and then like this and concatenate again and we have email to okay email to concatenate again um okay may something is wrong here so we have from dot name dot okay i missed an apostrophe here space we have this okay and then here like this and then we have backward slash r backward slash n and concatenate again and then we have replay to space apostrophe dot email voila finally okay and then we will use the wordpress mail which is wp underscore mail and we will send this email with this function so we'll have email too and then we have subject body and the headers like this and then below here we'll have another if statement so we will have if it's different than has error we will have a variable which is going to be submit submitted success and here we will assign thank you for for contacting us and we will have to validate this variable as well here so this this and this and we'll concatenate it so i will add it right here something like this okay so if i save it now go back here refresh the page looks like this refresh the page you probably saw this badge here but now if i click send email i'm gonna get this error but if i enter this data here now the message click send email everything's gonna work fine i'm gonna have thank you for contacting us unfortunately guys i can't see i can't send emails from my local host but i'm pretty sure this works so if it doesn't if you don't receive any emails um just just look into this stuff here maybe you misspelled or maybe i misspelled something but um it looks good it looks it looks the way it should go so it should look so i think everything is fine here all right i think that's it for this video guys if you liked the video please give it a thumbs up subscribe for my channel if you have any questions leave them in the comments thank you so much for watching and i will see in the next video

Channel: Vicode Media

Views: 610

Keywords: wordpress, wordpres reCAPTCHA v3, wordpress form, wordpress plugin

Id: 61QBrGpwQGg

Length: 48min 41sec (2921 seconds)

Published: Thu May 06 2021