This tutorial will show you how to create a captcha form to stop automatic submissions, to premis is simple out of 6 letter there's 3 black ones these must match when the form is submitted or an error message is presented.

Demo: https://demos.dcblog.dev/captcha

Download: https://github.com/daveismynamecom/captcha

There are 3 files required:

Index.php - where the form is
captcha.php - generated the captcha image
gaptcha.jpg - captcha image

The Form

The form consists of an image in the src we pass the path to captcha.php this will generate the captcha image, we also provide a link to change the image without having to reload the page.

The input field is where the user will enter the 3 black characters from the image.

<form action="" method="post">
<p>Only enter the 3 <b>black</b> characters:</p>
<p><img src="captcha.php" alt="captcha image" id="captcha"><a href="#" onclick="document.getElementById('captcha').src = 'captcha.php?' + Math.random(); return false">Reload Image</a><br /><input type="text" id="captcha" name="captcha" size="3" maxlength="3"></p>
<p><input type="submit" name="submit" value="Submit" />
</form>

Validation

To validate the correct sequence has been entered we need to check what's in the session in order to use sessions we need to turn sessions on at the very top of the file add:

session_start();

To run the validation a check is made to make sure the form has been submitted if it has the it will run the code inside the { }

The session captcha is created inside captcha.php

The next step is to check the contents of the session matches the form input field called captcha, if there is no match an error is shown, likewise if there is a match a message is shown.

//run the code only if the form has been submitted
if(isset($_POST['submit'])){

    if($_SESSION["captcha"]!==$_POST["captcha"])
    {
        echo 'Characters do not match the black characters on the image.';
    } else {
        echo 'Matched';
    }
}

The captcha file

The following is placed in its own file it creates the characters that are embedded onto the captcha image, the image is simple a background image to start with:

The image should be in the same directory as the captcha.php file if its not change the path accordingly below:

<?php
session_start();
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

function _generateRandom($length=6)
{
    $_rand_src = array(
        array(48,57) //digits
        , array(97,122) //lowercase chars
//        , array(65,90) //uppercase chars
    );
    srand ((double) microtime() * 1000000);
    $random_string = "";
    for($i=0;$i<$length;$i++){
        $i1=rand(0,sizeof($_rand_src)-1);
        $random_string .= chr(rand($_rand_src[$i1][0],$_rand_src[$i1][1]));
    }
    return $random_string;
}

$im = @imagecreatefromjpeg("captcha.jpg");
$rand = _generateRandom(3);
$_SESSION['captcha'] = $rand;
ImageString($im, 9, 2, 2, $rand[0]." ".$rand[1]." ".$rand[2]." ", ImageColorAllocate ($im, 0, 0, 0));
$rand = _generateRandom(3);
ImageString($im, 9, 2, 2, " ".$rand[0]." ".$rand[1]." ".$rand[2], ImageColorAllocate ($im, 255, 0, 0));
Header ('Content-type: image/jpeg');
imagejpeg($im,NULL,100);
ImageDestroy($im);
?>

That's it with 2 files you can stop automatic submissions extremely useful for contact forms.

Creating a simple captcha form with validation

Table of Contents

The Form

Validation

The captcha file