How to install more than one reCaptcha per page?

Question

JavaScript

Good day. Faced a problem. There are several forms on the page: "feedback", "online application", "we will call you back". Spam began to pour in, we decided to install reCaptcha, but when it is connected, it is displayed in 1 form, but those below are not. Can this be fixed somehow?

Answer 1

You are initializing the captcha with HTML, so it only renders once. To add several of them to the site, you need to initialize the captcha using JavaScript.
First, connect the API like this:
The render parameter with the explicit value says that the captcha will be initialized not through HTML, but through JavaScript. And the onload parameter contains the name of the JavaScript function that will be executed when the page is loaded (in our case, it is recaptchaCallback()).
Now, in fact, you need to write some JavaScript. It will look something like this:

var feedbackCaptcha;
var authCaptcha;

function recaptchaCallback() {
  feedbackCaptcha = grecaptcha.render('feedback_captcha', {
    'sitekey' : 'ваш_site_key',
    'theme' : 'dark'
  });
  
  authCaptcha = grecaptcha.render('auth_captcha', {
    'sitekey' : 'ваш_site_key'
  });
}

Here we create a function recaptchaCallback()that, when called, will render two captchas: one in the element #feedback_captcha, and the second - in #auth_captcha. The first captcha will have a dark theme.
We will place the captcha on the site like this:

<form>
  <!-- тут какие-то поля для оставления отзыва о сайте -->
  <div id="feedback_captcha"></div>
</form>
<form>
  <!-- тут какие-то поля для авторизации -->
  <div id="auth_captcha"></div>
</form>

Why do we wrap the functions that render the captcha in variables? And this is necessary so that we can execute methods individually for each captcha. For example, it would be nice to reset the captcha each time the AJAX login form is submitted. We will reset it like this:
Also read the documentation: developers.google.com/recaptcha/docs/display

Answer 2

Tell me, please, how can I validate several recaptchas in this case if the form is sent via ajax? Because if I have several captchas, then in any case it gives an error - you did not enter the captcha

$("#form").on("submit", function() { //устанавливаем событие отправки для формы с id=form
            var form_data = $(this).serialize(); //собераем все данные из формы
      var captcha = grecaptcha.getResponse();
      if (!captcha.length) {
          alert("Вы не ввели капчу");
      } else {
        alert("Сообщение отправлено");
            $.ajax({
            type: "POST", //Метод отправки
            url: "captcha.php", //путь до php фаила отправителя
            data: form_data,
            });
    };			
    });