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

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

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

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

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

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

  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=`donotreply@yourdomain.com, admin@yourdomain.com`
       &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="notes/web/back-end/modx/formit/#name">Поле «Имя» не заполнено</a></li>`]]
            [[!+fi.error.email:!empty=`<li><a href="notes/web/back-end/modx/formit/#email">Поле «Email» не заполнено</a></li>`]]
            [[!+fi.error.comment:!empty=`<li><a href="notes/web/back-end/modx/formit/#comment">Поле «Комментарий» не заполнено</a></li>`]]
        </ul>
    </div>`]]

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

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

<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.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>`]]

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