I am Blogger: How To Customize reCAPTCHA

[postlink]https://iamdaowner.blogspot.com/2012/06/how-to-customize-recaptcha.html[/postlink]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:


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.

<html>
<head>
<title>http://www.codeofaninja.com/ - 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
*/

#recaptcha_widget{
    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;
}

.text{
    margin: 0 0 5px 0;
}

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

#success-box{
    border: 4px solid #32CD32; 
    background-color: #00FF7F;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    width: 430px;
    margin: 0 0 5px 0;
    padding: 4px;
}
</style>
</head>
<body>
<?php
//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,
                        $_SERVER["REMOTE_ADDR"],
                        $recaptcha_challenge_field,
                        $recaptcha_response_field);

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>";
}else{
    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'
};
</script>

<!-- form tag comes first before table tag - always. -->
<form action='#' method='post' class='form'>
<table>
    <tr>
        <td align='right'>Email:</td>    
        <td><input type='text' name='email' /></td>
    </tr>
    <tr>
        <td align='right'>Password:</td>
        <td><input type='text' name='user_password' /></td>
    </tr>
    <tr>
        <td valign='top'>Word Verification.: </td>
        <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>

</div>

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

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdUOcYSAAAAALa38Uxegl8owzKXGomiSkV498n_"></script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdUOcYSAAAAALa38Uxegl8owzKXGomiSkV498n_" height="300" width="500" frameborder="0"></iframe>
    <br>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            
        <!-- 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!' />
        </div>
        
        </td>
    </tr>
</table>
</form>

</body>
</html>