SpyreStudios

Web Design and Development Magazine

Build an HTML5 Signup Form with Dynamic CAPTCHA

by

Build an HTML5 Signup Form with Dynamic CAPTCHA

There are plenty of great tutorials on the Internet which follow along the typical CAPTCHA security technique. However after playing around in website interfaces I wanted to put together a dynamic CAPTCHA which slides into the form after everything else is completed. This effect should work in all modern browsers which support JavaScript, and we are also using some custom PHP for the backend script.

Below is my tutorial process for creating a dynamic sliding CAPTCHA form. If you’d like to check out my demo code feel free to download a copy of the project source as well. I’ll be skipping over some of the basic CSS styles so that we can focus more on the PHP and frontend jQuery. But web developers at any level of knowledge should be able to setup this code working on your own projects.

preview demo screenshot PHP CAPTCHA with jQuery animation tutorial

Live Demo – Download Source Code

Setting up the Document

We need to create a few documents and resources for this effect to work properly. I have created my own background image named captchabg.png which we’ll use as the BG resource. Additionally you should download a copy of the Crimes Times Six font and keep the file in your project directory. PHP can work directly with TTF fonts for embedding text into images on-the-fly. If you’d like to use another font family you should check out the directories inside DaFont.

Now we also need to create 4 separate documents. The main file “index.html”, along with the dynamic captcha.php which will display our image. Then a session-check.php file will be used by jQuery for determining the current PHP session variable through Ajax. And finally we need a styles.css to frame and design the whole webpage.

  <div id="w">
    <h1>Register for a New Account</h1>
    
    <form id="signup" name="signup" method="post" action="#">
      <div class="row">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" tabindex="1" autocomplete="off" class="formtext">
      </div>
      
      <div class="row">
        <label for="email">E-mail Address</label>
        <input type="email" name="email" id="email" tabindex="2" autocomplete="off" class="formtext">
      </div>
      
      <div class="row">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" tabindex="3" class="formtext">
      </div>
      
      <div class="row">
        <label for="password2">Repeat Password</label>
        <input type="password" name="password2" id="password2" tabindex="4" class="formtext">
      </div>
      
      <div id="captcontainer">
        <div class="row">
          <img src="captcha.php" alt="CAPTCHA Image" class="captchaimg">
        </div>
      
        <div class="row">
          <label for="captcha">CAPTCHA</label>
          <input type="text" name="captcha" id="captcha" tabindex="5" class="formtext">
          <!-- captcha font http://www.dafont.com/crimes-times-six.font -->
        </div>
      </div>
      
      <div id="resultscontainer">
        <input type="submit" name="submit" id="submit" value="Register!">
        <span id="submitresults"></span>
      </div>
    </form>
  </div>

This is all the main HTML code you’ll find inside the body tag. The form is split-up into a series of rows by properly labeled div elements. However notice the CAPTCHA is actually split into two different rows contained inside the ID #captcontainer. We want the image and input field to be hidden by default, and then only display them after some text has been entered into each field. The span #submitresults will hold some Ajax response data for the current session along with the user’s submitted CAPTCHA value.

Now the only fairly interesting bits of CSS would be my styles for the inner form. You can see how I have setup each row, and designed the input fields + submit button. However since the CSS doesn’t pertain much into the tutorial let’s forge ahead into the PHP CAPTCHA codes.

Captcha Image in PHP

As I mentioned before, we will be generating text over a blank .png pattern which will result in the finished CAPTCHA loaded on each page refresh. I will be working inside captcha.php which will actually become our final image URL if you noticed in the previous HTML code.

session_start();

$possible = '789bcdfghjkmnpqrstvwxyz';
$characters = 5;
$str = '';
$i = 0;

while ($i < $characters) { 
  $str .= substr($possible, mt_rand(0, strlen($possible)-1), 1);
  $i++;
}
$_SESSION['captchacode'] = $str;

Do not worry if you’re unfamiliar programming in PHP. My demo code works well enough that you do not need to edit anything. Although you may adjust some variables for customization and still have things running smoothly. However to delve into the logic a bit, we’ll be storing this random CAPTCHA text inside a PHP session variable. We are limiting to 5 characters and I have only included consonants(no vowels) which do not have similar designs in typography.

