MODx Украина » eForm. Тонкости создания веб-форм

eForm. Тонкости создания веб-форм - шаблонов eForm

 

eForm — сниппет для обработки веб-форм, которые пользователь заполняет на сайте. Он входит в стандартный дистрибутив MODx. Данные могут отправляться на электронную почту.
eForm это очень гибкий парсер форм который позволит вам конвертировать веб-формы в e-mail который может, отправятся на почту ваших пользователей и вам. Некоторые особенности:

  • Валидация формы с мощными правилами.
  • Защита с помощью скрытых полей от взлома (на англ. было — against tampering)
  • Поддержка CAPTCHA.
  • Поддерживает html email с вложенниями.
  • Гибкий отчет и генерация страниц, используя плейсхолдеры.
  • Нотификации на мобильные девайсы
  • E-mail Автоответчик
  • Поддержка CC и BCC полей.

Что нужно для работы:

  1. Шаблон самой формы (задается в параметре &tpl)
  2. Шаблон Репорта (задается в параметре &report)
  3. Сам вызов eForm.

Начнем.

Шаблон формы

Начну с примера:

<p><span style="color:#900;">[+validationmessage+]</span></p> <form method="post" action="[~[*id*]~]"> <input type="hidden" name="formid" value="feedbackForm" /> <p><label accesskey="n">Ваше Имя</label> <input type="text" name="Name" maxlength="60" eform="Your Name::1" /></p> <p><label accesskey="e">Ваш е-мэйл адрес</label> <input type="text" name="email" size="40" maxlength="40" eform="Your Email Address:email:1" /></p> <label accesskey="s">Тема</label> <select name="subject"> <option value="Feedback">Проблемы с сайтом, пожелания.</option> <option value="Support request">Запрос технической поддержки</option> <option value="Feature Request">Запрос подробностей.</option> </select> <p><label accesskey="c">Текст письма</label><br /> <textarea cols="40" rows="10" name="comments" eform="Comments:html:1"></textarea></p> <p><label>Хотели бы вы подписаться на нашу рассылку?</label> <input type="radio" name="list" value="Yes" eform="Mailling List::0:" /> Да&nbsp; <input type="radio" name="list" value="No" /> Нет&nbsp;</p> <p> Пожалуйста введите код: (Чтобы предупредить спам)<br /> <img src="[+verimageurl+]" alt="verification code" /><br /> <input type="text" name="vericode" size="20" /> </p> <p><input type="submit" name="submit" value="Send Feedback"></p> </form>


Здесь:
[+validationmessage+] — плейсхолдер для вывода ошибок,
[+verimageurl+] — адрес картинки с капчей,
[~[*id*]~] — ссылка на эту же страницу.

Теперь про конструкции вида: «eform="Your Name::1" »

Типы и форматы данных

eForm имеет встроенный анализатор определяющий формат и тип данных с соответствующей проверкой каждого поля. Для настройки используется добавление дополнительного параметра eform в необходимые поля.

<input type="text" name="color" eform="A Color:string:1"/>

Базовый вид параметра eform следующий:

[description/title]:[datatype]:[required]:[validation message]:[validation rule]

Data types

Вы можете устанавливать только эти типы данных. Другие определяются автоматически.

Все поля автоматически проверяют на пустоту значений.

string — не имеет специальной проверки кроме пустоты и обязательности заполнения.

date — проверяется на правильность формата даты (основано на функции strtotime())

integer — проверяется на числовое значение (не проверяется, если оно целое)

float — проверка на числовое значение

email — проверяет правильность адреса email с использованием регулярных выражений

file — (для поля загрузки файла) — проверяет соответствие разрешенному размеру, на текущий момент не имеет проверки типов файлов.

html — также как тип string только перенос строки преобразуется в тэг

Выпадающие списки, чекбоксы, и радиобатоны не требуют определения типа. eForm определяет их автоматически.

 

Для тех, кто немного не до понял как делать веб-формы и шаблоны для eForm в часности:

Сначала нужно поставить такой код:
<p><span style="color:#900;">[+validationmessage+]</span></p>
для вывода ошибок ввода. А также такой:
<form method="post" action="[~[*id*]~]">

Далее ставить элементы формы так:
<label>Название поля</label>
<input type="text" name="latin-name" eform="Название поля::1"/>

или так:

<p><label accesskey="c">Название textarea поля</label><br />
<textarea cols="40" rows="10" name="latin-name" eform="Название textarea поля:html:1"></textarea></p>

для много-строчных полей.

И в конце:

<p><input type="submit" name="submit" value="Send Feedback"></p>
</form>

Шаблон Репорта

Создаем шаблон репорта, т.е. определяем вид, в каком информация из формы будет приходить на e-mail.
Пример:


<p>Прислано человеком, с именем: [+Name+] . Подробности ниже:</p> <table> <tr valign="top"><td>Имя:</td><td>[+Name+]</td></tr> <tr valign="top"><td>mail:</td><td>[+email+]</td></tr> <tr valign="top"><td>тема:</td><td>[+subject+]</td></tr> <tr valign="top"><td>Содержание:</td><td>[+comments+]</td></tr> </table> <p> Хочет ли [+name+] Быть в рассылке? <strong>[+list+]</strong></p> <p>Можно использовать ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>

Названия плейсхолдеров здесь — это параметры «name» тегов «input» из предыдущего шаблона.

Вызов eForm

Вызов eForm может быть таким:

[!eForm? &formid=`feedbackForm` &to=`me@some.domain.com` &tpl=`eFeedbackForm` &report=`eFeedbackReport` &gotoid=`34` &vericode=`1`!]

Где:
&to — адрес, куда будут отправлены письма (можно несколько через запятую)
&tpl — шаблон формы
&report — шаблон репорта
&gotoid — id куда будет перемещен пользователь после заполнения формы
&vericode — Использование CAPTHA (1 — да, 0 — нет)

Все параметры
http://www.modx-cms.ru/dokumentatsiya/razrabotka/snippety/eform/parametry-eform.html

Ресурсы по теме:
http://habrahabr.ru/blogs/modx/14751/
http://ru.wikibooks.org/wiki/MODx/Встроеные_сниппеты/eForm
http://www.modx-cms.ru/dokumentatsiya/razrabotka/snippety/eform.html
http://wiki.modxcms.com/index.php/EForm

 

   

Понравилась статья?

Тогда подпишитесь на:

  1. RSS-ленту
  2. Email рассылку
  3. Twitter ленту
  4. Facebook ленту или нашу Facebook страницу!

Также вас могут заинтересовать:


Комментариев
Комментарии работают на Disqus

Поиск по сайту

Подпишитесь на обновления

Что такое RSS?

Подписка на RSS ленту

Введите email адрес:


MODx

 
Описание Сниппеты
Установка - Jot
Настройка - Ditto
  - Wayfinder
  - eForm
   

Последние публикации

Facebook

Анонсы последних статей

Облако тегов

Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script.

Друзья сайта

Система Orphus
SliceFactory Extension Factory