How To Customize reCAPTCHA

Photo of Mike Dalisay
Modified Saturday, July 16, 2011
by - @ninjazhai
Have you ever received unsolicited (Spam) messages, comments or notifications in your email, facebook account, or to other services you are using online? Probably yes. I think almost all people using the internet experienced it already. There are trillions of spam messages sent every year.

One effective way to prevent those spam messages to your form is using a "Completely Automated Public Turing test to tell Computers and Humans Apart" or CAPTCHA in short. Google, Facebook, Yahoo, and other big internet companies uses this method. So today we are going to do a script that uses Google reCAPTCHA for our form. This tool by Google is widely used in the internet, maybe you're familiar with the red box image below:

Customized reCAPTCHA for your Form using PHP
Customizing your Google Recaptcha


Step 1: Download the recaptcha library here.

Step 2: We're going the have the following code on our index.php file.

<title> - Customized reCAPTCHA For Your Form using PHP</title>
<style type='text/css'>    
the customization of our recaptcha field
recaptcha_widget id is what we're customizing

    magin: 0;

#recaptcha_widget a{
    color: #000;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 15px 0 0 0;
    padding: 2px 4px 2px 4px;
    background-color: #F5DEB3;

#recaptcha_widget a:hover{
    background-color: #DEB887;

    margin: 0 0 5px 0;

just some message box style
when form is submitted
    border: 4px solid #FF0000; 
    background-color: #FA8072;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 430px;
    margin: 0 0 5px 0;
    padding: 4px;

    border: 4px solid #32CD32; 
    background-color: #00FF7F;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    width: 430px;
    margin: 0 0 5px 0;
    padding: 4px;
//defining indexes
isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = '';
isset( $_REQUEST['email'] ) ? $email = $_REQUEST['email'] : $email = '';
isset( $_REQUEST['user_password'] ) ? $user_password = $_REQUEST['user_password'] : $user_password = '';
isset( $_REQUEST['recaptcha_challenge_field'] ) ? $recaptcha_challenge_field = $_REQUEST['recaptcha_challenge_field'] : $recaptcha_challenge_field='';
isset( $_REQUEST['recaptcha_response_field'] ) ? $recaptcha_response_field = $_REQUEST['recaptcha_response_field'] : $recaptcha_response_field='';

require 'recaptcha/recaptchalib.php'; 
/* ---------------------------recaptcha code----------------------- */
//use your own private key here
$privatekey = "6LdUOcYSAAAAAGT-EbCqOldQ54GJhqG3ZdMkwLBG";
$resp = recaptcha_check_answer ($privatekey,

if (!$resp->is_valid) {
    $recaptcha = 'wrong';
} else {
    $recaptcha = 'correct';
/* ---------------------------recaptcha code----------------------- */
//when the form is submitted
if( $action == "signup" ){

$error_msg = '';

//if( empty($email) || empty($user_password)){
if( $email == '' || $user_password == ''){
    $error_msg .= "<div>-{$email}{$user_password}Field cannot be empty.</div>";

if( $recaptcha == 'wrong' ){
    $error_msg .= "<div>-You should enter characters that match the word verification.</div>";

if( $error_msg != '' ){
    echo "<div id='error-box'>";
        echo $error_msg;
    echo "</div>";
    echo "<div id='success-box'>";
        echo "Form successfully submitted.";
    echo "</div>";



-this script is needed since we
are customizing recaptcha 
-it comes first before the form tag - always
<script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'

<!-- form tag comes first before table tag - always. -->
<form action='#' method='post' class='form'>
        <td align='right'>Email:</td>    
        <td><input type='text' name='email' /></td>
        <td align='right'>Password:</td>
        <td><input type='text' name='user_password' /></td>
        <td valign='top'>Word Verification.: </td>
<div style='margin: 0px auto; text-align: center; width: 360px;'>

        <div class="field-space" style='text-align: left;'>
<!-- the id recaptcha_widget is what we're customizing -->
<div id="recaptcha_widget" style="display:none">

    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect, please try again</div>

    <div class="recaptcha_only_if_image" style='margin-bottom: 10px;'>Enter the words above : </div>
    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

    <div><input type="text" id="recaptcha_response_field" name="recaptcha_response_field" size='30' class='text' /></div>
    <span><a href="javascript:Recaptcha.reload()">Get Another Challenge</a>  </span> 
    <span class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Try Audio</a>  </span>
    <span class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Try Image</a>  </span>

    <span><a href="javascript:Recaptcha.showhelp()">Help</a></span>


<!-- user your own public key after "k="-->

<script type="text/javascript" src=""></script>
    <iframe src="" height="300" width="500" frameborder="0"></iframe>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">

        <!-- our hidden field and submit button here -->
        <div class="submit" style='float: left;'>
                <input type='hidden' name='action' value='signup' />
                <input type='submit' value='Sign Up!' />


That's it! :)
For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.