SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Build an HTML5 Signup Form with Dynamic CAPTCHA

January 22, 2013 by Jake Rocheleau

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.

Filed Under: Tutorial Tagged With: animation, captcha, dynamic, javascript, php, tutorials

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022