Get a reCAPTCHA account
1
Log into your Google account. To get one, sign up for a gmail account at https://gmail.com.
2
Go to the Google reCAPTCHA site at https://www.google.com/recaptcha
3
Click on the Get reCAPTCHA link in the top right hand corner.
Register for a Site Key and a Secret Key (previously called a private key).
Provide a label (a name) for easy recognition, useful if you'll have multiple keys.
Enter the domain names of the sites that will be using the key. This is an important step to allow Google to confirm the site communicating with it is the one you intended.
Save your changes
Copy and insert the reCAPTCHA code snippets
4
At this point Google will have created two keys; a Site Key and a Secret Key.
Copy the Site Key. It is the one you will integrate into your HTML web page.
The following snippet goes right before the closing </head> tag on your web page:
<script src='https://www.google.com/recaptcha/api.js'></script>
Paste the following snippet inside your <form> tag, right where you want the reCAPTCHA widget to
appear:
<div class="g-recaptcha" data-sitekey="site-key" data-callback="onSuccess"></div>
Note:
- Paste your actual Site Key in the
data-sitekeyattribute. - We added the data-callback which will be used to execute a function that checks the response from google after the user validates if they are a human and not a robot.
Process Google's response (Client-Side)
5
Add an onsubmit statement to your form to call a function that will be used to confirm Google's response when the user validates they are not a robot. For example:
<form action="mail.php" method="post" id="contact_form" onsubmit="return validate();">Note: In the onsubmit="return validate()" - the return is required for the form to process the response returned from the validate() function.
6
Add the following JavaScript code to the bottom of your web page, just before the closing </body> tag.
We have provided two versions of the code; one without comments for easier copying and the other with comments explaining what is happening at the key points.
Code without Comments
<script>var success = 0;
var onSuccess = function(response) {
success = 1;
};
function validate() {
if (success == 1) {
success = 0;
return true;
} else {
success = 0;
alert("Error: Please complete the reCAPTCHA challenge.");
return false;
}
}
</script>
Code with Comments
| <script> |
|
| var success = 0; | will use as a toggle switch |
| var onSuccess = function(response) { | check google response |
| success=1; } |
responded, so turn on switch |
| function validate() { | reCaptcha was clicked |
| if(success==1){ | if toggle switch is on |
| success=0; return true; } |
reset toggle and process form (return true) |
| else
{ success=0; alert("Error: Please complete the reCAPTCHA challenge."); return false; } |
the toggle is off, so display an error alert, do not process form (return false), reset switch to be safe |
| } </script> |
Server-Side Validation (CRITICAL)
7
Client-side JavaScript is not enough to stop bots. Bots do not use web
browsers and will simply ignore your JavaScript and submit data directly to your form's action file (e.g.,
mail.php). You must verify the user's response on your server using your
Secret Key before processing the form data.
Below is a basic PHP example of how you would verify the token inside your mail.php file:
// 1. Grab the token submitted by the form
$responseKey = $_POST['g-recaptcha-response'];
// 2. Define your Secret Key (keep this safe!)
$secretKey = "YOUR_SECRET_KEY_HERE";
$userIP = $_SERVER['REMOTE_ADDR'];
// 3. Make a POST request to Google's API to verify the token
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);
$response = json_decode($response);
// 4. Check the result
if($response->success) {
// The user is a confirmed human! Safe to process the email.
} else {
// Bot detected or CAPTCHA failed! Stop execution.
die("reCAPTCHA validation failed.");
}
?>