Posted: Monday 4th of February 2013

This tutorial teaches you how to create and add a simple but powerful Anti-Spam Captcha to your system or application using PHP.

A good way to avoid automatic form submissions when creating a web form or to prevent automated web robot tools and spammers from taking advantage of your forms and scripts is to use some kind of verification process.

One of the best ways is to use an image verification also known as Captcha. What it does is to dynamically create an image with a random string displayed on it. Then visitors or users of your website are asked to type that string in a text field and once the form is submitted, it checks if the string on the image matches the one inputted by the user.

Because there is no easy way to read a text from an image (image recognition) this is a good way to protect your web forms from spammers.

The system is very easy to understand and customize with good programming code comments to ease usability.

To install the system on your server, simply download the zipped folder containing the required files, extract the folder to your system and replace the receiver's email address in the file named vasplusCaptcha.php with your email address or your company's email address, save the file and upload the folder containing all the files to your server and you are done to start using the system.

To see the script in action, please click on the Live Demo button below and download if you like what you see.

HTML FILE:

<?php
session_start();
ob_start();
ini_set('error_reporting', E_NONE);

if(isset($_POST["submitted"]) && $_POST["submitted"] == 1)
{
    //Read POST request params into global vars
    $to_email          = "info@vasplus.info"; // Replace this email field with your email address or your company email address
    $from_fullname     = trim(strip_tags($_POST['fullname']));
    $from_email        = trim(strip_tags($_POST['email']));
    $email_subject     = 'TESTING CAPTCHA: '.trim(strip_tags($_POST['subject']));
    $email_message     = nl2br(trim(strip_tags($_POST['message'])));
    $security_code     = trim(strip_tags($_POST['vpb_captcha_code']));
    
    //Set up the email headers
    $headers      = "From: $from_fullname <$from_email>\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers   .= "Message-ID: <".time().rand(1,1000)."@".$_SERVER['SERVER_NAME'].">". "\r\n";   
    
    if($from_fullname == "")
    {
        $submission_status = '<div class="vpb_info" align="left">Please enter your fullname in the required field to proceed. Thanks.</div>';
    }
    elseif($from_email == "")
    {
        $submission_status = '<div class="vpb_info" align="left">Please enter your email address in the required email field to proceed.</div>';
    }
    elseif(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $from_email))
    {
        $submission_status = '<div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>';
    }
    elseif($email_subject == "")
    {
        $submission_status = '<div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed.</div>';
    }
    elseif($email_message == "")
    {
        $submission_status = '<div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>';
    }
    elseif($security_code == "")
    {
        $submission_status = '<div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>';
    }
    elseif(!isset($_SESSION['vpb_captcha_code']))
    {
        $submission_status = '<div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, try again.</div>';
    }
    else
    {
        if(empty($_SESSION['vpb_captcha_code']) || strcasecmp($_SESSION['vpb_captcha_code'], $_POST['vpb_captcha_code']) != 0)
        {
            //Note: the captcha code is compared case insensitively. If you want case sensitive match, update the check above to strcmp()
            $submission_status = '<div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, try again.</div>';
        }
        else
        {
            $vasplus_mailer_delivers_greatly = @mail($to_email, $email_subject, $email_message, $headers);
                    
            if ($vasplus_mailer_delivers_greatly) 
             {
                //Displays the success message when email message is sent
                  $submission_status = "<div align='left' class='vpb_success'>Congrats $from_fullname, your email message has been sent successfully!<br>We will get back to you as soon as possible. Thanks.</div>";
             } 
             else 
             {
                 //Displays an error message when email sending fails
                  $submission_status = "<div align='left' class='vpb_info'>Sorry, your email could not be sent at the moment. <br>Please try again or contact this website admin to report this error message if the problem persist. Thanks.</div>";
             }
        }
    }
}
?>



<!-- Required header files -->
<link href="css/style.css" rel="stylesheet" type="text/css">

