JavaScript PHP Code

PHP Captcha and reCaptcha options for web forms using javascript

Hi friends,
This is a simple code to build a captcha code with recaptcha options with simple javascript and PHP code. Now a days SPAM messages are increasing. To stop the SPAM and validating the forms with using this simple captcha code. This post explains how to build a simple captcha using javascript, php with few steps.

PHP Captcha and reCaptcha options for web forms using javascript | Anil Labs

PHP Captcha and reCaptcha options for web forms using javascript | Anil Labs

PHP Code:

//Start the session so we can store what the security code actually is

//Send a generated image to the browser

function create_image()
    //Let's generate a totally random string using md5
    //$md5_hash = md5(rand(0,999));
    //We don't need a 32 character long string so we trim it down to 5
   // $security_code = substr($md5_hash, 15, 4);
   $security_code = rand(1000,9999);
    //Set the session to store the security code
    $_SESSION["security_code"] = $security_code;

    //Set the image width and height
    $width = 120;
    $height = 35;

    //Create the image resource
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);
    $red = ImageColorAllocate($image, 252, 0, 0);

    //Make the background black
    ImageFill($image, 0, 0, $white);

    //Add randomly generated string in white to the image
    //ImageString($image, 5, 40, 7, $security_code, $white);
    $font = 'font1.ttf';
     imagettftext($image, 18, 0, 15, 28, $red, $font, $security_code);
    //Throw in some lines to make it a little bit harder for any bots to break
    //imageline($image, 0, $height/2, $width, $height/2, $grey);
    //imageline($image, $width/2, 0, $width/2, $height, $grey);
    //Tell the browser what kind of file is come in
    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format
    //Free up resources

In the HTML file:

<div class="top_spacing">
        <div class="user_width user_width_captcha"><img id="imgCaptcha" src="create_image.php" /><input id="btnCaptcha" type="button" value="&nbsp;" name="btnCaptcha" onclick="getParam()" /><div style="clear:both" ></div></div>

In JavaScript Code:

<script language="javascript" type="text/javascript">

function getParam()
      img = document.getElementById('imgCaptcha');
      //Change the image
      img.src = 'create_image.php?' + Math.random();

In StyleSheet Code:

 <style type="text/css">
 .top_spacing{ margin:5px 0px 0px 0px;}
.user_width_captcha{ background:#f5f5f5; border:1px solid #CCCCCC; padding:10px 0 10px 10px; margin-left:14px; width:160px}
.user_width_captcha img{ display:block; float:left}
.user_width{ width:150px; font:12px Arial, Helvetica, sans-serif; }
.user_width_captcha input{margin-top:5px; width:24px; height:24px; border:0; background:url(refresh.gif) no-repeat; float:left; margin-left:5px; cursor:pointer}


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.