Новая Google reCAPTCHA(v2) для FormIt

Наткнулся на дополнение ReCaptchaV2, позволяющее добавить новую капчу в FormIt.

Подробнее о новой reCAPTCHA здесь.

Для начала нужно сгенерировать API ключ для домена https://www.google.com/recaptcha/admin и добавить его в System Settings.

Пример использования

[[!FormIt?
   &hooks=`recaptchav2,email`
   ...
]]

<div class="form-item">
    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]
</div>

Проект на GitHub: https://github.com/sepiariver/recaptchav2
Пакет: http://modx.com/extras/package/recaptchav2

Игорь Терентьев

25 февраля 2015, 05:13

32 307

Комментарии: 66

Андрей Сухомозгий

25 февраля 2015, 10:49

А если через AjaxForm делать? Все то же самое? Просто чет не заводится она. Будто игнорирует капчу и письма не отправляет…

Андрей Сухомозгий

25 февраля 2015, 11:18

UPD:
Что бы работало с AjaxForm сделал так: в &validate добавил g-recaptcha-response:required.
А в чанк с формой добавил

<span class="error_g-recaptcha-response error"></span>

Все завелось и работает)

Иван Брежнев

25 февраля 2015, 13:53

Классная капча, давно её использую, отлично что под MODX появилась)

Игорь Терентьев

26 февраля 2015, 09:55

На GitHub подсказали еще хук noCaptcha
https://github.com/bvandorp/noCaptcha

Ilya Z.

24 марта 2015, 12:54

Отличное дополнение)

Была проблема с ее использованием в AjaxForm. После того, как снова вызывалась форма отправки, капча была валидна, но письмо не отправлялось, т.к.

response.data

содержала ошибку капчи. Решил добавлением:

if (typeof $('#recaptcha') != "undefined") 
    grecaptcha.reset();

если

response.success = true

Купчинский Михаил

24 марта 2015, 18:35

Та же проблема, но не могу понять куда этот код добавить)

Ilya Z.

25 марта 2015, 09:26

Для сниппета AjaxForm нужно указать параметр:

&frontend_js=`assets/template/js/default.js`

Далее копируем дефолтный скрипт assets/components/ajaxform/js/default.js и добавляем свой код:

else {
    AjaxForm.Message.success(response.message);
    form.find('.error').removeClass('error');
    form[0].reset();
    
    if (typeof $('#recaptcha') != "undefined") 
        grecaptcha.reset(); //добавляем сброс сессии для капчи
}

Либо дописываем прямо в дефолтном скрипте, тогда и &frontend_js не нужно писать.

Купчинский Михаил

25 марта 2015, 12:09

Спасибо. Примерно так и делал раньше) Только немного в другое место подставлял.
Сейчас подставил в правильное место (пока прямо в изначальный скрипт) — но эффект тот же.
Но как оказалось не везде — а только на главной странице сайта.
На внутренних страницах все отлично работает.
На главной же После первой отправки формы и обновлении страницы перестает подгружаться default.js joxi.ru/12MQYYeTGl8y2J

Ilya Z.

25 марта 2015, 12:14

«обновлении страницы перестает подгружаться default.js» довольно странно…

ну попробуйте задать кастомный скрипт (&frontend_js).
если не поможет, то скиньте ссылку на главную страницу сайта.

Купчинский Михаил

25 марта 2015, 12:17

На внутренних страницах все грузится joxi.ru/nAyXxxYFNgGP2Z
На главной даже после закрытия браузера и открытия снова скрип не подгрузился.
Вот ссылка www.pit-sport.ru/

Купчинский Михаил

25 марта 2015, 12:23

После очистки кеша на главной скрипт грузится joxi.ru/J2b5VV4hE05Xm6
А после отправки сообщения и перезагрузки страницы опять не грузится скрипт joxi.ru/82Q7QQeTbwpkrd

Ilya Z.

25 марта 2015, 12:32

вы вообще ajaxform используете? потому что после каждой отправки формы («ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК») происходит перезагрузка страницы, чего не должно быть, если вы правильно ajaxform настроили…

тем не менее, у меня даже после первой загрузки главной ajaxform не подключился. скорее всего вы formit используете на главной.

Купчинский Михаил

25 марта 2015, 12:36

Да formit используется на главной. Вроде всегда так делал)
Сейчас покопаюсь — может я что-то упустил

Ilya Z.

25 марта 2015, 12:39

вы сделайте ajaxform, как на внутренних, а то решение пишется для ajaxform, а используется в итоге formit :)

Купчинский Михаил

25 марта 2015, 12:45

Так на всех страницах одно и тоже решение.
На каждой странице грузится модальное окно с вызовом AjaxForm
В AjaxForm по умолчанию отправка происходит через Formit.

