Многостраничная форма в MODX с помощью FormIt

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

1. Я сделал это “дешево и сердито”, как на этом форуме (спасибо odeclas)

http://modxcms.com/forums/index.php/topic,60268.msg342846.html#msg342846

2. Я предполагаю,что вы уже использовали FormIt, но не делали многостраничную форму. Официальную документацию на FormIt можно найти по ссылке: http://www.modx.cc/documentation/additions/formit/

2. Это решение использует FormItRetriever, который идет вместе с FormIt. Вам нужны оба, потому что это работает следующим образом: Обработав первую страницу, FormIt просто "сохраняет" результаты, которые FormItRetriever “извлекает” и размещает в плейсхолдере в скрытых полях на следующей странице. При обработке второй страницы появляется результат (в этом примере это email).
3. Вызов первой страницы сниппетом FormIt

 

[[!<a class="myClass" href="http://www.modx.cc/documentation/additions/formit/">FormIt</a>? &amp;hooks=`redirect` &amp;store=`1` &amp;redirectTo=`ID` &validate=`this_field:required, that_field:required, other_required_fields:required`]]

 

Немного деталей::

 

!FormIt? »  вызов сниппета

&hooks » обратите внимание, здесь нет email, вычислений или чего-то еще, я просто делаю редирект на следующую страницу. Кто-то заподозрит меня в создании спам-крючка или чего-то в этом роде – я не думаю, что в этом есть необходимость.

&store » сообщаем FormIt о записи результатов.

&redirectTo » Заменяем ID на ID документа следующей старницы формы.

&validate » Это стандартная проверка FormIt – добавляет необходимые поля в форму. Эта страница формы не появится, пока не пройдет проверку.

Больше ничего особенного нет, поэтому – вперед!

5. Вторая страница вызова сниппета FormIt

 

[[!<a class="myClass" href="http://www.modx.cc/documentation/additions/formit/">FormIt</a>? &amp;hooks=`spam,email,redirect` &amp;emailTpl=`emailTplChunk` &amp;emailSubject=`Multipage Form by [[+name]]` &amp;emailTo=`modx@siteowner.com` &amp;validate=`name:required:minLength=`2`, email:email:required, 2nd_page_required_fields:required` &amp;redirectTo=`ID2`]]

 

 

Немного деталей:

 

!FormIt? » Здесь вы можете использовать любой FormIt крючок, который обычно используете. В этом примере FormIt проверяет на спам адреса результаты формы и перенаправляет на страницу с благодарностью (Thank You page).

&emailTpl » Имя email шаблона чанка. Оно необходимо, иначе FormIt отправит списокполей и значений.

&emailSubject » Тема письма с отчетом – вы можете использовать плейсхолдер для любых полей формы

&emailTo » Массив адресов получателей, разделитель – запятая.

&redirectTo » заменяет ID2 документа на ID вашей “страницы с благодарностью”.

&validate » Дополнительные опции проверки. Информацию о использовании и список опций можно найти по ссылке http://www.modx.cc/documentation/additions/formit/validation-formit/

6. Очень важная часть!

 

[[!FormItRetriever]]

 

Также должны вызвать FormItRetriever на этой странице. Это должно следовать непосредственно после сниппета FormIt и перед актуальной Html формой. Не уверен, что это обязательно нужно делать в таком порядке, но это выглядит рабочим. Подождите … сйчас мы имеем данные вызванные из формы предыдущей страницы, куда дальше?

 

    7.  Добавление плейсхолдера для выходных данных формы:

 

  <input type="hidden" name="this_field" value="

[[+fi.this_field]]

" />

  <input type="hidden" name="that_field" value="

[[+fi.that_field]]

" />

 

Это скрытые поля, в которые FormItRetriever выводит сохраненные данные с первой страницы. Обратите внимание, на приставку "fi.". Эта приставка должна быть вложенной в <form> элемент, я группировал предшествующие второй странице элементы, но предполагаю, что они могут быть где угодно в форме.

 

В этом примере ТОЛЬКО "this_field" и "that_field" являются выходными данными. Все другие поля  с первой страницы будут отброшены, если я не добавлю плейсхолдер для них. Не слишком мудрёно? :)

 

8. Шаблон письма.

 

Запомните. нужно включать плейсхолдер с обеих страниц вашей формы в чанк email шаблона. Нет плейсхолдера = некуда выводить выходные данные = утерянные данные.

На этом все. Надеюсь, это поможет. Спасибо команде MODX за замечательную платформу, а FormIt разработчикам – за  “потрясное” дополнение.

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