People write code every day to automate 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.
Let’s 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 five or six 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.
Creating the CAPTCHA
We will use the PHP GD library to create our CAPTCHA. You can learn more about writing text and drawing shapes with GD in one of my earlier tutorials. We will also have to write a little bit of code to create our random string to be written on the image that’s created. Yet another tutorial, titled Generating Random Alphanumeric Strings in PHP, can help us in this regard.
Generate a Random String
All the code from this section will go in the captcha.php file. Let’s begin by writing the function to create the random string.
<?php
$permitted_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function generate_string($input, $strength = 5) {
$input_length = strlen($input);
$random_string = '';
for($i = 0; $i < $strength; $i++) {
$random_character = $input[mt_rand(0, $input_length - 1)];
$random_string .= $random_character;
}
return $random_string;
}
$string_length = 6;
$captcha_string = generate_string($permitted_chars, $string_length);
?>
The $permitted_chars variable 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 five-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’s time to write the code to create the background of the CAPTCHA image. The image will be 200 x 50 pixels in size and will use five different colors for the background.
<?php
$image = imagecreatetruecolor(200, 50);
imageantialias($image, true);
$colors = [];
$red = rand(125, 175);
$green = rand(125, 175);
$blue = rand(125, 175);
for($i = 0; $i < 5; $i++) {
$colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);
}
imagefill($image, 0, 0, $colors[0]);
for($i = 0; $i < 10; $i++) {
imagesetthickness($image, rand(2, 10));
$rect_color = $colors[rand(1, 4)];
imagerectangle($image, rand(-10, 190), rand(-10, 10), rand(-10, 190), rand(40, 60), $rect_color);
}
?>
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 adds 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 rotation of individual letters is determined randomly to make the CAPTCHA string harder to read.
<?php
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$textcolors = [$black, $white];
$fonts = [dirname(__FILE__).'fontsAcme.ttf', dirname(__FILE__).'fontsUbuntu.ttf', dirname(__FILE__).'fontsMerriweather.ttf', dirname(__FILE__).'fontsPlayfairDisplay.ttf'];
$string_length = 6;
$captcha_string = generate_string($permitted_chars, $string_length);
for($i = 0; $i < $string_length; $i++) {
$letter_space = 170/$string_length;
$initial = 15;
imagettftext($image, 20, rand(-15, 15), $initial + $i*$letter_space, rand(20, 40), $textcolors[rand(0, 1)], $fonts[array_rand($fonts)], $captcha_string[$i]);
}
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
As you can see, I’m 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 a mix of black and white.
Adding the CAPTCHA to Our Contact Form
Now that we have created our CAPTCHA, it’s time to add it to our contact form. We will use the contact form from my previous tutorial on how to create a PHP contact form and add the CAPTCHA just above the Send Message button.
We will be using sessions to store the CAPTCHA text and then validating the text entered by website visitors. Here is the complete code of our captcha.php file:
<?php
session_start();
$permitted_chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
function generate_string($input, $strength = 10) {
$input_length = strlen($input);
$random_string = '';
for($i = 0; $i < $strength; $i++) {
$random_character = $input[mt_rand(0, $input_length - 1)];
$random_string .= $random_character;
}
return $random_string;
}
$image = imagecreatetruecolor(200, 50);
imageantialias($image, true);
$colors = [];
$red = rand(125, 175);
$green = rand(125, 175);
$blue = rand(125, 175);
for($i = 0; $i < 5; $i++) {
$colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);
}
imagefill($image, 0, 0, $colors[0]);
for($i = 0; $i < 10; $i++) {
imagesetthickness($image, rand(2, 10));
$line_color = $colors[rand(1, 4)];
imagerectangle($image, rand(-10, 190), rand(-10, 10), rand(-10, 190), rand(40, 60), $line_color);
}
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$textcolors = [$black, $white];
$fonts = [dirname(__FILE__).'fontsAcme.ttf', dirname(__FILE__).'fontsUbuntu.ttf', dirname(__FILE__).'fontsMerriweather.ttf', dirname(__FILE__).'fontsPlayfairDisplay.ttf'];
$string_length = 6;
$captcha_string = generate_string($permitted_chars, $string_length);
$_SESSION['captcha_text'] = $captcha_string;
for($i = 0; $i < $string_length; $i++) {
$letter_space = 170/$string_length;
$initial = 15;
imagettftext($image, 24, rand(-15, 15), $initial + $i*$letter_space, rand(25, 45), $textcolors[rand(0, 1)], $fonts[array_rand($fonts)], $captcha_string[$i]);
}
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
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.
<div class="elem-group">
<label for="captcha">Please Enter the Captcha Text</label>
<img src="http://code.tutsplus.com/captcha.php" alt="CAPTCHA" class="captcha-image"><i class="fas fa-redo refresh-captcha"></i>
<br>
<input type="text" id="captcha" name="captcha_challenge" pattern="[A-Z]{6}">
</div>
Sometimes, the CAPTCHA text will be hard to read even for humans. In these situations, we want them to be able to ask for a new CAPTCHA in a user-friendly manner. The redo icon above helps us do exactly that. All you have to do is add the JavaScript below on the same page as the HTML for the contact form.
var refreshButton = document.querySelector(".refresh-captcha");
refreshButton.onclick = function() {
document.querySelector(".captcha-image").src = "http://code.tutsplus.com/captcha.php?" + Date.now();
}
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.
<?php
session_start();
if($_POST) {
$visitor_name = "";
$visitor_email = "";
$email_title = "";
$concerned_department = "";
$visitor_message = "";
if(isset($_POST['captcha_challenge']) && $_POST['captcha_challenge'] == $_SESSION['captcha_text']) {
if(isset($_POST['visitor_name'])) {
$visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);
}
if(isset($_POST['visitor_email'])) {
$visitor_email = str_replace(array("r", "n", "%0a", "%0d"), '', $_POST['visitor_email']);
$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
}
if(isset($_POST['email_title'])) {
$email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);
}
if(isset($_POST['concerned_department'])) {
$concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING);
}
if(isset($_POST['visitor_message'])) {
$visitor_message = htmlspecialchars($_POST['visitor_message']);
}
if($concerned_department == "billing") {
$recipient = "[email protected]";
}
else if($concerned_department == "marketing") {
$recipient = "[email protected]";
}
else if($concerned_department == "technical support") {
$recipient = "[email protected]";
}
else {
$recipient = "[email protected]";
}
$headers = 'MIME-Version: 1.0' . "rn"
.'Content-type: text/html; charset=utf-8' . "rn"
.'From: ' . $visitor_email . "rn";
if(mail($recipient, $email_title, $visitor_message, $headers)) {
echo '<p>Thank you for contacting us. You will get a reply within 24 hours.</p>';
} else {
echo '<p>We are sorry but the email did not go through.</p>';
}
} else {
echo '<p>You entered an incorrect Captcha.</p>';
}
} else {
echo '<p>Something went wrong</p>';
}
?>
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.
Final Thoughts
In this tutorial, we created our own CAPTCHA in PHP from scratch and integrated it 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 CodeCanyon. 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.
