People write code everyday to automates a variety of processes. We exploit the fact that computers are a lot faster and more accurate than humans, which lets us simplify a lot of mundane tasks. Unfortunately, these same abilities can be used to program computers to do something malicious like sending spam or guessing passwords. The focus of this tutorial will be on combating spam.
Lets say you have a website with a contact form to make it easy for visitors to contact you. All they have to do is fill out a form and hit the send button to let you know about a problem or request they have. This is an important feature of a public-facing website, but the process of filling out form values can be automated by malicious users to send a lot of spam your way. This type of spamming technique is not limited to just contact forms. Bots can also be used to fill your forums with spam posts or comments that link to harmful websites.
One way to solve this problem is to devise a test which can distinguish between bots which are trying to spread spam and people who legitimately want to contact you. This is where CAPTCHAs come in. They generally consist of images with a random combination of 5 or 6 letters written on a colored background. The idea is that a human will be able to read the text inside the image but a bot won’t. Checking the user-filled CAPTCHA value against the original can help you distinguish bots from humans. CAPTCHA stands for “completely automated public Turing test to tell computers and humans apart”.
In this tutorial, we will learn how to create our own CAPTCHAs and then integrate them with the contact form we created in the tutorial.
The variable $permitted_chars stores all the characters that we want to use to generate our CAPTCHA string. We are only using capital letters in the English alphabet to avoid any confusion that might arise due to letters or numbers that might look alike. You can use any set of characters that you like to increase or decrease the difficulty of the CAPTCHA.
Our function creates a 5 letter string by default but you can change that value by passing a different parameter to the generate_string() function.
Render the CAPTCHA Background
Once we have our random string, it is time to write the code to create the background of the CAPTCHA image. The image will be 200 x 50 pixels in size and use five different colors for the background.
We begin with random values for the variables $red, $green and $blue. These values determine the final color of the image background. After that, we run a for loop to create progressively darker shades of the original color. These colors are stored in an array. The lightest color is the first element of our $colors array and the darkest color is the last element. The lightest color is used to fill the whole background of the image.
In the next step, we use a for loop to draw rectangles at random locations on our original image. The thickness of the rectangles varies between 2 and 10 while the color is chosen randomly from the last four values of our $colors array.
Drawing all these rectangles add more colors to the background making it a little harder to distinguish the foreground of the CAPTCHA string from the background of the image.
Your CAPTCHA background should now look similar to the following image.
Render the CAPTCHA String
For the final step, we just have to draw the CAPTCHA string on our background. The color, y-coordinate, and the rotation of individual letters is determined randomly to make the CAPTCHA string harder to read.
As you can see, I am using some fonts I downloaded from Google to get variation in the characters. There is a padding of 15 pixels on both sides of the image. The leftover space —170 pixels—is divided equally among all the CAPTCHA letters.
After rendering the text string above the background, your result should look similar to the image below. The characters will be different but they should be slightly rotated and be a mix of black and white.
The fonts that you want to use will go into the fonts directory. Now, you simply have to add the following HTML code above the Send Message button from our previous tutorial on creating a contact form in HTML and PHP.
After integrating the CAPTCHA in the form and adding a refresh button, you should get a form that looks like the image below.
The final step in our integration of the CAPTCHA we created with the contact form involves checking the CAPTCHA value input by users when filling out the form and matching it with the value stored in the session. Update the contact.php file from the previous tutorial to have the following code.
We updated this file to first check if the CAPTCHA value stored in the session is the same as the value input by the user. If they are different, we simply tell the visitors that they entered an incorrect CAPTCHA. You can handle the situation differently based on what your project needs.
In this tutorial, we created our own CAPTCHA in PHP from scratch and integrated with a PHP contact form we built in one of our earlier tutorials. We also made the CAPTCHA more user friendly by adding a refresh button so that users get a new string with a new background in case the previous one was unreadable.
You can also use the logic from this tutorial to create a CAPTCHA that relies on solving basic mathematical equations like addition and subtraction.
If you want to add a CAPTCHA to your website, you should check out some of the form and CAPTCHA plugins available from Code Canyon. Some of these have CAPTCHA and many other features like a file uploader built in. If you have any questions or suggestions, feel free to let me know in the comments. You should also take a look at this list of best PHP contact forms.