Несколько reCAPTCHA на одной странице

Как вывести reCAPTCHA в нескольких формах на одной странице: явный рендер виджетов через grecaptcha.render и проверка каждой формы.

Если на странице несколько форм (заявка, обратный звонок, подписка), стандартное подключение reCAPTCHA отрисует виджет только в одной. Решение — явный рендер: создаём виджет в каждой форме сами.

1. Контейнер в каждой форме

<form id="callback-form"> … <div id="captcha-callback"></div> … </form>
<form id="request-form"> … <div id="captcha-request"></div> … </form>

2. Рендер виджетов

<script>
var captchaWidgets = {};
var onloadCallback = function () {
  var siteKey = 'КЛЮЧ_САЙТА';
  captchaWidgets.callback = grecaptcha.render('captcha-callback', { sitekey: siteKey });
  captchaWidgets.request = grecaptcha.render('captcha-request', {
    sitekey: siteKey,
    theme: 'dark',        // по умолчанию light
    size: 'compact'       // по умолчанию normal
  });
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Параметр render=explicit отключает автоматическую отрисовку, а onload вызывает нашу функцию, когда библиотека загрузилась. Функция должна быть объявлена до подключения скрипта.

3. Ответ конкретной формы

Каждый виджет кладёт ответ в скрытое поле g-recaptcha-response внутри своей формы, поэтому при обычной отправке сервер получает ответ нужного виджета. Если форма отправляется через JavaScript, ответ берут по идентификатору виджета:

var token = grecaptcha.getResponse(captchaWidgets.request);
// после отправки — сбросить виджет
grecaptcha.reset(captchaWidgets.request);

Проверка на сервере такая же, как для одной формы, — см. «Как подключить Google reCAPTCHA к форме на PHP».