By Sam Deering

Easy Captcha Setup Using jQuery/AJAX/PHP

By Sam Deering


What is a captcha?

These days when you are using forms you need some sort of protection from bots and spammers. One way to reduce spam is to use something called a Captcha – it simple puts a human readable words which the use has to type into a box to prove they are human. There are many free ones out there and I have used a few and found the Google reCaptcha to be pretty easy to install and use.

jQuery Captcha Demo
Download Source Files

    • showform.php
    • jquerycaptcha.js
    • validateform.php
    • recaptchalib.php

How it works


A common problem solved

The user has entered the captcha and got it wrong. Now when they click back they lose all thier form data in the fields they just filled out! Disaster! Fortunately, I’ve come up with a way to send an AJAX request so that no form input data is lost if the captcha is wrong. If the captcha is right the user is simply prompted to submit.

How to setup your form captcha

Step 1. You need to get your own setup keys from Google reCaptcha Website. You will get both a private key and a public key you need both for it to work.

Step 2. Download and save recaptchalib.php.

Step 3. The jQuery Code – jquerycaptcha.js

//Validate the Recaptcha' Before continuing with POST ACTION
function validateCaptcha()
	challengeField = $("input#recaptcha_challenge_field").val();
	responseField = $("input#recaptcha_response_field").val();

	var html = $.ajax({
		type: "POST",
		url: "../php/validateform.php",
		data: "form=signup&recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
		async: false

	//console.log( html );
	if(html == "success") {
		//Add the Action to the Form
		$("form").attr("action", "../php/db-process-form.php");
		$("#submit").attr("value", "Submit");
		//Indicate a Successful Captcha

Success! Thanks you may now proceed.

"); } else { $("#captcha-status").html("

The security code you entered did not match. Please try again.

"); Recaptcha.reload(); } }

Step 4. The PHP Code1 – validateform.php


$privatekey = "[yourprivatekeyhere]";
$resp = recaptcha_check_answer ($privatekey,

if (!$resp->is_valid) {
	// What happens when the CAPTCHA was entered incorrectly
    echo "fail";
} else {
	echo "success";

Step 5. The PHP Code2 – showcaptcha.php

$publickey = "[yourpublickeyhere]";
// show the captcha
echo recaptcha_get_html($publickey);

Step 6. The HTML Code

I agree to the terms-and-conditions Terms and Conditions 

Type in the words below (separated by a space):

Step 7. A nice touch
A nice touch would be to hide the Captcha until the user has filled out the form or ticked an agree to terms and conditions button. Here is how you do it.

$(document).ready(function() {
	if ($('input[name=termsckb]').attr('checked') != true) {

	$('#termsckb').change(function() {
		 if ($('input[name=termsckb]').attr('checked') == true) {
			 $("#signupbutton").attr("value", "I am human!");
		 else {
			 $("#signupbutton").attr("value", "Submit");

Step 8. Customise the captcha style
You can change the style and colour of the captcha to suit your website. There are 4 different choices on the official site: red, white, black and transparent.


See Customizing the Look and Feel of reCAPTCHA for more info. I personally prefer the clear (transparent) option.

  • Pingback: Easy Captcha Setup Using jQuery/AJAX/PHP « Big Engine Media()


    Does the Google’s reCaptcha work with submodal like facebox or other iframe popups ?

  • on submit of form the code won’t work
    help me out

  • ice

    what if someone send post data directly to php file :)
    how will you check the captcha is valid? or even sent? :)

  • Pingback: 10 Cool jQuery with PHP Plugins | jQuery4u()

  • Fonzie

    Who have problems, replace:
    data: “form=signup&recaptcha_challenge_field=” + challengeField + “&recaptcha_response_field=” + responseField,


    data:{form:”signup”,recaptcha_challenge_field:challengeField, recaptcha_response_field:responseField},

    • vince

      you are referring on what problem?. My problem is that i always got a fail message. even if i got it right.

  • Angga Dwi Pratama

    Thanks aloot.. for Sam Deering..
    now i can make ajax form with recaptcha inside my wordpress website..
    your daamn good man..

  • VBR

    Thank you very much..
    It is working for my site

    • vince

      what your site?

  • vince

    hi i always got a fail even if i got the captcha right.

  • Karan Yadav

    Sorry, Friend Big Issue in this Script…
    If You write first Word correct but if You write second Word Wrong So, Success …? Why …? I not write 2 Word Correct.

  • working perfect…

  • Kamlesh Chauhan

    Sam… It’s wonderful article … working perfectly … thanks.

    I have just one query!

    At this time form submitted after click submit button twice.. once when entered captcha code and second one after captcha code entered correctly. Could we submit the field form by single click of submit button if captcha code entered correctly?

  • kaanjeepan

    sry this is not work for me.Just alert after enter submit button the input value is not alerting and then function is not move to next step plz any help me out.

  • When i check the checkox, nothing appen, so i put the value of ‘input[name=termsckb]’).attr(‘checked’) in an alert and that is the result : undefined. Funny ?

  • Adrian Marinescu

    Can you help me with some improvements to your code to use it with reCAPTCHA v2? Thank you.

  • Jubin Kim

    the double quotes in step 2 captcha-status html is breaking javascript

Get the latest in JavaScript, once a week, for free.