How to Create a Captcha enabled Web Form in 5 Minutes

In this tutorial, you will learn about how to create a contact form with captcha verification using PHP / HTML. I assume you have the prior knowledge of HTML and PHP to understand this tutorial.

Let's understand Captcha first:

It's a kind of test to know if the response is generated by a human or generated by a software / bot.

Common Captcha Test:

The user needs to enter the letters from a distorted image in the text box. This text is difficult to read / decode by softwares / bots but can be easily read by humans.

Here is the step by step procedure:

Step 1: This requires you to create a PHP file for creating captcha image with text. Create a PHP file Captcha.php and save it in your local folder. Copy and paste the code below in this file.

<?php

session_start();

//To generate 5 digit random number
$text = rand(10000,99999);

//To assign this number to session variable
$_SESSION["captchacode"] = $text;

//To set image height and width
$height = 25;
$width = 65;

//To create image using imagecreate function 
$cimage = imagecreate($width, $height);
$bg_color = imagecolorallocate($cimage, 0, 0, 0);
$text_color = imagecolorallocate($cimage, 255, 255, 255);

$font_size = 14;//To set the fint size of teh captcha text
 
imagestring($cimage, $font_size, 5, 5, $text, $text_color);//Create captcha text on image
imagepng($cimage);

?>

Step 2: This requires you to create a PHP file for creating a contact form. Create a PHP file Captcha_Form.php and save it in your local folder. Copy and paste the code below in this file.

<table width="300" align="left" cellpadding="1" cellspacing="1">

<form action="submit_form.php" method="post">

<tr>
    <td>Name: </td>
    <td><input type="text" name="name" size="10" maxlength="10" tabindex="1"></td>
</tr>

<tr>
    <td>Email:</td>
    <td><input type="text" name="email" size="20" maxlength="20" tabindex="2"></td>
</tr>

<tr>
    <td>Enter Code:  </td>
    <td><input type="text" name="captchacode" size="5" maxlength="5" tabindex="3" />
    <span style= "margin-left: 10px; margin-bottom: 0px;">
        <img src="captcha.php"></span>
    </td>
</tr>

<tr>
    <td/>
     <td><input type="submit" name="Submit" value="Submit"/></td>
</tr>

</form>

</table>

Step 3: This requires you to create a PHP file to verify the cpatcha code with the code in captcha image. Create a PHP file Submit_Form.php and save it in your local folder. Copy and paste the code below in this file.

<?php

session_start();

if ($_POST["captchacode"] != $_SESSION["captchacode"] OR $_SESSION["captchacode"]=='') 
     echo  '<strong>You are not Human.</strong>';
else
{
     // add form data processing code here
     echo  '<strong>You are Human.</strong>';
}

?>

Final Output:

You need to test the captcha in a browser. Open Captcha_Form.php in your browser. The form will look like this:

How to Test:

You can test the this form by entering captcha code from the image in the Enter Code text box. If the captcha code matches with the code in captcha image it will display You are Human else it will display You are not Human.