#image captcha

1) Create your four images and name them something generic, such as, "1.png, 2.png..."

2) Find the opening form tag in your code. Just before this point you will add code to do the following:

a) Generate a four element array of unique IDs. For the ColdFusion folks out there, something like this:

<cfset imagesArray = [ { file:"1.jpg", name:"cat", UUID:createUUID() }, { file:"2.jpg", name:"dog", UUID:createUUID() }, { file:"3.jpg", name:"fish", UUID:createUUID() }, { file:"4.jpg", name:"bird", UUID:createUUID() } ]>

b) Randomly sort your array. With a nod to PHP, it looks something like this:

shuffle( $imagesArray );

c) Pick a random number between 1 and 4 (CFML):

<cfset randNum = randrange( 1, 4, "SHA1PRNG" )>

d) Copy the array item at the matching index to our random number: (PHP):

$captchaAnswer = $imagesArray[ $randNum ];

e) Store the correct answer in the user's session (CFML): 

<cfset session.captchaAnswer = captchaAnswer.UUID>

Here's what we've done so far: -- created an array of images, each with a unique id -- randomized the order of these images -- randomly chose one of the images as the challenge -- stored the correct answer in the user's session scope

f) Next, find the end of your form, just before the submit button or closing form tag (whichever comes first).

g) Display the captcha challenge (CFML):

<p>Please click the #captchaAnswer.name# to prove you're human:</p>

h) Loop over the array of images and output them in your form (CFML): 

<cfloop array="#$imagesArray#" index="thisImg"> <img src="#thisImg.file#" data-captchaAnswer="#thisImg.UUID#" class="captchaImg"> </cfloop>

i) Add a hidden input to the form and name/id it "captchaAnswer" (HTML):

<input type="hidden" name="captchaAnswer" id="captchaAnswer" value="">

j) Create some javascript to handle the click event on a captcha image (jQuery): 

<script> // when the user clicks a captcha image $(document).on( "click", "img.captchaImg", function() { // get the answer value var thisAnswer = $(this).attr( "data-captchaAnswer" ); // and insert it into our hidden field $("#captchaAnswer").val( thisAnswer ); // also, let's add a class to our selected image $(this).addClass("captchaAnswer"); // and remove that class from any other images $(this).siblings().removeClass("captchaAnswer"); } ); </script>

Here's what we've done: -- added the captcha challenge to the form -- added a hidden field to collect the user's captcha answer -- created javascript to record the user's answer into the hidden field

k) And finally, in the code that processes your form post, the following test to decide whether or not the form submission should be saved (PHP):

// if the form captcha answer equals the session captcha answer if ( $_POST['captchaAnswer'] == $_SESSION['captchaAnswer'] ) { // ... process this form submission // if the answer was wrong } else { // ... alert user to failure }

That's all there is to it

Download Source Code