MODX. Организация обработки форм с использованием FormIt

FormIt — компонент который обрабатывает поля формы после нажатия кнопки «Отправить». Не стоит расценивать его как компонент которым можно создавать форму, это лишь помощник в настройке уже подготовленной формы, избавляющий от написания своих PHP скриптов.

У FormIt есть Хуки (Hooks) — скрипты, которые выполняются во время обработки. Хуки могут быть линейными, т.е. выполняются по очереди, а могут быть последовательными, т.е. если выполнено условие первого хука, то начнется выполнение следующего хука.

Существуют также Прехуки (Pre-Hooks), скрипты, которые выполняются до загрузки формы. К примеру скрипт который устанавливает значение по умолчанию для полей форм в старых браузерах, которые не поддерживают соответствующие html плейсхолдеры.

Можно создавать собственные хуки и прехуки указывая их в параметрах preHook и hook FormIt. Стоит учитывать, что они будут выполняться в порядке указанном при вызове, поэтому, если один из скриптов выдал ошибку, сломаются и последующие.

Подключение простой формы с использованием FormIt

Код полностью

[<!--code-->[!FormIt?
   &hooks=`email`
   &emailFrom=`donotreply[@]yourdomain.com`
   &emailTpl=`mailtpl.feedback`
   &emailTo=`[email protected], [email protected]`
   &emailSubject=`Письмо с сайта yourdomain.com`
   &successMessage=`Сообщение отправлено`
   &validate=`name:required,
      email:email:required,
      comment:required,
      antispam:blank`
]]

<form action="" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="[<!--code-->[!+fi.name]]">
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="[<!--code-->[!+fi.email]]">
    <label for="comment">Comment</label>
    <textarea name="comment" id="comment" cols="30" rows="10" value="[<!--code-->[!+fi.comment]]"></textarea>
    <input type="text" name="antispam" id="antispam" value="">
    <input type="submit" value="Submit">
</form>

[[!+fi.validation_error_message:!empty=`
<div class="alert">
  <h3>Пожалуйста, исправьте следующие ошибки:</h3>
    <ul>
        [[!+fi.error.name:!empty=`<li><a href="blog/web/back-end/modx/formit/#name">Поле «Имя» не заполнено</a></li>`]]
        [[!+fi.error.email:!empty=`<li><a href="blog/web/back-end/modx/formit/#email">Поле «Email» не заполнено</a></li>`]]
        [[!+fi.error.comment:!empty=`<li><a href="blog/web/back-end/modx/formit/#comment">Поле «Комментарий» не заполнено</a></li>`]]
    </ul>
</div>`]]
  1. В нужном месте шаблона, или на отдельной странице создадим html код формы
  2. <form action="" method="post">
        <label for="name">Имя:</label>
        <input type="text" name="name" id="name" >
        <label for="email">Email</label>
        <input type="text" name="email" id="email" >
        <label for="comment">Комментарий</label>
        <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
        <input type="submit" value="Submit">
    </form>

    Добавим некешируемые плейсхолдеры FormIt ([[!+fi.код_поля]])

    <form action="" method="post">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="[[!+fi.name]]">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="[[!+fi.email]]">
        <label for="comment">Comment</label>
        <textarea name="comment" id="comment" cols="30" rows="10" value="[[!+fi.comment]]"></textarea>
        <input type="submit" value="Submit">
    </form>

    (префикс fi при желании можно изменить свойством placeholderPrefix при вызове сниппета)

  3. Создаем чанк письма, которое будет приходить на почту после отправки результатов формы. К примеру mailtpl.feedback:

    /* В качестве плейсхолдеров указывается код поля,
     который был записан в форме после префикса fi*/
    <p>Имя: [[+name]]</p>
    <p>Email: [[+email]]</p>
    <p>Комментарий: [[+comment]]</p>     
  4. Вызываем сниппет FormIt 

    [[!FormIt?
       &hooks=`email`
       &emailFrom=`donotreply[@]yourdomain.com`
       &emailTpl=`mailtpl.feedback`
       &emailTo=`[email protected], [email protected]`
       &emailSubject=`Письмо с сайта yourdomain.com`
       &successMessage=`Сообщение отправлено`
    ]]
  5. К коду выше добавляем параметры для проверки заполненности обязательных полей и другие параметры проверки:

    &validate=`name:required,
          email:email:required,
          comment:required`
    
    /* К полю email добавлен параметр :email,
    он проверяет правильность написания адреса электронной почты */
    
    
  6. Добавим оповещение пользователя, о неправильно заполненном поле. В специально отведенное для сообщения об ошибке место (к примеру в тег <label>) вставляем код: 

    [[!+fi.error.placeholder_code:notempty=`<span>Обязательное поле не заполнено</span>`]]

    Вместо оповещения об ошибках рядом с полями, можно создать специальный блок, в котором будут указаны все ошибки разом. Для этого надо обернуть код выше в специальный плейсхолдер, примерно так:

    [[!+fi.validation_error_message:!empty=`
    <div class="alert">
      <h3>Пожалуйста, исправьте следующие ошибки:</h3>
        <ul>
            [[!+fi.error.name:!empty=`<li><a href="[[*uri]]#name">Поле «Имя» не заполнено</a></li>`]]
            [[!+fi.error.email:!empty=`<li><a href="[[*uri]]#email">Поле «Email» не заполнено</a></li>`]]
            [[!+fi.error.comment:!empty=`<li><a href="[[*uri]]#comment">Поле «Комментарий» не заполнено</a></li>`]]
        </ul>
    </div>`]]

Анти-спам

  • Капча (captcha) — распространенный метод. Некоторые виды этой защиты боты научились распознавать и обходить. Самой эффективной на данный момент является reCAPTCHA от Google. Минусы — дополнительное поле, которое надо заполнить пользователю.
    Для FormIt есть специальные хуки с капчами math и reCaptcha;
  • Скрытые поля ввода
    /* Скрытое поле. Не эффективный метод, т.к. боты научились не заполнять скрытые поля */
    <input type="hidden" name="antispam" value=""> 
    
    /* Обычное поле, скрытое за счет css */
    <input type="text" id="antispam" value="">
    
    /* Такие поля можно добавлять с использованием JS, 
    это усилит защиту, т.к. большинство ботов не использует js */
    
    /* При использовании скрытых полей в FormIT надо добавить проверку*/
    [[!FormIt? &validate=`antispam:blank`]]
  • Для FormIt есть специальный хук; проверяющий указанный email в спам-листе. Данный метод помогает далеко не всегда.
    [[!FormIt? &hooks=`spam` &spamCheckIp=`true`]]

AjaxForm

Сниппет ajaxForm представляет из себя надстройку над FormIt реализующую Ajax вызов. Вызов сниппета

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`tpl.AjaxForm.example`
    &emailTpl=`mailtpl.feedback`
    &hooks=`email`
    &emailSubject=`Письмо с сайта yourdomain.com`
    &emailFrom=`donotreply[@]yourdomain.com`
    &emailTo=`[email protected], [email protected]`
    &validate=`name:required,
      email:email:required,
      comment:required,
      antispam:blank`
    &successMessage=`Сообщение отправлено`
]]
   

Возможные ошибки

Если formIt говорит об успешной отправке формы, но письмо на почту не приходит, стоит проверить

  1. правильную настройку mx записи на сервере;
  2. в вызове formIt указан ли адрес исходящей почты: &emailFrom=`[email protected]`

Документация FormIt

Документация AjaxForm

Была ли статья полезной?