Вы инициализируете капчу с помощью HTML, поэтому она рендерится всего один раз. Чтобы добавить их несколько на сайт, надо инициализировать капчу с помощью JavaScript.
Для начала, подключайте API таким образом:
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>
Параметр
render со значением
explicit говорит, что капча будет инициализироваться не через HTML, а через JavaScript. А параметр
onload содержит название JavaScript-функции, которая исполнится в момент загрузки страницы (в нашем случае это
recaptchaCallback()
).
Теперь, собственно, надо написать какой-то JavaScript. Выглядеть он будет примерно так:
var feedbackCaptcha;
var authCaptcha;
function recaptchaCallback() {
feedbackCaptcha = grecaptcha.render('feedback_captcha', {
'sitekey' : 'ваш_site_key',
'theme' : 'dark'
});
authCaptcha = grecaptcha.render('auth_captcha', {
'sitekey' : 'ваш_site_key'
});
}
Тут мы создаем функцию
recaptchaCallback()
, при вызове которой будут рендериться две капчи: одна в элементе
#feedback_captcha
, а вторая - в
#auth_captcha
. У первой капчи будет тёмная тема.
Разместим мы капчу на сайте примерно так:
<form>
<!-- тут какие-то поля для оставления отзыва о сайте -->
<div id="feedback_captcha"></div>
</form>
<form>
<!-- тут какие-то поля для авторизации -->
<div id="auth_captcha"></div>
</form>
Для чего мы заключаем функции, которые рендерят капчу, в переменные? А нужно это для того, чтобы мы могли индивидуально для каждой капчи исполнять методы. Например, хорошо бы при каждой отправке AJAX-формы авторизации сбрасывать капчу. Сбрасывать мы будем ее так:
grecaptcha.reset(authCaptcha)
Также почитайте документацию:
developers.google.com/recaptcha/docs/display