Новая Google reCAPTCHA(v2) для FormIt
![](https://www.google.com/recaptcha/intro/images/hero-recaptcha-demo.gif)
Наткнулся на дополнение 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
Комментарии: 66
А если через AjaxForm делать? Все то же самое? Просто чет не заводится она. Будто игнорирует капчу и письма не отправляет…
UPD:
Что бы работало с AjaxForm сделал так: в &validate добавил g-recaptcha-response:required.
А в чанк с формой добавил
Что бы работало с AjaxForm сделал так: в &validate добавил g-recaptcha-response:required.
А в чанк с формой добавил
<span class="error_g-recaptcha-response error"></span>
Все завелось и работает)
Классная капча, давно её использую, отлично что под MODX появилась)
На GitHub подсказали еще хук noCaptcha
https://github.com/bvandorp/noCaptcha
https://github.com/bvandorp/noCaptcha
Отличное дополнение)
Была проблема с ее использованием в AjaxForm. После того, как снова вызывалась форма отправки, капча была валидна, но письмо не отправлялось, т.к.
Была проблема с ее использованием в AjaxForm. После того, как снова вызывалась форма отправки, капча была валидна, но письмо не отправлялось, т.к.
response.data
содержала ошибку капчи. Решил добавлением:if (typeof $('#recaptcha') != "undefined")
grecaptcha.reset();
если response.success = true
Та же проблема, но не могу понять куда этот код добавить)
Для сниппета AjaxForm нужно указать параметр:
Далее копируем дефолтный скрипт assets/components/ajaxform/js/default.js и добавляем свой код:
Либо дописываем прямо в дефолтном скрипте, тогда и &frontend_js не нужно писать.
&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 не нужно писать.
Спасибо. Примерно так и делал раньше) Только немного в другое место подставлял.
Сейчас подставил в правильное место (пока прямо в изначальный скрипт) — но эффект тот же.
Но как оказалось не везде — а только на главной странице сайта.
На внутренних страницах все отлично работает.
На главной же После первой отправки формы и обновлении страницы перестает подгружаться default.js joxi.ru/12MQYYeTGl8y2J
Сейчас подставил в правильное место (пока прямо в изначальный скрипт) — но эффект тот же.
Но как оказалось не везде — а только на главной странице сайта.
На внутренних страницах все отлично работает.
На главной же После первой отправки формы и обновлении страницы перестает подгружаться default.js joxi.ru/12MQYYeTGl8y2J
«обновлении страницы перестает подгружаться default.js» довольно странно…
ну попробуйте задать кастомный скрипт (&frontend_js).
если не поможет, то скиньте ссылку на главную страницу сайта.
ну попробуйте задать кастомный скрипт (&frontend_js).
если не поможет, то скиньте ссылку на главную страницу сайта.
На внутренних страницах все грузится joxi.ru/nAyXxxYFNgGP2Z
На главной даже после закрытия браузера и открытия снова скрип не подгрузился.
Вот ссылка www.pit-sport.ru/
На главной даже после закрытия браузера и открытия снова скрип не подгрузился.
Вот ссылка www.pit-sport.ru/
После очистки кеша на главной скрипт грузится joxi.ru/J2b5VV4hE05Xm6
А после отправки сообщения и перезагрузки страницы опять не грузится скрипт joxi.ru/82Q7QQeTbwpkrd
А после отправки сообщения и перезагрузки страницы опять не грузится скрипт joxi.ru/82Q7QQeTbwpkrd
вы вообще ajaxform используете? потому что после каждой отправки формы («ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК») происходит перезагрузка страницы, чего не должно быть, если вы правильно ajaxform настроили…
тем не менее, у меня даже после первой загрузки главной ajaxform не подключился. скорее всего вы formit используете на главной.
тем не менее, у меня даже после первой загрузки главной ajaxform не подключился. скорее всего вы formit используете на главной.
Да formit используется на главной. Вроде всегда так делал)
Сейчас покопаюсь — может я что-то упустил
Сейчас покопаюсь — может я что-то упустил
вы сделайте ajaxform, как на внутренних, а то решение пишется для ajaxform, а используется в итоге formit :)
Так на всех страницах одно и тоже решение.
На каждой странице грузится модальное окно с вызовом AjaxForm
В AjaxForm по умолчанию отправка происходит через Formit.
На каждой странице грузится модальное окно с вызовом AjaxForm
В AjaxForm по умолчанию отправка происходит через Formit.
Судя по всему капча тут не причем. Отключил ее. Проблема не исчезла.
Проверил на другом сайте, где все настроено подобным образом — там все ОК с отправкой с главной страницы.
Буду разбираться
Проверил на другом сайте, где все настроено подобным образом — там все ОК с отправкой с главной страницы.
Буду разбираться
А в чем проблема использовани FormIt на главной странице?
Как можно использовать Google reCAPTCHA(v2) несколько раз на странице?
Кто-нибудь может сталкивался?
Кто-нибудь может сталкивался?
Столкнулся и отказался от его использования, добавил еще один скрытый инпут с проверкой на пустоту
спасибо :)
На самом деле можно использовать Google reCAPTCHA(v2) несколько раз на одной странице. Подробности здесь: Multiple reCAPTCHA Implementation on Same Page
В двух словах: капчу в форме нужно будет рендерить не с помощью сниппета [[recaptchav2_render]], а вставляя в каждую форму div (или другой элемент) с определенным ID, после чего самому прописать строчку загрузки API капчи, и рендерить капчу для каждого div'а из скрипта, повешенного на onload. Все это расписано в статье по ссылке выше, плюс есть пример. В случае с MODX пришлось написать однострочный сниппет, который вытаскивает из системных настроек значение recaptchav2.site_key Правда ничто не мешает прописать этот ключ напрямую в JS-скрипте.
У меня все заработало.
В двух словах: капчу в форме нужно будет рендерить не с помощью сниппета [[recaptchav2_render]], а вставляя в каждую форму div (или другой элемент) с определенным ID, после чего самому прописать строчку загрузки API капчи, и рендерить капчу для каждого div'а из скрипта, повешенного на onload. Все это расписано в статье по ссылке выше, плюс есть пример. В случае с MODX пришлось написать однострочный сниппет, который вытаскивает из системных настроек значение recaptchav2.site_key Правда ничто не мешает прописать этот ключ напрямую в JS-скрипте.
У меня все заработало.
Системные настройки доступны в плейсхолдерах [[++system_setting]].
Вы абсолютно правы. Я часто использую и системные настройки, и настройки контекстов в чанках и снипетах, но тут почему-то сглупил :( [[++recaptchav2.site_key]] решает проблему без всякого сниппета.
Кстати, капча работает замечательно, спам прекратился.
Кстати, капча работает замечательно, спам прекратился.
Здравствуйте, вы не могли бы поподробнее описать, как решить эту проблему с помощью [[++recaptchav2.site_key]]. Заранее благодарен!
Прописываете ключ прописываете в системных настройках, а потом вставляете в JavaScript'е вызова капчи [[++recaptchav2.site_key]].
А как хук добавить?, форма отправляется без капчи, разместил её в
<form>
Хук для рекапчи у меня добавлен так: &hooks=`recaptchav2, email` (AjaxForm)
Спс, сработало у меня по id из скрипта recaptcha2, а не работало по причине вызова 3 капч )
Все работает, но как сделать так, чтобы в письме в поле «От» подставлялся емаил отправителя сообщения? &emailFrom=
отчего в письме в конце это?:
g-recaptcha-response: 03AHJ_VusMeoUk5UNuhhvDVwGROt8lTtD8V11R7u3y6ufTairGV4u8Do_3lKSbZGIlMF9kgF0H8yzrTmQjHmAj_HD1jSagBKMya8ipeK3lLkjv9hwqMlOM… вырезан длинный код
отчего в письме в конце это?:
g-recaptcha-response: 03AHJ_VusMeoUk5UNuhhvDVwGROt8lTtD8V11R7u3y6ufTairGV4u8Do_3lKSbZGIlMF9kgF0H8yzrTmQjHmAj_HD1jSagBKMya8ipeK3lLkjv9hwqMlOM… вырезан длинный код
А как в ней настроить вывод сообщения об ошибке на русском?
В настройках похоже: github.com/sepiariver/recaptchav2/blob/master/core/components/recaptchav2/elements/snippets/recaptchav2.snippet.php#L40
Либо через лексиконы.
Либо через лексиконы.
К сожалению не помогло ((
А как это через лексиконы?
А как это через лексиконы?
В настройках системы создать параметр recaptcha_error_message в пространстве имен recaptchav2
Не могу разобраться, как настроить reCAPTCHA
Какой ключ куда вставлять? http://prntscr.com/8lg8k2
Какой ключ куда вставлять? http://prntscr.com/8lg8k2
Разобрался?? У тебя вон вверху на скрине спойлер «Ключи». Раскрой его и там ключики, затем зайди в системные настройки, там выбери RecaptchaV2 и там вставляй в поля private.key — секретный ключ, а в поле public.key — общий ключ.
Не люблю эту каптчу с того времени, как не смог ее пройти на одном из сайтов, даже обновлял картинки, один хрен иногда непонятно
что делать если «ReCAPTCHA placeholder element must be empty»?
В шапке я посмотрел апи гугла вызывается упорно дважды. Но нету ни где второго вызова.
По итогу с последним FormIt и Ajaxform не работает
В шапке я посмотрел апи гугла вызывается упорно дважды. Но нету ни где второго вызова.
По итогу с последним FormIt и Ajaxform не работает
буквально дня четыре назад поставил и спокойно все работает.
Поправлюсь… не работает почему то только в формах которые выводятся в модальное окно. В простые формы выводится.
Спасибо большое Андрею, жаль плюсануть не получается, за статью по мультикаптчам. ОЧень помогло и легко применяется. А главное заодно закрывает вопрос с глюком работы хука как в моем случае, когда апи гугла зачем-то 2 раза подключался. Наверное, чтобы не потерялось попозже все это оформлю статьей в пошаговое руководство, чтобы не потерялось.
Сергей, добрый день!
Вы бы не могли описать как настроить мультикаптчу? У меня на странице их 3 штуки. Вроде прописал через id и скрипт прикрепил, но что-то они совсем не появляются. Спасибо!
Вы бы не могли описать как настроить мультикаптчу? У меня на странице их 3 штуки. Вроде прописал через id и скрипт прикрепил, но что-то они совсем не появляются. Спасибо!
Добрый день Алексей! Могу, но попозже. У меня как раз аналогичная задача стояла и все получилось.
Да, спасибо! Буду ждать.
Написал по-подробнее с картинками: modx.pro/howto/12189-mnozhestvennaya-recaptcha2-1-str-ajaxform/
Спасибо, огромное! То что надо.
Пожалуйста
Здравствуйте, а никто не сталкивался с прикруткой reCAPTCHA(v2) на Office?
Кто случайно пропустил, настройка параметров g-recaptcha tag attributes and grecaptcha.render parameters которые можно указать в чанке recaptchav2_html
developers.google.com/recaptcha/docs/display#config
Как минимум, будут полезны темная тема data-theme или компактный вид data-size.
developers.google.com/recaptcha/docs/display#config
Как минимум, будут полезны темная тема data-theme или компактный вид data-size.
Скачал дополнение, внес туда публичный и приватный ключ, все делаю как в примере, появляется recaptcha, ставлю галку, но при попытке отправить форму выдает ошибку
Please select the checkbox in the ReCaptcha image.если убрать recaptcha то форма работает корректно.
Добрый день. Подскажите пожалуйста как убрать такую ошибку уж очень их много…
[2018-05-08 14:05:54] (ERROR @/public_html/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.
[2018-05-08 14:05:54] (ERROR @/public_html/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.
таже самая проблема, Вам удалось решить?
К сожалению пока не удалось… на трех форумах молчат, сам решить не смог…
В баг репор разработчикам написали: github.com/Sterc/FormIt/issues/170
ждем апгрейда, а пока там есть костыль
ждем апгрейда, а пока там есть костыль
Спасибо )))
Как временное решение — сделайте копию сниппета recaptchav2, назовите его по-другому, например re_captchav2, соответственно в вызове &hooks=`re_captchav2,...`.
Там дело в чем — formIt проверяет функцией strpos (вроде ей или типа нее, недели две назад как раз тоже самое было — разбирался, как раз в обновленном formIt), присутствует ли в hooks слово recaptcha, если присутствует — пытается загрузить свои классы для рекапчи — а там ошибка возникает, не вдавался уже в детали, некогда было.
Там дело в чем — formIt проверяет функцией strpos (вроде ей или типа нее, недели две назад как раз тоже самое было — разбирался, как раз в обновленном formIt), присутствует ли в hooks слово recaptcha, если присутствует — пытается загрузить свои классы для рекапчи — а там ошибка возникает, не вдавался уже в детали, некогда было.
Редактировать уже не могу — выше написан баг репот 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
а там в самом hasHook — return strpos($this->config['hooks'], $hook) !== false;
а сам вызов if ($this->formit->hasHook('recaptcha')) {… — тут подключаются классы рекапчи от formIt
присоединяюсь, та же проблема
та же проблема
[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.
[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.
Добрый день. При выводе рекапчи не передается 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]]
Подскажите пожалуйста, в чем может быть проблема?
Люббопытно. Как вариант, можно попробовать вызвать явно:
<div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
[[!+fi.error.recaptchav2_error]]
Здравствуйте!
Подскажите, пожалуйста, как сделать поле капчи обязательным?
Если отправить заявку без отметки капчи, то форма не отправляется и редиректится на ошибочную страницу.
Код:
Подскажите, пожалуйста, как сделать поле капчи обязательным?
Если отправить заявку без отметки капчи, то форма не отправляется и редиректится на ошибочную страницу.
Код:
[[!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=`В форме содержатся ошибки!`]]
А содержимое form-tour-tpl покажете? Никаких js скриптов для обработки сабмита формы не имеете?
По идее в цепочке хуков email,recaptchav2,FormItSaveForm,redirect, если капча не проходит, до редиректа дойти не должно… поэтому редирект на ошиб. страницу кажется странным. Само использование капчи делает ее обязательной, без нее вы ничего не должны отправить, если конечно все настроено верно. Да,email хук у вас идет первым, поэтому письмо таки улетит до остальных проверок.
По идее в цепочке хуков email,recaptchav2,FormItSaveForm,redirect, если капча не проходит, до редиректа дойти не должно… поэтому редирект на ошиб. страницу кажется странным. Само использование капчи делает ее обязательной, без нее вы ничего не должны отправить, если конечно все настроено верно. Да,email хук у вас идет первым, поэтому письмо таки улетит до остальных проверок.
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>
Здравствуйте! Не подскажете, почему может не отображаться [[!++recaptchav2.secret_key]] к примеру на сайте? Все остальные системные параметры отображаются, но вот с последней версией капчи, они не хотят. Ошибок в логах нет. Проверял на другом сайте старую версию капчи, там все отображается. Конечно у сайтов разные хостинги, версии пхп и модкс и тд. Не подскажете, в какую сторону копать?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.