Контактная информация

По всем интересующим вас вопросам связывайтесь при помощи контактной информации приведенной на этой странице!

skype: metsof
email: accusser@gmail.com

В социальных сетях...

Форма обратной связи

Авторизация

FormIt MODX Revolution. Создание многостраничной формы с помощью Formit

Сайдбар

FormIt MODX Revolution. Создание многостраничной формы с помощью Formit

10 дек. 2012

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

  1. Я сделал это “дешево и сердито”, как на этом форуме (спасибо odeclas)
http://modxcms.com/forums/index.php/topic,60268.msg342846.html#msg342846
  1. Я предполагаю, что вы уже использовали FormIt, но не делали многостраничную форму. Официальную документацию на FormIt можно найти по ссылке: http://www.modx.cc/documentation/additions/formit/
  1. Это решение использует FormItRetriever, который идет вместе с FormIt. Вам нужны оба, потому что это работает следующим образом: Обработав первую страницу, FormIt просто «сохраняет» результаты, которые FormItRetriever “извлекает” и размещает в плейсхолдере в скрытых полях на следующей странице. При обработке второй страницы появляется результат (в этом примере это email).
  2. Вызов первой страницы сниппетом FormIt
 
<code>[[!<a class="myClass" href="http://www.modx.cc/documentation/additions/formit/">FormIt</a>? &hooks=`redirect` &store=`1` &redirectTo=`ID` &validate=`this_field:required, that_field:required, other_required_fields:required`]]</code>
 

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


 
!FormIt? »  вызов сниппета
&hooks » обратите внимание, здесь нет email, вычислений или чего-то еще, я просто делаю редирект на следующую страницу. Кто-то заподозрит меня в создании спам-крючка или чего-то в этом роде – я не думаю, что в этом есть необходимость.
&store » сообщаем FormIt о записи результатов.
&redirectTo » Заменяем ID на ID документа следующей старницы формы.
&validate » Это стандартная проверка FormIt – добавляет необходимые поля в форму. Эта страница формы не появится, пока не пройдет проверку.
Больше ничего особенного нет, поэтому – вперед!
  1. Вторая страница вызова сниппета FormIt
 
<code>[[!<a class="myClass" href="http://www.modx.cc/documentation/additions/formit/">FormIt</a>? &hooks=`spam,email,redirect` &emailTpl=`emailTplChunk` &emailSubject=`Multipage Form by [[+name]]` &emailTo=`modx@siteowner.com` &validate=`name:required:minLength=`2`, email:email:required, 2nd_page_required_fields:required` &redirectTo=`ID2`]]</code>
 
 

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


 
!FormIt? » Здесь вы можете использовать любой FormIt крючок, который обычно используете. В этом примере FormIt проверяет на спам адреса результаты формы и перенаправляет на страницу с благодарностью (Thank You page).
&emailTpl » Имя email шаблона чанка. Оно необходимо, иначе FormIt отправит списокполей и значений.
&emailSubject » Тема письма с отчетом – вы можете использовать плейсхолдер для любых полей формы
&emailTo » Массив адресов получателей, разделитель – запятая.
&redirectTo » заменяет ID2 документа на ID вашей “страницы с благодарностью”.
&validate » Дополнительные опции проверки. Информацию о использовании и список опций можно найти по ссылке http://www.modx.cc/documentation/additions/formit/validation-formit/
  1. Очень важная часть!
 
<code>[[!FormItRetriever]]</code>
 
Также должны вызвать FormItRetriever на этой странице. Это должно следовать непосредственно после сниппета FormIt и перед актуальной Html формой. Не уверен, что это обязательно нужно делать в таком порядке, но это выглядит рабочим. Подождите … сйчас мы имеем данные вызванные из формы предыдущей страницы, куда дальше?
 
    7.  Добавление плейсхолдера для выходных данных формы:
 
  <input type="hidden" name="this_field" value="
<code>[[+fi.this_field]]</code>
" />
  <input type="hidden" name="that_field" value="
<code>[[+fi.that_field]]</code>
" />
 
Это скрытые поля, в которые FormItRetriever выводит сохраненные данные с первой страницы. Обратите внимание, на приставку «fi.». Эта приставка должна быть вложенной в элемент, я группировал предшествующие второй странице элементы, но предполагаю, что они могут быть где угодно в форме.
 
В этом примере ТОЛЬКО «this_field» и «that_field» являются выходными данными. Все другие поля  с первой страницы будут отброшены, если я не добавлю плейсхолдер для них. Не слишком мудрёно? :)
 
8. Шаблон письма.
 
Запомните. нужно включать плейсхолдер с обеих страниц вашей формы в чанк email шаблона. Нет плейсхолдера = некуда выводить выходные данные = утерянные данные.
На этом все. Надеюсь, это поможет. Спасибо команде MODX за замечательную платформу, а FormIt разработчикам – за  “потрясное” дополнение.
Просьба добавлять комментарии, необходимые для того, чтобы улучшить этот урок (или, по меньшей мере, предложите способ, с помощью которого я смогу сделать это лучше, ну или просто укажите на ошибки).






Комментарии (1)

  1. Комментарий был удален.

    Услуги по MODX Revolution

    Посмотреть все услуги

    Техническая оптимизация сайта

    Подробнее & Заказать

    Создание сайта на MODX Revolution

    Подробнее & Заказать

    Перенос сайта на MODX Revolution

    Подробнее & Заказать

    Продвижение сайта на MODX

    Подробнее & Заказать