Tag Archives: recaptcha example.

How to use reCAPTCHA on your website? Example

What is CAPTCHA?

CAPTCHA is very important tool to prevent your website from SPAM. CAPTCHA script asks your user to enter some random words which can only identified by human eye.

Why Use CAPTCHA?

If you have any HTML form on your website, where people can submit information. You need to have CAPTCHA to stop auto submission from a bot. Some examples of forms are comment form or User Registration form. CAPTCHA script saves the HTML forms from auto submissions and save it from SPAM.

How to integrate reCAPTCHA?

reCAPTCHA is a CAPTCHA service offered by Google Inc. reCAPTCHA is best CAPTCHA service offered anywhere and it is free to use. Below is the guide to use reCAPTCHA at your website.

Check out the example of Recaptcha. You can download the source code from here.

Step 1: Sign up for Recaptcha

Go to Recaptcha and Sign up for reCAPTCHA service. You need to have Google account to use this service.

Step 2: Register your Website

You need to register your website for reCAPTCHA service. Go to https://www.google.com/recaptcha/admin/create and create keys for your domain. You will get public and private key for your domain.

Step 3: Client Side Integration

Recaptcha provides you several means to integrate it at your website. I am using AJAX API to use it.

Include recaptcha ajax javascript inside your head tag

[cc lang=”javascript”]

[/cc]

Then before your submit button use this code :
[cc lang=”javascript”]

[/cc]

We need to validate the user’s response. So include the validate function onSubmit call of your form.
Below is the validateCaptcha method which you can use to validate Captcha entered by user.
[cc lang=”javascript”]
function validateCaptcha()
{
challengeField = $(“input#recaptcha_challenge_field”).val();
responseField = $(“input#recaptcha_response_field”).val();

var html = $.ajax({
type: “POST”,
url: “verify.php”,
data: “recaptcha_challenge_field=”+Recaptcha.get_challenge()+”&recaptcha_response_field=”+ Recaptcha.get_response(),
async: false
}).responseText;

if(html == “success”)
{
$(“#captchaStatus”).html(” “);
// Uncomment the following line in your application
return true;
}
else
{
$(“#captchaStatus”).html(“Your captcha is incorrect. Please try again”);
Recaptcha.reload();
return false;
}
}
[/cc]

Step 4 : Server Side Integration

Download the PHP Recaptcha lib and store it on your server.

Here is the code to verify the user’s input. You can create a separate file on your server.
[cc lang=”php”]
is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die (“The reCAPTCHA wasn’t entered correctly. Go back and try it again.” .
“(reCAPTCHA said: ” . $resp->error . “)”);
} else {
echo ‘success’;
}
?>
[/cc]

Thats it. Your Recaptcha is working. Try out a Demo of Recaptcha.