Задать вопрос
kobyakovdima
@kobyakovdima
Любитель экспериментов

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

Доброго времени суток. Столкнулся с проблемой. На странице есть несколько форм: "обратная связь", "заявка-онлайн", "мы перезвоним". Стал сыпаться спам, решили поставить reCaptcha, но при её подключении она отображается в 1 форме, а которые идут ниже - нет. Это можно как-то исправить?
  • Вопрос задан
  • 3662 просмотра
Подписаться 2 Оценить Комментировать
Решения вопроса 1
neluzhin
@neluzhin
Вы инициализируете капчу с помощью 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@VladimirPortev
Подскажите, пожалуйста, а как в таком случае сделать валидацию нескольких рекапч, если форма отправляется через ajax? Потому что если у меня несколько капч, то он в любом случае выдает ошибку - вы не ввели капчу
$("#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,
            });
		};			
    });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы