How To Make Contact Form With Captcha | Create Working Contact Form Wtih reCaptcha

[Music] hello everyone welcome back to the new video of easy tutorials and today in this tutorial you will learn to create a contact form with google capture that is reCAPTCHA you can receive this contact form information on your email we will create this contact form using PHP so here you can see a demo on my computer screen if I click on the send button it is asking for name now it is asking for email ID and now it is asking for message let me write one demo phone number also and we are not verifying this CAPTCHA simply click on this send button so we got an error message called invalid capture please try again and this time we'll fill the information and we will verify this google capture and click on send button so you can see we got a message called message sent successfully now I'll open my email ID so that you can see we got this information on my email before starting this video I'll request you to please subscribe my channel easy tutorials to watch more videos like this one now let's start to create this contact form we will create this contact form using PHP so that you should have a local server you can use a ramp server or zam server so I have a ramp server running on my system I'll go to the C Drive and this vamp folder and this www folder and here I'll create one folder where we will create our form so I am creating the new folder I'll write one name contact form and I'll open this file so here we'll create one file that is index dot PHP now I'll open my PHP file with text editor and here I'll write some HTML codes as Diamond Head and the title will be contact form design easy tutorials then I'll write body and I'll write some message in s 2 that is hello now I'll open Google Chrome and just type localhost / contact form so you can see this message here hello now I'll change this message here I'll write contact us and after this title will create one form and for this form a write method post' action this one now we will create some input fields here input type text' name will be name placeholder your name and this is required simply I'll duplicate this one to create multiple input fields now I will change the name that is phone the placeholder also for third one I'll write type will be email name also email and placeholder your email the next one will be text area so I'll remove this one here I'll write text area and name will be message and placeholder your message close this text area now we'll create one button here and good type submit' name submit value send message now I'll refresh my page so that you can see this input fields here and one send button also here will create one div and the class name will be contact form just close this deep here now we'll create one new file simply click on file new now save it as style dot CSS now we'll connect this CSS file with this one for that I'll write this link rel stylesheet' href style dot CSS just copy this class name contact form and here Lightbody margin padding and font-family you now I'll use this class name and for this contact form we'll write in box shadow margin and width then text-align:center let's refresh this one so that you can see this box is aligned in the center now again copy this class name here and after that a light edge - for this title a light background color margin top padding again copy and paste it and we will use this input field and for this input field will write display:block with 90% margin 10 pixel auto Paddington pixel let's refresh this page so that you can see changes on this webpage just we need to correct this spelling for this placeholder you now I will copy this text area you for this one we'll write margin padding and height also now you can see changes for this text area now we'll create one class for this button that is submit BTN at this class name here and for this one I'll write cursor:pointer width some small width 150 pixels and margin left will put important here now refers this one so that you can see it is a small send button after that we will add google capture here at this place so now we'll go to the Google and search for reCAPTCHA open this website goal.com slash rave CAPTCHA here you can see a button called admin console so simply click that one here you can see I have already created this one so now again I'll create a new capture so simply always scroll down and here I'll put one label that is easy tutorials now select the version so I'll choose recapture version 2 and this check box after that you need to enter your domains where you want to use this CAPTCHA so for now I'll use this CAPTCHA on our local host for that I'm using localhost as a domain and I'll also use this CAPTCHA on my website so I am writing the other domain name also you can use multiple domain names here simply add one domain per line now select this checkbox and click on register so after registering you will get some key here that is first one is site key and this is secret key and you will get some script also that you can directly use so I'll copy this one first a script and just add it into the head now again come to the website and copy the second script copy and just add it into the form where you want to display this capture that's it save this changes and refresh your website so that you can see this capture over here in this form now we need to align it for that I'll use this class name G reCAPTCHA Elad margin after refresh you can see this capture is aligned perfectly after adding this CAPTCHA we'll add one tip where we can display our success and error message so we will create one tip after this form dip and the class name will be status it will display the status of the form submission the PHP code will send the information on our email address and after that it will display the message first we will write CSS code for this div so I'll copy this class name status and for this status will write font size and color green and padding also after the press you can see some a space below this submit button now in this T will write PHP code that will send the information on our email address and after that it will display the status message here I'll write if it said and post and here we need to add the name of this submit button that is submit so simply I will add here ok so when anyone will click on the submit button the next code will start executing so here we are creating one variable username it will store the information from this contact form you next I'll create one phone and here we'll add the phone so it will store the phone number next it is for email ID it will store the email address from post method next one is users message and here we'll write message now I'm creating one variable it will store the email ID of website and next I'll write one subject here I'm writing new form submission you can write anything and in the next line all right email body that you will receive on your email so first will receive name you then we need phone number then email ID and user message also so this was the email body that we will receive on our email variable to email it will store the email address where you want to receive the information so here I am writing my email address and after that I'll write headers from an email from that is your website email again I'll write headers and put a dot here reply to and her will write user's email no will create one variable that will store the captcha key and one variable for response and it will store this response from this contact form and next one is user IP to get all this information simply go to the captcha website and here you can say this secret key so copy the secret key and add it here now we need this response for that copy this one GED capture response and add it here now we need the IP address also for that I'll type remote underscore a DDR address now we'll create yarol here and here we'll put one URL that is this one just copy from this CAPTCHA website and after that I'll write question mark secret is equal to the secret key and response is equal to response key and remote IP is equal to user IP after adding all this information after this URL we'll get the response we will restore this response here all right file get contents and duplicate this one and we'll change it to JSON decode now we'll use the if condition if this response H success it will send the email to send the email we will write email and after that this one to email where you want to receive and next we'll write this subject here after that body and this one header that's it so after sending this email it will display a message also that is message sent successfully suppose the response is not success then we'll use else and in this else condition we'll write one message that is invalid capture please try again now we'll add one span here because we need to change the color of this error message just copy this span and come to the CSS file before that I'll put dot the status and the color will be red that's it now I'll upload my file to my online server so first I'll create one directory here on my root domain I am creating test form to this directory I'll open this directory and here I'll upload my quotes after uploading just I'll open my website avinasi are.com slash test form - now you can see this form over here now I'll enter some information here and without verifying this capture I will click on the cell button so you can see this message invalid capture please try again and this time I will fill the information and I will verify this capture also now you can see a message called message sent successfully now again I'll go to the my email and here you can see I got all the information on my email so this is how you can easily create a contact form using PHP and you can receive your contact form information on your email and you can add the capture also if this video is helpful for you please like share and comment on this video and thank you so much for watching

Channel: Easy Tutorials

Views: 83,744

Keywords: Easy Tutorials, how to make contact form in html and css, how to make contact form, how to make contact form in php, how to create contact form in html and css, how to create contact form, contact form design in html and css, contact form design, add captcha to html form, add captcha to html form php, add recaptcha to html form, recaptcha

Id: 4cr85kvM8I0

Length: 25min 33sec (1533 seconds)

Published: Wed Jan 23 2019