Create a Custom CAPTCHA and Contact Form in PHP

This tutorial, originally published 10 years ago, has been completely updated with modern code for generating random CAPTCHAs. Many comments in the discussion thread refer to the outdated code.

Automating processes is a key benefit of coding, leveraging computers' speed and accuracy. However, this power can be misused for malicious activities like spamming or password cracking. This tutorial focuses on anti-spam techniques.

Consider a website with a contact form. While convenient for legitimate users, it's vulnerable to automated spam submissions. Bots can flood contact forms, forums, or comment sections with spam links.

The solution? A test distinguishing bots from humans: a CAPTCHA integrated with a PHP form. Traditional CAPTCHAs present distorted text within an image; humans can read it, but bots typically cannot. This verifies user input against the original CAPTCHA text. CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart."

This tutorial demonstrates creating and integrating a CAPTCHA into a contact form.

Creating a CAPTCHA

We'll use the PHP GD library. Previous tutorials cover GD's text and shape drawing capabilities. We'll also generate a random string for the CAPTCHA.

Generating a Random String

This code resides in captcha.php. The generate_string() function creates the random string. The original generate_string() function has been replaced with the more secure random_int().

<?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[random_int(0, $input_length - 1)];
        $random_string .= $random_character;
    }
    return $random_string;
}

$string_length = 6;
$captcha_string = generate_string($permitted_chars, $string_length);

?>

Creating the CAPTCHA Background

Next, we generate the CAPTCHA image background (200x50 pixels) using five varying colors.

<?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);
}

?>

Random $red, $green, and $blue values determine the base color. A loop creates darker shades, stored in the $colors array. The lightest color fills the background, and subsequent rectangles add complexity.

Example CAPTCHA Background Image

Rendering the CAPTCHA String

Finally, we draw the random string onto the background. Letter color, y-coordinate, and rotation are randomized for added difficulty.

<?php $black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$textcolors = [$black, $white];

$fonts = [dirname(__FILE__).'\fonts\Acme.ttf', dirname(__FILE__).'\fonts\Ubuntu.ttf', dirname(__FILE__).'\fonts\Merriweather.ttf', dirname(__FILE__).'\fonts\PlayfairDisplay.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);

?>

Downloaded fonts provide character variation. Padding (15 pixels) is added, and the remaining space is divided evenly among the characters.

Example CAPTCHA Image (Background and Text)

Integrating the CAPTCHA into the Contact Form

Now, let's integrate the CAPTCHA into the contact form (assuming you have a pre-existing contact form). We'll use sessions to store and validate the CAPTCHA text.

The complete captcha.php code:

<?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[random_int(0, $input_length - 1)];
        $random_string .= $random_character;
    }
    return $random_string;
}

// ... (CAPTCHA image generation code from previous sections) ...

$_SESSION['captcha_text'] = $captcha_string;

// ... (rest of the CAPTCHA image generation code) ...

?>

Add this HTML above the "Send Message" button in your contact form:

<div class="elem-group">
    <label for="captcha">Please Enter the Captcha Text</label>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Create a Custom CAPTCHA and Contact Form in PHP ">
    <i class="fas fa-redo refresh-captcha"></i>
</div>

Add this JavaScript to allow refreshing the CAPTCHA:

var refreshButton = document.querySelector(".refresh-captcha");
refreshButton.onclick = function() {
  document.querySelector(".captcha-image").src = 'captcha.php?'   Date.now();
};

Example Contact Form with CAPTCHA

Finally, update your contact form processing script (contact.php) to validate the CAPTCHA:

<?php session_start();

if($_POST) {
    // ... (Your existing form processing code) ...

    if(isset($_POST['captcha_challenge']) && $_POST['captcha_challenge'] == $_SESSION['captcha_text']) {
        // ... (Process the form submission) ...
    } else {
        echo '<p>You entered an incorrect Captcha.';
    }
} else {
    echo '<p>Something went wrong</p>';
}

?>

This checks if the user's input matches the session-stored CAPTCHA text.

Conclusion

This tutorial created a custom PHP CAPTCHA and integrated it into a contact form, enhancing security and user experience with a refresh button. You can adapt this to use different CAPTCHA methods, such as math problems. For more advanced features, consider using plugins from CodeCanyon.

The above is the detailed content of Create a Custom CAPTCHA and Contact Form in PHP. For more information, please follow other related articles on the PHP Chinese website!