Как вставить несколько reCAPTCHA на одной странице?

Как видно из документации по reCAPTCHA, по умолчанию она устанавливается только на первую попавшуюся форму и создаёт свой «виджет» только там. Однако, там так же присутствует «explicit» режим, который позволяет указывать самому, куда вешать reCAPTCHA. И благодаря этому можно поставить их хоть сто штук на одной странице. Практически точно так же ставятся и «невидимые» гугл капчи которые определяют ботов самостоятельно и показывают им капчу при малейшем подозрении.

Сейчас я поделюсь, как это сделать.

Перед подготовкой всего этого мяса нам нужно несколько форм в которые вы хотите добавить reCAPTCHA. Чтобы указать, что в этой форме действительно должна появиться капча, в неё нужно будет добавить div с классом g-recaptcha. Примерно так:

<form action="#" method="POST">
    <p>Поле первой формы:</p>
    <p><input type="text" name="supertext" value="" /></p>
    <p>Подтвердите, что вы не робот: </p>
    <p><div class="g-recaptcha"></div></p>
    <p><input type="submit" value="Отправить" /></p>
</form>
<form action="#" method="POST">
    <p>Поле второй формы:</p>
    <p><input type="text" name="supertext" value="" /></p>
    <p>Подтвердите, что вы не робот: </p>
    <p><div class="g-recaptcha"></div></p>
    <p><input type="submit" value="Отправить" /></p>
</form>

Затем необходимо подключить скрипт с api reCAPTCHA и указать туда функцию которая вызовется после загрузки скрипта, а так же режим «explicit».

Скопируем этот код из официальной документации.

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

Следом, нам нужно создать теперь саму эту функцию onloadCallback, которая будет перебирать все эти дивы и натравливать на них функцию 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': 'ЗДЕСЬ КЛЮЧ ВЫДАННЫЙ ГУГЛОМ'
          });
        }
      };
</script>

«Живой» пример вы можете увидеть вот здесь