Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We are now going to take a look at setting up a ReCAPTCHA within a form. Within the Images folder for this completed chapter, Chapter 7 Start Files that is, so if you have not copied over the Chapter 7 Start Files into your htdocs folder within XAMPP or MAMP, please go out and get the Chapter 7 Start Files. The image we're going to look at is one of the files I've added to the Chapter 7 portion.
So, ReCAPTCHA keys is what we're looking at, in case you want to preview this later. And when you sign up for a ReCAPTCHA, within your account you get your own personal keys. So your personal key would be listed here, and it's a sequence of a whole bunch of characters. So you don't want to have to type it out. You want to make sure you can copy and paste this information. So the public key is what goes into coding for the users. And your private key is what goes into the private key area for a script sitting on the web server.
So we'll walk through this piece, but you do not use the same public or private key as I do. Everybody signs up for their own account. They get their own personal key. So let's take a look at the form we're going to use, and this is the Contact Us ReCAPTCHA.php file. So this is going to add the ReCAPTCHA image down at the bottom of the page, underneath Comments. If we move out to the code view, and scroll down towards the bottom of the page, this PHP piece on line 69 is what adds the captcha image. You can see it's underneath the Comments, and above the Submit code. And this information is provided to you.
If you go into the instructions within the ReCAPTCHA website, it explains all of this for you as well. Now there is one file that you must have within your course files in order for this to work. And this must be on the web server itself. And if it wasn't sitting in the right folder, you might have issues. So this must be sitting in the right folder. So if we go out to our Course files, we have that file.
I've placed it in the Course files for you so you don't have to do that. But for your own website, you would need to place it within your website and make sure that file is on the server, or this will not work correctly. Notice within our form there is an area for the public key, line 70 in my form. And I have this marked with your public key goes here. So when you sign up for your ReCAPTCHA image, and you get that private key, you get a public and a private. So this public key that they are talking about is right here in your personal key when you signed up.
The characters listed in this line for your ReCAPTCHA account need to be copied into this area here within the webpage, where I have your public key goes here, that text. Now within the Action page, you have to put your private key. So I'm going to open up ReCAPTCHA Action. There's some coding on this page. This upper portion is going to test to see if the captcha image matches. It's going to test the answer that the user plugged in. So this is where your private key must go.
And just like the actual form for the private key, before that line, we need this ReCAPTCHAlib.php file. So you have to make sure that's in your red folder. And it's on the web server, so it can be found. Now this is not complete, as you can see. I don't have my private key set up here, and I don't have my public key set up here. So I will need to do that in order to test this form. So we'll go ahead and test this form, and I'll show you how it can work.
Let's take a look at the ReCAPTCHA in action. So I'll put this in my browser. There's a ReCAPTCHA image. Now if you can't read it, if you are a user, you can click this Refresh button. So you can see, it changes the text to make it easier. So I will fill this out, type it in, there is a period there within this one. Click Contact Us, and you can see it took me out.
I did not fill out the form, so we don't have much information in my form, but it moved me to the ReCAPTCHA Action page. So it matched, it worked. ReCAPTCHA validated the form, and I was able to get to my form data. What happens if it doesn't validate? I'll just put in a couple of characters. I click Contact Us. You can see, this is what occurs. So there is some text that prints out to the page, and you can certainly modify this text as you wish. That works just fine, but I wanted you to see this in action, and what happens when it doesn't enter correctly.
So that is a ReCAPTCHA image, and you have to plug in your personal, each person gets their own, public and private keys in order to work with it. If we take a look at the ReCAPTCHA Action page, you can see this has some coding in it. And I got this coding directly from the ReCAPTCHA website, so they provide this for you. I didn't have to create it. And underneath here is where you can enter different code.
So, if the captcha was not entered correctly, here is the message that pops up. So you can modify this section to have something happen if the captcha wasn't entered correctly. You don't have to use this specific text. If it wasn't entered correctly, the text shows, that's the die portion. If it was entered correctly, you can see it says, your code here to handle a successful verification. Within this section, I place code that I want to have occur if the ReCAPTCHA image passed, so that verification or the ReCAPTCHA form validation passes. So that is a ReCAPTCHA.
You need some information on the form itself to create the image. You need information on the Action page telling your form what to do if it passes verification. And you may want to modify what occurs if it doesn't pass validation. So that is inserting a ReCAPTCHA image within a form.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 100793 Viewers
61 Video lessons · 87648 Viewers
71 Video lessons · 71509 Viewers
56 Video lessons · 103438 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.