How To Customize reCAPTCHA
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 on the internet, maybe you’re familiar with the red box image below:
Download the recaptcha library here.
We’re going the have the following code on our index.php file.
<html>
<head>
<title>https://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>
That’s it! :)
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.