MODx FormIt. Создание форм с произвольной логикой

Для чего нужен FormIt?

Если вкратце, то FormIt — это компонент для MODx Revolution, представляющий из себя набор сниппетов и дополнительного интерфейса админки MODx для обработки значений форм и навешивания на них дополнительной логики при успешном/неуспешном заполнении.

Как использовать

Все довольно просто. В коде вашего шаблона/чанка, где находится ваша форма в виде html-кода, перед этой формой ставите вызов сниппета FormIt.

Например:

[[!FormIt]]

или, если вы используете Fenom-синтаксис:

{'!FormIt' | snippet}

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

Механика работы

При отправке данных формы POST запросом на адрес этой же страницы, сниппет FormIt делает обработку значений в соответствии с параметрами вызова сниппета. Если в сниппет был передан параметр submitVar, то при отстутсвии значения в этом поле POST запроса, будет считаться, что отправки формы не было. Это позволяет игнорировать POST-запросы других форм.

В примере ниже сниппет FormIt не будет реагировать на данные при отправке второй формы:

[[!FormIt?
    &submitVar=`myFormSubmit`
]]

<form action="" method="post">
    <input type="text" name="name">
    <button type="submit" name="myFormSubmit" value="1">Отправить</button>
</form>

<form action="" method="post">
    <input type="text" name="name">
    <input type="submit" value="Отправить">
</form>

Сама по себе механика работы FormIt глобально состоит из  3-х основных этапов:

• Предварительная инициализация значений, запуск скриптов preHooks
• Обработка POST-значений и запуск скриптов hooks
• Постобработка значений, запуск скриптов renderHooks и запись плейсхолдеров

Базовые параметры FormIt и пример использования

Несмотря на то, что последние несколько лет я использую сниппет FormIt через компонент AjaxForm, вам в первую очередь необходимо понять механику работы FormIt, так как AjaxForm – это всего лишь обертка, позволяющая запускать FormIt асинхронно, без перезагрузки страницы.

Сам по себе сниппет FormIt имеет не так много родных параметров. Большинство параметров – это параметры, которые необходимы для запуска вызываемых скриптов (хуков). Поэтому, чем больше хуков вы используете, тем больше параметров нужно передать в сниппет FormIt.

Типичный мой вызов FormIt на Fenom выглядит так:

Этот вызов означает, что прежде, чем выполнить хук email, отправляющий письмо по заданному адресу, FormIt проверит, заполнены ли поля name, email и comment. Также поле email будет проверено на предмет соответствия шаблону email-адресов. Если все проверки будут пройдены, то только в этом случае произойдет отправка и будет выведено сообщение об успешности отправки формы. Или же будет выведена ошибка:

[[!+fi.validation_error_message:notempty=<p>[[!+fi.validation_error_message]]</p>]]

Если бы мы не указывали хук email, то параметры:

    'emailTpl'=>'email.questionForm',
    'emailTo'=>$_modx->config.my_admin_email,
    'emailFrom'=>$_modx->config.emailsender,
    'emailSubject'=>'Задан вопрос на сайте '~$_modx->config.site_url,

Не имели бы смысла.

Поэтому, если вы используете какие-либо хуки, не важно, встроенные или свои, то добавляйте в вызов FormIt соответствующие ожидаемые параметры. Набор встроенных хуков FormIt и их параметров можно посмотреть здесь.

Вместо заключения

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

Курс по теме

Также я записывал отдельный курс по созданию Landing Page на MODx, в рамках которого я также показывал, как реализуется простая форма обратной связи и форма с более сложным набором полей.

Подробнее

Как сделать свой хук для авторизации через FormIt