FormIt + ReCapchaV2

Настройка отправки писем обратной связи через Formit на ModX с настроенной капчей от Google (ReCaptcha v2).

Необходимые пакеты:

FormIt
ReCapchaV2

После установки ReCaptchaV2 необходимо зарегистрировать ключ API, сделать это можно по ссылке: ReCaptcha API. После регистрации Вам выдадут два ключа (публичный и секретный), которые нужно скопировать в системные настройки пакета ReCaptchaV2.

Настройка отправки формы:

[[!FormIt?
    &hooks=`recaptchav2,redirect,email`// хук email должен быть последним, либо все следующие после него не исполнятся
    &validate=`name:required,
      email:email,
      message:requied:stripTags`
    &emailTo=`feedback@domain.ru` // e-mail, куда отправлять письмо
    &emailTpl=`tpl_contact_message` //имя чанка - шаблона письма
    &redirectTo=`9` // ID ресурса, куда редиректится пользователь при успешной отправке письма
    &redirectParams=`{"success":"true"}` // GET параметры передающиеся при успешной отправке письма
    &emailSubject=`Обратная связь с сайта`
]]

Шаблон формы:

<div class="feedback">
  <div class="container">
    <div class="row">

      [[!+fi.validation_error_message:notempty=`<div class="col-md-12"><p class="error-total">Поля формы заполнены некорректно. Проверьте данные и отправьте форму еще раз.</p></div>`]]
      [[!get:notempty=`<p class="success-send">Сообщение отправлено. Мы свяжемся с Вами.</p>`? &var=`success`]]

      <form action="[[~[[*id]]]]" method="post">

        <div class="col-md-6">
          <label class="label" for="message">
            Текст сообщения
            <span class="error">[[!+fi.error.message]]</span>
          </label>
          <textarea name="message" id="message" class="textarea" placeholder="Введите Ваше сообщение" rows="10">[[!+fi.message]]</textarea>
        </div>

        <div class="col-md-6">
          <label class="label" for="name">
            Ваше имя *
            <span class="error">[[!+fi.error.name]]</span>
          </label>
          <input name="name" id="name" class="input" type="text" placeholder="Введите Ваше имя" value="[[!+fi.name]]" required>

          <label class="label" for="email">
            Ваш E-Mail *
            <span class="error">[[!+fi.error.email]]</span>
          </label>
          <input name="email" id="email" class="input" type="email" placeholder="mail@domain.ru" value="[[!+fi.email]]" required>

          <p>[[!recaptchav2_render]]</p>
          [[!+fi.error.recaptchav2_error]]

        </div>

        <div class="clearfix"></div>

        <div class="col-md-6 col-md-offset-6">
          <input class="submit" type="submit" value="Отправить">
        </div>

      </form>

    </div>
  </div>
</div>

Как Вы могли заметить в шаблоне используется сниппет get для отображения уведомления об отправке:

[[!get:notempty=`<p class="success-send">Сообщение отправлено. Мы свяжемся с Вами.</p>`? &var=`success`]]

Сниппет get:

<?php
return $_GET[$var];
?>

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

Сам шаблон письма: (чанк - tpl_contact_message)

Имя: <b>[[+name]]</b><br />
E-Mail: <b>[[+email]]</b><br />
Сообщение:<hr />
[[+message]]

На главную