Урок 13 – Форма обратной связи
В рамках данного урока мы познакомимся с еще одним сниппетом MODx – eForm, который служит для создания различных форм. Мы же создадим для нашего сайта форму обратной связи.
Наша форма будет иметь следующие поля:
- Имя – поле ввода имени посетителя сайта, заполнившего форму обратной связи;
- Email – поле ввода электронной почты посетителя;
- Тема обращения – выпадающий список с вариантами тем;
- Обращение – текстовая область для ввода текста сообщения.
Сниппет eForm устанавливается по умолчанию вместе с CMS MODx, в этом вы можете убедиться, если перейдете на страницу управления сниппетами «Элементы»-«Управление элементами»-«Сниппеты»:
Создаем форму обратной связи MODx eForm
Откройте ресурс «Контакты» на редактирование, назначьте наш последний созданный шаблон, если он еще не назначен и отключите использование визуального редактора для этого ресурса. Сохраните ресурс и откройте на редактирование заново, после чего добавьте в содержимое ресурса следующую строку:
[ !eForm? &formid=`contact-form` &tpl=`form-tpl`&to=`mail@mail.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`]]
Как вы догадались, это вызов сниппета eForm с параметрами:
&formid=`contact-form` - это уникальный идентификатор формы, который должен обязательно быть указан в атрибуте id вашей формы или в значение скрытого поля с идентификатором formid;
&tpl=`form-tpl` - задает имя чанка с вашей формой обратной связи;
&to=`` -задает список электронных адресов через запятую, на которые должны приходить сообщения с формы обратной связи;
&mailselector=`otdel` - позволяет выбрать из получателей в зависимости от типа сообщения;
&report=`report-tpl` - параметр передает имя чанка, который используется в качестве шаблона письма, которое приходит получателю;
&thankyou=`thank-tpl` - параметр передает имя чанка, который используется в качестве шаблона письма, приходящее отправителю;
&vericode=`1` - задает выводить или не выводить проверочный код для формы;
&subject=`` - тема сообщения с формы обратной связи.
Как вы уже догадались, нам необходимо дополнительно создать несколько чанков: form-tpl, report-tpl, thank-tpl. Этим мы и займемся.
Чанк form-tpl – шаблон формы обратной связи
Создаем новый чанк с именем form-tpl и вписываем в его содержимое следующее:
Сохраняем чанк.
Теперь давайте обратим внимание на некоторые конструкции.
[ +validationmessage+] – это плейсхолдер для вывода сообщений об ошибках, которые могут быть допущены при заполнении формы.
Как вы заметили, имеется скрытое поле с именем formid и значением contact-form, о котором мы говорили чуть выше.
eform=”Текст сообщения:html:1” Данная конструкция задает несколько параметров для поля формы:
eform="[описание]:[тип данных]:[обязательное ли поле]:[сообщение об ошибке]:[правило проверки]"
«Описание» – это текстовое описание поля;
«Тип данных» – может принимать следующие значения: string – любой текста, date – дата, integer – целое число, email – электронный адрес, float – число, html – текст в формате HTML, file – поле для отправки файла.
«Обязательное ли поле» - принимает два возможных значения: 0-необязательное, 1 – обязательное.
«Сообщение об ошибке» - текст сообщения об ошибке, в нашем случае текст отсутствует.
«Правило проверки» - в нашем случае правило не задано.
[ +verimageurl+] – плейсхолдер для вывода капчи.
Чанк report-tpl – шаблон уведомления с формы обратной связи
Создадим еще один чанк с именем report-tpl и впишем в код следующее содержимое:
Обратите внимание, что вся информация добавляется в шаблон с помощью плейсхолдеров, названия которых совпадает с именами полей в нашей форме.
Чанк thank-tpl – шаблон уведомления с формы обратной связи для отправителя
Создаем еще один чанк с именем thank-tpl и впишем в код следующее содержимое:
Думаю здесь все понятно, сохраните чанк и зайдите на страницу контактной информации, если вы все сделали правильно, то у вас должна появиться форма.
В рамках данного урока я не буду объяснять, как прописать стили для вашей формы, поскольку мы это делали в предыдущих уроках, и я думаю, вы сможете сделать самостоятельно без всякого труда. На этом урок закончен, а в следующем уроке мы познакомимся с тем как сделать карту сайта с помощью сниппета Sitemap.
Постов: 1
Добавлен #1 на : Сб марта 07, 2015, 15:54:04