Now the next series of code contains more variable setups when generating the image. We need to include an X and Y coordinate to place the text on the image. Also we’re including the direct URLs for our PNG background and the TTF font file.

$imgX = 340;
$imgY = 70;
$image = imagecreatefrompng("images/captchabg.png");

$textcolor = imagecolorallocate($image, 46,40,31);

$font = "cts.ttf"; 
$fontsize = 30;
$angle = 16;

Note that many of these values should be straightforward when it comes to editing your own scripts. I have tried to leave the variable names as blatantly easy to understand as humanly possible. However I would ignore all the other lines of code which come afterwards. These generally do not need to be edited unless you are familiar with the individual PHP methods.

$box = imagettfbbox($fontsize, $angle, $font, $_SESSION['captchacode']);
$x = (int)($imgX - $box[4]) / 2;
$y = (int)($imgY - $box[5]) / 2;
imagettftext($image, $fontsize, $angle, $x, $y, $textcolor, $font, $_SESSION['captchacode']);

header("Content-type: image/png");
imagepng($image);
imagedestroy ($image);

A lot of PHP syntax is created by members of the open source community who need to fill a gap in their programming logic. The function imagettfbbox() seems just like this scenario where we need to load a series of letters into an image which are based on a TTF file. Also note the header() function is very important to let the parser know that we are outputting image data and NOT plaintext/PHP.

Detection in jQuery

And finally we get into the frontend scripting via jQuery code. The most complicated part of our script is probably the Ajax call, which you may choose to leave out of the finished product. Ajax validation looks cleaner on the user interface but can be a pain dealing with legacy browser support. Anyways let’s jump back to index.html and skip towards the very bottom of the page. You will notice a script tag containing the following codes.

$(document).ready(function(){
  $("input").keyup(function(){
    var val01 = $("#username").val();
    var val02 = $("#email").val();
    var val03 = $("#password").val();
    var val04 = $("#password2").val();
    
    // check if each input has at least one character
    // if yes, we display the CAPTCHA
    if(val01 != "" && val02 != "" && val03 != "" && val04 != "") {
      $("#captcontainer").slideDown(450);
    }
  });

I have created four different variables which target each of the different input fields. We are pulling the current value for each of them every time the user enters a new key. Once each field has at least 1 character then we open the CAPTCHA container div and allow the user to finish the registration form. Now let’s take a peek at the final Ajax connection.

  $("#signup").submit(function(e){
    e.preventDefault();
    var usercaptchaval = $("#captcha").val();
    if(usercaptchaval == "") {
      usercaptchaval = "None!";
    }
    
    $.ajax({
      url: "session-check.php",
      cache: false
    }).done(function(newstr) {
      var captchasolve = newstr;
      
      var newhtml = "
CAPTCHA Value: "+newstr+"
";
      newhtml += "Entered Text: "+usercaptchaval+"
";
      
      $("#submitresults").html(newhtml);
    });
  });
});

Initially we are checking if the user has not entered any text into the CAPTCHA field. If so then we setup the value “none!” as the return string. The internal Ajax block is connected to a script named session-check.php which is literally 2 lines of code. It will return the current CAPTCHA session value so we can output this directly onto the screen.

Now this block can be removed from your JS and the script will still run properly. However you will need to handle data submission on the backend in PHP, ideally the more safer method. Sessions and CAPTCHA images are definitely the best way to go for security purposes. And ideally these codes will offer some web developers a head start on that next project.

preview demo screenshot PHP CAPTCHA with jQuery animation tutorial

Live Demo – Download Source Code

Final Thoughts

It can be difficult following to setup dynamic CAPTCHA elements which are also checked via JavaScript. Most tutorials will validate PHP on the next form submission. And you may wish to update my code snippets to handle the form naturally as well.

But regardless I do hope this tutorial may offer some helpful techniques to web developers. Coding your own HTML5 CAPTCHA element is not easy, but we can see that it is entirely possible. Additionally this sliding effect can work great on any type of registration or login page. Grab a copy of my project source code and let us know your thoughts in the post discussion area below.