fbpx

How to Activate Google ReCAPTCHA Service on Your Website

Posted By: Sam Perugini
Date Posted: 16/01/2023

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.

  1. 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.

If you need help ...

As always if you need extra support regarding the content in this article our team at Hosting Australia have a range of development and security services that can help your website perform better and protect it from attack ...

Don't risk your valuable business asset.
Get in contact with us to talk about security, backups, speed optimisations and more.

WordPress Website Design

Hosting Australia has a team of expert WordPress Designers, all based in Australia and ready to assist you with any task. From a ground up new site build, updating security or plugins, or just changing some minor details - we can assist with all aspects on your site.

Hit the button below to find our more and get in contact with our design team today.