Get a reCAPTCHA account
1
Log into your Google account. To get one, signup 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 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 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 would have created two keys; a site key and a private key.
Copy the site key. It is the one you will integrate into your webpage.
The following snippet goes before the closing </head> tag on your web page, or between the closing body and html elements - </body> paste here </html> - of the webpage:
<script src='https://www.google.com/recaptcha/api.js'>
Paste the following snippet at the end of the <form> where you want the reCAPTCHA widget to appear:
<div class="g-recaptcha" data-sitekey="site-key" data-callback="onSuccess">>/div>
Note:
-
1. paste the site-key in the code snippet
2. 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. Results in this:
Process Google's response
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: the onsubmit="return validate()" - the return is required for the form to process the response returned from the validate() function
6
Add the following code to the bottom of your web page, just above the closing </html> 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 src='https://www.google.com/recaptcha/api.js'></script><script>
var success = 0;
var onSuccess = function(response) {
success=1;
}
function validate() {
if(success==1){
success=0;
return true;
}
else{
success=0;
document.getElementById("msg").innerHTML = "Error: Invalid Submission";
return false;
}
}
</script>
Code with Comments
| <script src='https://www.google.com/recaptcha/api.js'></script> | this is the code snippet from step 4 |
|
<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: Invalid Submission"); return false; } |
the toggle is off, so display an error, do not process form (return false), reset switch to be safe |
|
} </script> |