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

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

skype: metsof
email: accusser@gmail.com

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

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

Авторизация

MODX статьи, уроки и готовые решения для MODX Revo

Сайдбар

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

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