Купчинский Михаил

25 марта 2015, 13:01

Судя по всему капча тут не причем. Отключил ее. Проблема не исчезла.
Проверил на другом сайте, где все настроено подобным образом — там все ОК с отправкой с главной страницы.
Буду разбираться

yani

20 мая 2015, 08:43

А в чем проблема использовани FormIt на главной странице?

Klike

03 апреля 2015, 11:33

Как можно использовать Google reCAPTCHA(v2) несколько раз на странице?
Кто-нибудь может сталкивался?

Илья

03 апреля 2015, 11:49

Столкнулся и отказался от его использования, добавил еще один скрытый инпут с проверкой на пустоту

Klike

03 апреля 2015, 11:51

спасибо :)

Андрей

07 февраля 2016, 18:11

На самом деле можно использовать Google reCAPTCHA(v2) несколько раз на одной странице. Подробности здесь: Multiple reCAPTCHA Implementation on Same Page
В двух словах: капчу в форме нужно будет рендерить не с помощью сниппета [[recaptchav2_render]], а вставляя в каждую форму div (или другой элемент) с определенным ID, после чего самому прописать строчку загрузки API капчи, и рендерить капчу для каждого div'а из скрипта, повешенного на onload. Все это расписано в статье по ссылке выше, плюс есть пример. В случае с MODX пришлось написать однострочный сниппет, который вытаскивает из системных настроек значение recaptchav2.site_key Правда ничто не мешает прописать этот ключ напрямую в JS-скрипте.
У меня все заработало.

Сергей Шлоков

01 марта 2016, 08:34

Системные настройки доступны в плейсхолдерах [[++system_setting]].

Андрей

01 марта 2016, 13:22

Вы абсолютно правы. Я часто использую и системные настройки, и настройки контекстов в чанках и снипетах, но тут почему-то сглупил :( [[++recaptchav2.site_key]] решает проблему без всякого сниппета.
Кстати, капча работает замечательно, спам прекратился.

timur

23 марта 2016, 07:46

Здравствуйте, вы не могли бы поподробнее описать, как решить эту проблему с помощью [[++recaptchav2.site_key]]. Заранее благодарен!

Андрей

23 марта 2016, 15:09

Прописываете ключ прописываете в системных настройках, а потом вставляете в JavaScript'е вызова капчи [[++recaptchav2.site_key]].

Jury

28 июля 2016, 06:25

А как хук добавить?, форма отправляется без капчи, разместил её в

<form>

Андрей

28 июля 2016, 17:02

Хук для рекапчи у меня добавлен так: &hooks=`recaptchav2, email` (AjaxForm)

Jury

30 июля 2016, 19:50

Спс, сработало у меня по id из скрипта recaptcha2, а не работало по причине вызова 3 капч )

RSS

20 августа 2015, 00:19

Все работает, но как сделать так, чтобы в письме в поле «От» подставлялся емаил отправителя сообщения? &emailFrom=

отчего в письме в конце это?:
g-recaptcha-response: 03AHJ_VusMeoUk5UNuhhvDVwGROt8lTtD8V11R7u3y6ufTairGV4u8Do_3lKSbZGIlMF9kgF0H8yzrTmQjHmAj_HD1jSagBKMya8ipeK3lLkjv9hwqMlOM… вырезан длинный код

Владимир

04 сентября 2015, 10:37

А как в ней настроить вывод сообщения об ошибке на русском?

Игорь Терентьев

04 сентября 2015, 11:32

В настройках похоже: github.com/sepiariver/recaptchav2/blob/master/core/components/recaptchav2/elements/snippets/recaptchav2.snippet.php#L40
Либо через лексиконы.

Владимир

04 сентября 2015, 11:41

