If you are looking to install reCAPTCHA on your website, you need to know how to integrate it properly. Google offers a number of methods for doing this, including client and server side integration. Here are some ways to get started. First, create a form that will accept Google reCAPTCHA. Once that form is ready, add a code block for your visitors to enter in the form’s text box.
The first step to activate the service is to sign in to your Google account. Go to https://www.google.com/recaptcha/about/
From here you can go to the V3 Admin Console. On the top right of the page you’ll find a “+”. Click this to “Create”. This will take you to a setup page for your new captcha.
Enter the details for your website. Select reCaptcha version. Some forms only take reCaptcha v2. However reCaptcha v3 is the latest version. Enter all relevant details and save.
This will create a pair of keys to activate reCAPTCHA on your website. If you use a CMS you can use these keys to integrate reCaptcha to your Form Plugin. Or you can copy the code to your website manually. Clicking on “see client side integration” to find the code you need. You can copy this code and paste it into your <head> or <footer> section of your site on your Form Page.
Integrate to your site
CMS Integration. Follow the instructions on the CMS Plugin to enter both keys into the fields provided. This will automatically integrate your reCaptcha to your forms.
Manual Integration. This page https://developers.google.com/recaptcha/docs/v3 has instructions on how to use the code to manually
The easiest method for using reCAPTCHA v3 on your page is to include the necessary JavaScript resource and add a few attributes to your html button.
-
Load the JavaScript API.
<script src="https://www.google.com/recaptcha/api.js"></script>
-
Add a callback function to handle the token.
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script> -
Add attributes to your html button.
<button class="g-recaptcha"
data-sitekey="reCAPTCHA_site_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
If you use V2 you can choose the familiar “I am not a robot” tickbox. Or you can choose the invisible version which works same as the new V3 reCaptcha works.
If you use V3 it will be invisible but you will see a google reCaptcha Icon at the bottom right of the screen to indicate it is installed.
Both methods work and all you spam coming through the contact page will stop almost immediately.