Google reCAPTCHA(v2) для FormIt и AjaxForm

Google reCAPTCHA(v2) для FormIt и AjaxForm MODX Revo

Сегодня коротенький урок о том как интегрировать капчу (Google reCAPTCHA(v2)) в форму обратной связи на FormIt.

recaptcha

И так устанавливаем пакет ReCaptchaV2 из основного репозитория modx.

Далее нам необходимо получить секретный и публичный ключ для reCAPTCHA, для этого идем на страницу google.com/recaptcha/admin авторизуемся там (Если вы не зарегистрированы в Google, то так же вам нужно будет пройти процедуру регистрации). Перед вами откроется вот такая страница:

Заполняем форму и жмем Регистрация

recaptcha

После чего попадаем на страницу Добавление reCAPTCHA на сайт

recaptcha ключи

Данную страницу не закрываем. Идем в системные настройки modx, сортируем их по recaptchav2, ну и вводим туда ключи которые получили выше.

recaptcha вводим ключи

 

Привязка ReCaptchaV2 к FormIt

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

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

Привязка ReCaptchaV2 к FormIt + AjaxForm

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

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

Пример вызова.

[[!AjaxForm?
 &snippet=`FormIt`
 &form=`kontact-form-obrzv`
 &emailTpl=`tpl-kontact-form-obrzv`
 &hooks=`recaptchav2,email`
 &emailSubject=`Заказ звонка с сайта [[++site_url]]`
 &emailTo=`support@site.ru`
 &validate=`name:required,tel:required`
 &validationErrorMessage=`В форме содержатся ошибки!`
 &successMessage=`<h3>Запрос отправлен!</h3><h4 style="width: 400px;">Наши специалисты свяжутся с<br>вами в ближайшее время.</h4>`
]]

Пример чанка kontact-form-obrzv:

<form method="post" class="ajax_form af_example">
<div class="fancy-form">
	<i class="fa fa-user"></i>
	<input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value="[[+fi.name]]">
	<span class="error error_name">[[+fi.error.name]]</span>
</div>
<div class="fancy-form">
	<i class="fa fa-phone-square"></i>
	<input type="text" name="tel" required="" class="form-control" id="tel" placeholder="Ваш телефон*" value="[[+fi.tel]]">
	<span class="error error_name">[[+fi.error.tel]]</span>
</div>
<div class="checkbox">
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
      <span class="error error_name">[[+fi.error.opd]]</span>
    </label>
</div>
<p class="text-small">Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~48]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<div class="form-item">
    [[!recaptchav2_render]]
    <span class="error_g-recaptcha-response error">[[!+fi.error.recaptchav2_error]]</span>