К сожалению не помогло ((
А как это через лексиконы?

Игорь Терентьев

04 сентября 2015, 13:04

Настройки — Управление словарями

Александр

08 мая 2016, 19:42

В настройках системы создать параметр recaptcha_error_message в пространстве имен recaptchav2

Katya Larionova

28 сентября 2015, 18:41

Не могу разобраться, как настроить reCAPTCHA
Какой ключ куда вставлять? http://prntscr.com/8lg8k2

timur

23 марта 2016, 05:45

Разобрался?? У тебя вон вверху на скрине спойлер «Ключи». Раскрой его и там ключики, затем зайди в системные настройки, там выбери RecaptchaV2 и там вставляй в поля private.key — секретный ключ, а в поле public.key — общий ключ.

Сергей Лим

01 марта 2016, 08:08

Не люблю эту каптчу с того времени, как не смог ее пройти на одном из сайтов, даже обновлял картинки, один хрен иногда непонятно

Sergey Leleko

15 мая 2017, 22:30

что делать если «ReCAPTCHA placeholder element must be empty»?
В шапке я посмотрел апи гугла вызывается упорно дважды. Но нету ни где второго вызова.
По итогу с последним FormIt и Ajaxform не работает

Дмитрий

15 мая 2017, 22:33

буквально дня четыре назад поставил и спокойно все работает.

Sergey Leleko

15 мая 2017, 22:35

Поправлюсь… не работает почему то только в формах которые выводятся в модальное окно. В простые формы выводится.

Sergey Leleko

16 мая 2017, 07:23

Спасибо большое Андрею, жаль плюсануть не получается, за статью по мультикаптчам. ОЧень помогло и легко применяется. А главное заодно закрывает вопрос с глюком работы хука как в моем случае, когда апи гугла зачем-то 2 раза подключался. Наверное, чтобы не потерялось попозже все это оформлю статьей в пошаговое руководство, чтобы не потерялось.

Алексей

17 мая 2017, 11:29

Сергей, добрый день!
Вы бы не могли описать как настроить мультикаптчу? У меня на странице их 3 штуки. Вроде прописал через id и скрипт прикрепил, но что-то они совсем не появляются. Спасибо!

Sergey Leleko

17 мая 2017, 11:52

Добрый день Алексей! Могу, но попозже. У меня как раз аналогичная задача стояла и все получилось.

Алексей

17 мая 2017, 11:54

Да, спасибо! Буду ждать.

Sergey Leleko

17 мая 2017, 14:13

Написал по-подробнее с картинками: modx.pro/howto/12189-mnozhestvennaya-recaptcha2-1-str-ajaxform/

Алексей

17 мая 2017, 14:53

Спасибо, огромное! То что надо.

Sergey Leleko

17 мая 2017, 14:57

Пожалуйста

Эрадж Шамс

11 ноября 2017, 11:22

Здравствуйте, а никто не сталкивался с прикруткой reCAPTCHA(v2) на Office?

Денис Богдановский

13 января 2018, 21:24

https://modx.pro/howto/14278/

Владимир

21 января 2018, 01:04

Кто случайно пропустил, настройка параметров g-recaptcha tag attributes and grecaptcha.render parameters которые можно указать в чанке recaptchav2_html
developers.google.com/recaptcha/docs/display#config
Как минимум, будут полезны темная тема data-theme или компактный вид data-size.

Андрей

11 марта 2018, 15:18

Скачал дополнение, внес туда публичный и приватный ключ, все делаю как в примере, появляется recaptcha, ставлю галку, но при попытке отправить форму выдает ошибку

Please select the checkbox in the ReCaptcha image.

если убрать recaptcha то форма работает корректно.

Pavel

08 мая 2018, 14:13

Добрый день. Подскажите пожалуйста как убрать такую ошибку уж очень их много…
[2018-05-08 14:05:54] (ERROR @/public_html/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.

tvset

11 мая 2018, 15:45

таже самая проблема, Вам удалось решить?

Pavel

11 мая 2018, 15:51

К сожалению пока не удалось… на трех форумах молчат, сам решить не смог…

tvset

14 мая 2018, 20:22

В баг репор разработчикам написали: github.com/Sterc/FormIt/issues/170
ждем апгрейда, а пока там есть костыль

Pavel

15 мая 2018, 10:56

Спасибо )))

Андрей Коробков

31 мая 2018, 13:20

Как временное решение — сделайте копию сниппета recaptchav2, назовите его по-другому, например re_captchav2, соответственно в вызове &hooks=`re_captchav2,...`.
Там дело в чем — formIt проверяет функцией strpos (вроде ей или типа нее, недели две назад как раз тоже самое было — разбирался, как раз в обновленном formIt), присутствует ли в hooks слово recaptcha, если присутствует — пытается загрузить свои классы для рекапчи — а там ошибка возникает, не вдавался уже в детали, некогда было.

Андрей Коробков

31 мая 2018, 16:42

