There are lots of different ways to create captcha image using PHP. But what we forget is our USER. Now a days I found that Google’s re-captcha is very difficult even to read. Most of the time users dis-appears from the page where there a captcha.

I think the captcha should be easy to understand and readable to the user. So that user can happily entered the captcha code to post a comment or submit a contact form. Keeping this in mind, I have created one PHP catcha which is good to see with engrave look. Make sure you prettify HTML form with CSS!

Download

The PHP pretty captcha function

Save it as ny-pretty-captcha.php

function ny_pretty_captcha($img_w, $img_h, $length, $bg_color, $font_file, $font_size, $color, $shadow) {

  if(!isset($_SESSION)){session_start();} # check whether session has already started
  $w = $img_w; # set captcha image width
  $h = $img_h; # set captcha image height
  $len = $length; # set captcha code length
  $code= '';
  $letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  $image = @imagecreate($w, $h) or die('Cannot initialize GD!'); # creating captcha image
  $imgbg = $bg_color; # set background color for captcha image
  $font = $font_file; # specify font file ie. arial.ttf
  $size = $font_size; # set captcha font size
  $color1 = $color; # set base color value in ANSI ie. 207
  $color2 = $shadow; # set shadow color value in ANSI ie. 255

  imagecolorallocate($image, $imgbg,$imgbg,$imgbg);

  for( $i=0; $i<$len; $i++ ) {
    $chars = substr($letters, rand(0, strlen($letters)-1), 1);
    $code .= $chars;
  }

  $base_color = imagecolorallocatealpha($image, $color1, $color1, $color1, 0); # main text color
  $shaow_color= imagecolorallocatealpha($image, $color2, $color2, $color2, 0); # text shadow color
  $str_w = imagettfbbox($size,0,$font,$code); # get text width
  $x = floor(( imagesx($image) - $str_w[2] ) / 2); # setting text horizontally center
  $y = floor(( imagesy($image) - $str_w[5] ) / 2); # setting text vertically middle

  imagettftext($image, $size, 0, $x+1, $y, $shaow_color, $font, $code);
  imagettftext($image, $size, 0, $x, $y-1, $base_color, $font, $code); # this text overlaps to shadow text. similar to CSS's text-shadow effect

  header('content-type: image/gif'); # set the header for GIF image
  imagegif($image); # generate GIF image
  imagedestroy($image); # destroy last generated image

  $_SESSION['nyPrettyCaptcha'] = strtolower($code);
}

#USAGE
return ny_pretty_captcha(
    $img_w     = 100,
    $img_h     = 28,
    $length    = 5,
    $bg_color  = 207,
    $font_file = 'fonts/arial.ttf',
    $font_size = 16,
    $color     = 120,
    $shadow    = 250
);

The HTML form

<form id="captcha_form" name="captcha_form" action="" method="post">
  <img src="ny-pretty-captcha.php" id="captchaImage">
  <a id="reloadCaptcha" href="javascript:;">Reload</a>
  <input id="securecode" name="securecode" type="text" maxlength="5">
</form>

jQuery snippet to randomly change captcha image

$(function() {
  $('#reloadCaptcha').click(function() {
    $('#captchaImage').attr('src', 'ny-pretty-captcha.php?' + Math.random());
    return false;
  });
});

PHP Captcha Validation

if( isset( $_POST['submit'] ) ) {
  $capthaCode = isset( $_POST['securecode'] ) ? strtolower( $_POST['securecode'] ) : '';
  if ( empty($capthaCode) || $capthaCode != $_SESSION['nyPrettyCaptcha'] ) {
    echo 'Invalid Captcha code';
  } else {
    unset($_SESSION['nyPrettyCaptcha']);
  }
}

Download

You might also like: