Почтовая форма создаётся, как любой другой раздел в системе, но при этом для раздела почтовой формы в файловой системе сайта на сервере создаётся папка с именем, соответствующем части URL, и в папку помещаются файлы с шаблонами типовой формы.
Редактирование шаблонов возможно по ФТП или через админский интерфейс. Редактирование шаблонов доступно в узле «Почтовые формы» в админском меню, активируется кликом по названию почтовой формы, или активируется кликом по кнопке «Шаблоны» в верхнем фрейме при просмотре свойств или содержания раздела почтовой формы.
Вкладкам в интерфейсе редактирования шаблонов соответствуют файлы:
- Форма
- – content.tpl
- Письмо
- – message.html
- Квитанция
- – user_message.html
- Подтверждение
- – success.tpl
- Ошибка
- – error.tpl
Вёрстка формы (content.tpl)
При создании раздела — почтовой формы копируются шаблоны формы-образца; на их основе администратор или верстальщик могут создать форму с составом полей, нужным для конкретной задачи.
Для вёрстки формы необходимо хотя бы начальное знание html. Ниже — пример html-кода почтовой формы.
<form name="send_to_admin" method="post" enctype="multipart/form-data" onsubmit="return validateForm(this, 'Проверьте правильность заполнения следующих полей:');"> <input type="hidden" name="formEncoding" value="ISO8859_1"> <input type="hidden" name="purpose" value="mailForm" /> <table> <tr> <td><label id="!text" for="sender_name">Ф.И.О.: <sup>*</sup></label></td> <td><input class="test" type="text" name="sender_name" title="Ф. И. О." /></td> </tr> <tr> <td><label id="!email" for="milo">Контактный e-mail: <sup>*</sup></label></td> <td><input type="email" name="milo" title="Контактный e-mail" /></td> </tr> <tr> <td><label id="phone" for="phone">Телефон:</label></td> <td><input type="tel" name="phone" title="Телефон" /></td> </tr> <tr> <td><label id="!text:10:300" for="message"> Ваше сообщение: <sup>*</sup><br />(до 300 символов) </label></td> <td><textarea name="message" id="message" title="Ваше сообщение (до 300 символов)"></textarea></td> </tr> <tr> <td><label for="attachment">Прикрепить файл:</label></td> <td><input type="file" name="attachment" title="Файл" /></td> </tr> <tr> <td><label id="!text" for="code">Введите код: <sup>*</sup></label></td> <td> <img src="/captcha.jpg" alt="CAPTCHA code"/><br /> <input type="text" name="code" title="Код" /> </td> </tr> <tr> <td></td> <td><input class="but" type="submit" value="Отправить" /></td> </tr> </table> </form>
Элементы формы
Элементы формы (поля и кнопки) создаются html-элементами:
- input (поля и кнопки, подробнее см. ниже)
- select (выпадающий список)
- textarea (большое поле для текста)
- button (кнопка; в отличие от кнопок input, может содержать в себе другие элементы)
Все элементы должны находиться внутри элемента form, иначе их значения не будут отсылаться формой.
Каждое поле должно иметь атрибут name (имя) с уникальным (в пределах данной формы) значением (исключение - группы переключателей и флажков: все поля в группе должны иметь один name).
Input
Тип поля или кнопки, создаваемых элементом input, определяется html-атрибутом type. Значения type, которые могут понадобиться в почтовой форме:
- text
- простое текстовое поле
- checkbox
- галочка (флажок) для необязательного выбора (жаргонное название — «чекбокс»)
- radio
- переключатель для обязательного выбора «один из многих» (жаргонное название — «радиобаттон»); в форме должно быть не меньше двух полей этого типа с одним именем (name), первое поле обязательно должно иметь атрибут checked="checked".
- hidden
- невидимое поле
- file
- прикрепляемый файл (файл для загрузки)
- url
- адрес сайта (может заменяться полем типа text)
- почта (может заменяться полем типа text)
- tel
- телефон (может заменяться полем типа text)
- submit
- кнопка отправки формы с текстовой надписью
- image
- кнопка отправки формы с картинкой
- reset
- сброс всех заполненных полей (не рекомендуется; на практике от неё больше вреда)
- button
- кнопка для запуска скрипта (нажатие по ней не отправляет форму)
В почтовой форме обязательно должно быть скрытое поле purpose со значением mailForm (без него форма не обрабатывается: не отправляется, но и не выводит сообщения об ошибке):
<input type="hidden" name="purpose" value="mailForm" />
Если в свойствах раздела нет флажка «Не отправлять пользователю», форме необходимо текстовое поле с именем milo (электронный адрес пользователя).
Если в свойствах раздела нет галочки «Выключить защиту от заполнения формы роботами (CAPTCHA)», в форме должна быть капча и поле для неё.
Обязательные поля (валидация)
Для большинства браузеров (за исключением IE ниже 10 версии) для проверки поля на заполненность достаточно добавить полю атрибут required.
Если проверяемое поле должно быть заполнено в определённом формате, используется атрибут pattern (требуется знание регулярных выражений). Пример формата для проверки телефонных номеров: pattern="[0-9\-\(\)\+]{7,}" (что означает: «не менее 7 знаков, допускаются цифры, дефис, плюс и скобки»).
Поля типа file проверить на заполненность невозможно! Однако есть ограниченная возможность проверки типа загружаемого файла: атрибут accept; в качестве значения указывается MIME-тип файла (работает не во всех браузерах).
Для IE старых версий используется скриптовый валидатор.
Письмо (message.html)
Шаблон содержит текст письма, отправляемого формой на почтовый адрес, указанный в свойствах формы, если его нет, используется адрес администратора сайта. Чтобы в письме сохранялись значения заполненных полей, в шаблон вставляются теги с именами (name) этих полей в виде «<!--name--».
Ниже — образец шаблона письма.
Добрый день, <!--admin_name-->. <!--sender_name--> заполнил(а) почтовую форму на <!--HOST--><!--PATH--> со следующими данными: --------------- Контактный e-mail: <!--milo--> Телефон: <!--phone--> Тема сообщения: <!--tema--> Сообщение: --------------- <!--message--> --------------- Требуется оперативно ответить, если контактные данные верны. С уважением, система управления контентом CMS UlterSuite
Первая строка шаблона — тема письма.
Поле типа file (прикрепляемый файл) в шаблон не вставляется (файл прикрепляется автоматически).
Также в шаблоне используются теги:
- <!--admin_name-->
- имя администратора (задаётся ресурсом <!--ADMIN_NAME--> в свойства раздела)
- <!--HOST-->
- адрес сайта (домен без http)
- <!--PATH-->
- относительный пусть к странице формы
Квитанция (user_message.html)
Шаблон уведомления об отправке письма, которое отсылается пользователю. Строится аналогично шаблону message.html.
Письма админу и пользователю могут быть в формате text или html. Формат письма задаётся в конфигурационных файлах (для продвинутого админа). Если используется формат html, текст писем должен быть разбит на абзацы тегами html. Заголовок письма (первая строка шаблона) тегом не обрамляется.
Подтверждение (success.tpl)
Выводит на странице сообщение об успешной отправке.
Ошибка (error.tpl)
Выводит сообщение об ошибке; причиной обычно бывает неправильный код капчи или невозможный формат электронной почты, а также отсутствие одного из этих полей (если оно не отключено в свойствах раздела).