Редактировать уже не могу — выше написан баг репот github.com/Sterc/FormIt/issues/170 — там как раз предлагают добавить в if условие вместе с $this->formit->hasHook('recaptcha')
а там в самом hasHook — return strpos($this->config['hooks'], $hook) !== false;
а сам вызов if ($this->formit->hasHook('recaptcha')) {… — тут подключаются классы рекапчи от formIt

алексей

25 мая 2018, 14:53

присоединяюсь, та же проблема

Владимир

13 июня 2018, 11:05

та же проблема
[2018-06-13 10:59:43] (ERROR @ /home/vgl/antalyaelitestroy.com/www/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.
[2018-06-13 11:02:26] (ERROR @ /home/vgl/antalyaelitestroy.com/www/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Could not load FormItReCaptcha service class.

Никита

19 июля 2018, 13:16

Добрый день. При выводе рекапчи не передается sitekey. Т.е. атрибут data-sitekey пустой. Ключи в настройках добавил.
Код вывода формы:

[[!FormIt?
                    &hooks=`recaptchav2,email`
                    &emailTpl=`emailTpl`
                    &emailSubject=`Заявка-анкета`
                    &emailTo=``
                    &emailFrom=``
                    &successMessage=`Сообщение отправлено!`
                ]]
                
                <div class="success-send">[[!+fi.successMessage]]</div>
                
                [[!+fi.successMessage:isempty=`[[$partners-form]]`]]

В чанке partners-form добавлены эти строки:

[[!recaptchav2_render]]
                [[!+fi.error.recaptchav2_error]]

Подскажите пожалуйста, в чем может быть проблема?

Антон Тарасов

13 августа 2018, 10:48

Люббопытно. Как вариант, можно попробовать вызвать явно:

<div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
[[!+fi.error.recaptchav2_error]]

Ника

13 августа 2018, 09:39

Здравствуйте!

Подскажите, пожалуйста, как сделать поле капчи обязательным?
Если отправить заявку без отметки капчи, то форма не отправляется и редиректится на ошибочную страницу.

Код:

[[!FormIt? 
&hooks=`email,recaptchav2,FormItSaveForm,redirect` 
&emailTpl=`form-tour-tpl` 
&emailSubject=`Заказ тура` 
&emailTo=`rostov@lptravel.ru` 
&redirectTo=`30` 
&formName=`Заказаз тура` 
&formFields=`name,tel,massage`
&fieldNames=`name==Имя отправителя,tel==Телефон,massage==Комментарий`
&validate=`name:minLength=^2^,
             tel:required,
             g-recaptcha-response:required`
&validationErrorMessage=`В форме содержатся ошибки!`]]

Антон Тарасов

13 августа 2018, 10:54

А содержимое form-tour-tpl покажете? Никаких js скриптов для обработки сабмита формы не имеете?
По идее в цепочке хуков email,recaptchav2,FormItSaveForm,redirect, если капча не проходит, до редиректа дойти не должно… поэтому редирект на ошиб. страницу кажется странным. Само использование капчи делает ее обязательной, без нее вы ничего не должны отправить, если конечно все настроено верно. Да,email хук у вас идет первым, поэтому письмо таки улетит до остальных проверок.

Ника

13 августа 2018, 13:29

form-tour-tpl

Пользователь сайта оставил заявку на заказ тура:<br />

<p><b>Контактная информация:</b></p>
<p><b>Имя:</b> [[+name]]</p>
<p><b>Телефон:</b> [[+tel]]</p>
<p><b>Комментарий:</b> [[+message]]</p>

Скриптов для обработки сабмита нет…

Сама форма:

<form id="modal" method="post" action="[[~29]]">
		<div id="modal-close"></div>
		<div id="modal-head">Заказать тур</div>
		<label for="name">Имя</label>
		<input type="text" required placeholder="Ваше имя" name="name"/>
		<label for="tel">Телефон</label>
		<input type="tel" required name="tel" placeholder="Телефон"/>
		<label for="message">Комментарии</label>
		<textarea type="message" name="message" placeholder="Хочу в Таиланд на 10 дней, 2 взрослых..."></textarea>
	    <div class="form-item">
    		[[!recaptchav2_render]]
            [[!+fi.error.recaptchav2_error]]
            <span class="error_g-recaptcha-response error"></span>
        </div>
		<input type="submit" value="Отправить" onclick="yaCounter36509375.reachGoal('send'); return true;">
		<p><small>Нажимая на кнопку "Отправить", вы даете согласие <a href="/PDF/obrabotka-personalnih-danix-lptravel.pdf" title="Обработка персональных данных" target="_blank">на обработку персональных данных</a> и соглашаетесь с <a href="polozhenie-o-konfidenczialnosti.html" title="Обработка персональных данных" target="_blank">политикой конфиденциальности</a></small></p>
	</form>

Артем

31 августа 2018, 20:20

Здравствуйте! Не подскажете, почему может не отображаться [[!++recaptchav2.secret_key]] к примеру на сайте? Все остальные системные параметры отображаются, но вот с последней версией капчи, они не хотят. Ошибок в логах нет. Проверял на другом сайте старую версию капчи, там все отображается. Конечно у сайтов разные хостинги, версии пхп и модкс и тд. Не подскажете, в какую сторону копать?

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Новая Google reCAPTCHA(v2) для FormIt

Пример использования

Комментарии: 66

Здесь упомянуты