</div>
<button type="submit" class="btn btn-3d btn-xmg btn-primary btn-w100">Отправить</button>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+fi.validation_error_message]]</div>`]]
</form>

Пример чанка tpl-kontact-form-obrzv:

<p>Имя: [[+name]]</p>
<p>Телефон: [[+tel]]</p>

Результат.

MODX форма с Google reCAPTCHA(v2)

Ну вот как то так.

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
web-revenue.ru
Добавить комментарий

  1. Илья

    Здравствуйте! Добавляю
    &hooks=`recaptchav2` и

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

    При установленной галочке на капче все равно просит ее поставить «Please select the checkbox in the ReCaptcha image.»
    Если добавляю &validate=`g-recaptcha-response:required`, то сообщение о проверке капчи не появляется, форма не отправляет сообщение.
    Без проверки капчи (&hooks=`recaptchav2`) сама форма работает как надо, все отправляется.

    Ответить
  2. Алекс

    а вот такое не обязательно ?
    в validate ,g-recaptcha-response:required

    Ответить
    1. Алексей автор

      Нет

      Ответить
  3. Павел Шевченко

    Добрый день. В журнале ошибок сотни таких строчек (public_html/core/components/formit/src/FormIt/Request.php : 87) [FormIt] Невозможно загрузить класс reCaptcha.) Подскажите что не так? В целом все работает отправляет, проверяет…

    Ответить
    1. Alex87

      Добрый день. А какая у вас версия php

      Ответить
      1. Павел Шевченко

        версия php 5.6

        Ответить
      2. Павел Шевченко

        версия 5.6 ставил 7.0 тоже самое 5.5 так же

        Ответить
        1. Alex87

          Удалите ошибки, обновите пакеты

          Ответить
          1. Павел Шевченко

            поставил php 7.0 очистил лог, переустановил пакеты.. ошибки так же продолжают идти

            [2018-05-05 19:09:59] (ERROR @ public_html/core/xpdo/om/xpdoquery.class.php : 764) Encountered empty IN condition with key id
            [2018-05-05 19:09:59] (ERROR @core/components/formit/src/FormIt/Request.php : 87) [FormIt] Невозможно загрузить класс reCaptcha.

          2. Alex87

            Чесно говоря, точно не знаю, может у гугла что то поменялось. Стараюсь без капч со спамом бороться

          3. Павел Шевченко

            А что посоветуете? А то засыпает спам невозможно просто! Скрытые поля не помогают… Спасибо…

          4. Павел Шевченко

            Спасибо. Будем экспериментировать ))

  4. Alex Alex

    Здравствуйте. А как заставить работать recaptchav2 только invisible? formit+ajaxform

    Ответить
    1. Alex87

      не знаю

      Ответить
  5. Alexey Timofeev

    Подскажите, куда нужно вводить код с хуками, чтобы привязать рекапчу к formit?
    Я нашел упоминание о хуках только во вкладке «параметры» сниппета FormIt. И в значение забил следующий код:
    [[!FormIt? &hooks=`recaptchav2,email` … ]]

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

    Вставил капчу в шаблоны, она отображается. Но комментарий отправить можно без нее.

    Ответить
    1. Alex87

      Сначала получаете (https://web-revenue.ru/wp-content/uploads/2017/01/recaptcha-klyuchi-320×230.png) и указываете ключи в настройках (https://web-revenue.ru/wp-content/uploads/2017/01/recaptcha-vvodim-klyuchi-320×230.png)
      затем в вызове формы подключается хук recaptchav2 (&hooks=`recaptchav2,email`)
      И перед кнопкой отправить вставляется:

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

      Это для FormIt. Чистым FormIt я не пользуюсь с момента появления AjaxForm

      Ответить
      1. Alexey Timofeev

        «затем в вызове формы подключается хук recaptchav2 (&hooks=`recaptchav2,email`)»
        Вот где вставить хук я и не могу найти. Где этот вызов формы?

        Ответить
        1. Alex87

          Вызов формы делается самостоятельно, выглядит примерно так https://web-revenue.ru/wp-content/uploads/2017/01/recaptcha1-320×171.png

          Ответить
          1. Alexey Timofeev

            У меня это выглядит так:
            Капча отображается, ее можно нажать. Но если не нажимать, сообщение все равно уйдет.
            Я думаю, это потому что не указал хуки. Где и как их указывать, я не понимаю.

          2. Alex87

            вот сюда

          3. Alexey Timofeev

            Вставил, все равно без капчи можно отправить. И нижний код капчи

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

            внутри разных section вставлял, к форме и кнопке отправить. Разницы нет.

          4. Alex87

            Вечером попробую форму тестовую создать и проверю! Потом отпишусь!

          5. Алексей Мордовский

            Все четко работает ну по крайней мере в связке FormIt + AjaxForm (вывод с чанками привел в статье), на чистом FormIt думаю тоже должно нормально все работать. Вот можете по тестить форму из статьи, здесь: https://webadaptiv.ru/ (кнопка заказать звонок в шапке справа)

          6. Alexey Timofeev

            Поставил хук рекапчи в самом начале перечисления. Теперь письма с рекапчей уходят и доходят, а в отношении писем без рекапчи сайт пишет, что сообщение отправлено, но мне ничего не доходит

  6. Fergus Sawyer

    слабо было чтоли примеры чанков в коде выложить, пздц

    Ответить
    1. Alex87

      Чанки стандартные, берите из любой рабочей формы, можете взять из предыдущих статей

      Ответить
  7. Алексей

    Не выводится ошибка (но форма тоже не отправляется). В чём может быть причина?

    Ответить
    1. Alex87

      Смотрите логи, у меня все работает

      Ответить