<!-- This function refreshes the security or captcha code when clicked on the refresh link -->
<script type="text/javascript">
function vpb_refresh_aptcha()
{
    return document.getElementById("vpb_captcha_code").value="",document.getElementById("vpb_captcha_code").focus(),document.images['captchaimg'].src = document.images['captchaimg'].src.substring(0,document.images['captchaimg'].src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
</script>





<!-- Code Begins Here -->
<div class="vasplus_programming_blog_wrapper" align="left">
<center>
<div style="font-family:Verdana, Geneva, sans-serif; font-size:16px; float:left; width:120px;" align="left">Contact Form</div>
<div style="font-family:Verdana, Geneva, sans-serif; font-size:11px; float:left; padding-top:4px;" align="left">Please complete the form below to reach us...</div><br clear="all" /><br clear="all" />

<div style="width:430px; font-family:Verdana, Geneva, sans-serif; font-size:12px;padding:10px;" align="left">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">

<div style="width:100px;padding-top:10px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:11px;" align="left">Your Fullname:</div>
<div style="width:300px; float:left;" align="left"><input type="text" id="fullname" name="fullname" value="<?php echo strip_tags($_POST["fullname"]); ?>" class="vpb_input_fields"></div><br clear="all"><br clear="all">


<div style="width:100px;padding-top:10px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:11px;" align="left">Email Address:</div>
<div style="width:300px; float:left;" align="left"><input type="text" id="email" name="email" value="<?php echo strip_tags($_POST["email"]); ?>" class="vpb_input_fields"></div><br clear="all"><br clear="all">

<div style="width:100px;padding-top:10px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:11px;" align="left">Email Subject:</div>
<div style="width:300px; float:left;" align="left"><input type="text" id="subject" name="subject" value="<?php echo strip_tags($_POST["subject"]); ?>" class="vpb_input_fields"></div><br clear="all"><br clear="all">


<div style="width:100px;padding-top:10px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:11px;" align="left">Your Message:</div>
<div style="width:300px; float:left;" align="left"><textarea id="message" name="message" style="width:280px; height:80px; padding:10px;" class="vpb_input_fields"><?php echo strip_tags($_POST["message"]); ?></textarea></div><br clear="all"><br clear="all">


<div style="width:100px;padding-top:10px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:11px;" align="left">Security Code:</div>
<div style="width:300px; float:left;" align="left">
<div class="vpb_captcha_wrappers"><input type="text" id="vpb_captcha_code" name="vpb_captcha_code" style="border-bottom: solid 2px #cbcbcb;" class="vpb_input_fields"></div></div><br clear="all">
<div style="width:100px; float:left;" align="left">&nbsp;</div>
<div style="width:300px; float:left;" align="left"><div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all">
<div style=" padding-top:5px;" align="left"><font style="font-family:Verdana, Geneva, sans-serif; font-size:11px;">Can't read the above security code? <span class="ccc"><a href="javascript:void(0);" onClick="vpb_refresh_aptcha();">Refresh</a></span></font></div>

</div>
<br clear="all"><br clear="all">

<div style="width:420px; float:left;" align="left"><?php echo $submission_status; ?></div><!-- Display success or error messages -->
<div style="width:100px; float:left;" align="left">&nbsp;</div>
<div style="width:300px; float:left;" align="left">
<input type="hidden" id="submitted" name="submitted" value="1">
<input type="submit" class="vpb_general_button"  value="Submit">
</div>


</form>
</div>
<br clear="all">
</center>
</div>
<!-- Code Ends Here -->

PHP CAPTCHA CODE:

<?php 
session_start();

//You can do any necessary settings as you wish here
//If you reduce the width and height of the captcha here then you have to change it in the css file as well
$image_width = 280;
$image_height = 50;
$characters_on_image = 8;
$font = 'images/monofont.ttf';

//The characters that can be used in the CAPTCHA code. Avoid confusing characters (l 1 and i for example)
$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
$random_dots = 0;
$random_lines = 20;
$captcha_text_color="ee432e";
$captcha_noice_color = "ee432e";

$code = '';
$i = 0;
while ($i < $characters_on_image) 
{ 
    $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
    $i++;
}
$font_size = $image_height * 0.75;
$image = @imagecreate($image_width, $image_height);


/*Setting the background, text and noise colours here */
$background_color = imagecolorallocate($image, 255, 255, 255);

$arr_text_color = RGB_HEX($captcha_text_color);
$text_color = imagecolorallocate($image, $arr_text_color['red'], 
$arr_text_color['green'], $arr_text_color['blue']);
$arr_noice_color = RGB_HEX($captcha_noice_color);
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], 
$arr_noice_color['green'], $arr_noice_color['blue']);

/*This generates the dots randomly strings in background */
for( $i=0; $i<$random_dots; $i++ ) 
{
    imagefilledellipse($image, mt_rand(0,$image_width),
     mt_rand(0,$image_height), 2, 3, $image_noise_color);
}

/*This generates lines randomly strings in background of image */
for( $i=0; $i<$random_lines; $i++ ) 
{
    imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
     mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
}

/*This creates a text box and add 6 letters code in it */
$textbox = imagettfbbox($font_size, 0, $font, $code); 
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);

/* Show captcha image in the page html page */
header('Content-Type: image/jpeg');// defining the image type to be shown in browser widow
imagejpeg($image);//showing the image
imagedestroy($image);//destroying the image instance
$_SESSION['vpb_captcha_code'] = $code;

function RGB_HEX ($hexstr)
{
    $int = hexdec($hexstr);
    return array("red" => 0xFF & ($int >> 0x10),"green" => 0xFF & ($int >> 0x8),"blue" => 0xFF & $int);
}
?>

Click here for a Recommended Version which works with SMTP

Download Live Demo