Как видно из документации по 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>
"Живой" пример вы можете увидеть вот здесь