How do I insert multiple reCAPTCHA on one page?

As can be seen from the reCAPTCHA documentation, by default it is installed only on the first form that appears and creates its own “widget” only there. However, there is also an “explicit” mode, which allows you to specify yourself where to hang reCAPTCHA. And thanks to this, you can put them at least a hundred pieces on one page. In almost exactly the same way, “invisible” Google captchas are installed that determine the bots themselves and show them captcha at the slightest suspicion.

Now I will share how to do it.

Before preparing all this meat, we need several forms in which you want to add reCAPTCHA. To indicate that captcha should really appear in this form, you will need to add a div with the g-recaptcha class to it. More or less like this:

<form action="#" method="POST">
    <p>Field first form:</p>
    <p><input type="text" name="supertext" value="" /></p>
    <p>Confirm that you are not a robot: </p>
    <p><div class="g-recaptcha"></div></p>
    <p><input type="submit" value="Send" /></p>
</form>
<form action="#" method="POST">
    <p>Field second form:</p>
    <p><input type="text" name="supertext" value="" /></p>
    <p>Confirm that you are not a robot: </p>
    <p><div class="g-recaptcha"></div></p>
    <p><input type="submit" value="Send" /></p>
</form>

Then you need to connect the script with the reCAPTCHA api and specify there the function that will be called after the script is downloaded, as well as the "explicit" mode.

We will copy this code from the official documentation.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
</script>

Next, we need to create now the very function onloadCallback, which will sort through all these divas and set on them the function grecaptcha.render.

<script>
      var onloadCallback = function() {
        var divcaptcha = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < divcaptcha.length; i++) {
          grecaptcha.render(divcaptcha[i], {
            'sitekey': 'HERE A KEY ISSUED BY GOOGLE'
          });
        }
      };
</script>

You can see a live example here.