Инструкция по созданию сайта на MODx. Урок 15 — Форма обратной связи в MODx. Сниппет eForm

В сегодняшнем уроке мы научимся создавать в MODx с помощью встроенного сниппета eForm форму обратной связи, которая украсит собой нашу страницу с контактной информацией.

Одна из основных функций любого сайта — организация взаимосвязи между владельцем сайта и посетителями. Трудно представить, что это взаимосвязь будет полной, если вы не дадите посетителю возможность выразить свою точку зрения или просто связаться с вами для чего бы то ни было. Обратная связь — очень важный элемент для любого сайта, как продающего или предоставляющего какие-либо услуги, так и для обычной личной страницы. Именно благодаря обратной связи общение может быть полным и проходить в двух направлениях: «владелец – посетитель» и «посетитель – владелец». Учитывая все это, мы приступаем к созданию на нашем сайте формы обратной связи.

Перед началом работы неплохо было бы в нескольких словах описать, что мы хотим получить на выходе.

Мы создадим форму с полями: «имя», «электронная почта», «тема сообщения», «текст сообщения», при этом:

  • «имя» —  поле, обязательное для заполнения
  • «электронная почта» — обязательное для заполнения и должно проверяться на правильность ввода e-mail
  • «тема сообщения» — поле представлено в виде выпадающего списка, и, в зависимости от выбранного посетителем пункта, письмо будет отправляться на тот или иной почтовый ящик (эта опция будет полезна тогда, когда на вопросы различных направлений будут отвечать разные люди)
  • «сообщение» — поле, обязательное для заполнения

Также необходимо реализовать  оповещение посетителей об ошибках ввода информации при заполнении формы. Последнее требование к форме обратной связи — наличие защиты от спама в виде поля для ввода текста со сгенерированного изображения (капчи).

Как я уже сказал, для создания формы обратной связи в MODx мы будем использовать сниппет eForm. На странице с перечнем сниппетов (Элементы→Управление элементами→Сниппеты) убедитесь, что он у вас установлен  и двигаемся дальше.

eForm1

Вызов сниппета eForm ничем не отличается от вызова остальных сниппетов и, если вы дошли до этого урока, то вам он, наверняка, знаком. Основные параметры, которые вы должны обязательно знать при работе в MODx с этим сниппетом мы разберем на примере. Приступаем.

Вот конструкция, которую мы будем использовать для вызова на странице «Контактная информация» нашей формы обратной связи.

[!eForm? &formid=`contact-form` &tpl=`form-tpl`&to=`info@site.ru,support@site.ru,requests@site.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]

В этой конструкции использовались следующие параметры eForm:

  • &formid — уникальный идентификатор формы. Это значение у вас должно будет обязательно указываться в шаблоне формы в скрытом поле или как значение id в теге form.
  • &to — значением этого параметра является разделенный запятой список электронных адресов возможных получателей письма. Сам же выбор, кому все-таки из перечисленных адресов отправить письмо, будет производиться с помощью параметра &mailselector из выпадающего списка в шаблоне формы.
  • &tpl — параметр указывает сниппету, какой чанк будет использоваться в качестве шаблона формы.
  • &report — параметр передает сниппету название чанка, который будет использоваться в качестве шаблона для отправки данных на почту.
  • &thankyou — название чанка, в который вы можете поместить текст, который увидит посетитель после отправки письма.
  • &mailselector — этот параметр указывает, какое поле будет использоваться в качестве выбора адресата (если их более одного). Если этот параметр вас немножко смутил, продолжайте изучение урока, и по ходу все станет понятно.
  • &vericode — параметр, который указывает, использовать ли капчу для отправки формы. Если в этот параметр вписана единица, то пользователю перед отправкой придется еще ввести текст с картинки, если же значение этого параметра – ноль, то капча генерироваться не будет.
  • &subject — в этот параметр можно вписать текст, который будет использован в качестве темы электронного письма.

Итак, теперь вы уже знаете, для чего необходим тот или иной параметр. Давайте подведем итог и опишем вышеуказанную конструкцию по параметрам вместе с их значениями:

  • &formid=`contact-form` &tpl=`form-tpl` HTML шаблон формы будет храниться в чанке «form-tpl» при этом идентификатор этой формы — «contact-form».
  • &to=`info@site.ru, support@site.ru, requests@site.ru` &mailselector=`otdel` Получателями отправленного с помощью формы сообщения являются следующие электронные адреса «info@site.ru, support@site.ru, requests@site.ru» при этом выбор, кому из них отправить сообщение, определяется в шаблоне формы с помощью поля с именем «otdel».
  • &vericode=`1` Перед отправкой сообщения посетитель должен будет вписать верный текст со сгенерированного для него изображения.
  • &subject=`Сообщение с моего сайта` В качестве темы получаемых писем будет использован текст «Сообщение с моего сайта».
  • &report=`report-tpl` Оформление передаваемой на e-mail информации определяется шаблоном, который будет храниться в чанке «report-tpl».
  • &thankyou=`thank-tpl` Информация, которую увидит посетитель после отправки сообщения будет храниться в чанке «thank-tpl».

Как вы видите, у нас многие параметры ссылаются на чанки, которые мы еще не создали. Поэтому, перед тем как вызвать сниппет на странице, давайте создадим требуемые чанки с необходимыми для работы сниппета шаблонами.

Чанк с HTML шаблоном формы обратной связи

На странице со списком уже созданных чанков создаем новый чанк с именем «form-tpl» и в поле с содержимым помещаем следующий код:

<div id="respond">
[+validationmessage+]
<form method="post" action="[~[*id*]~]">
<input type="hidden" name="formid" value="contact-form" />
<p><label accesskey="n" for="name">Ваше имя</label><br/>
<input type="text" name="name" size="40" maxlength="60" eform="Имя::1" /></p>
<p><label accesskey="e" for="email">Электронный ящик</label><br/>
<input type="text" name="email" size="40" maxlength="40" eform="Адрес электронной почты:email:1" /></p>
<p><label accesskey="s" for="otdel">Тема сообщения</label><br/>
<select name="otdel" >
<option value="1">Запрос информации</option>
<option value="2">Техническая поддержка</option>
<option value="3">Предложение</option>
</select></p>
<p><label accesskey="c" for="comments">Текст сообщения</label><br/>
<textarea cols="40" rows="10" name="comments" eform="Текст сообщения:html:1" ></textarea></p>
<p>Введите этот код:<br />
<img src="[+verimageurl+]" alt="Код проверки" border="1"/>
<input type="text" class="vericodeform" name="vericode" />
</p>
<p><input type="submit" name="submit" id="submit"  value="Отправить"></p>
</form>
</div>

Подробно описывать этот шаблон я не буду, остановлюсь только на некоторых элементах.

В начале формы идет конструкция [+validationmessage+] — она отвечает за вывод сообщений об ошибке заполнения при отправке формы.

Конструкция action="[~[*id*]~]" указывает, что обработчиком формы будет та страница, на которой вызван сниппет. Вместо [~[*id*]~] MODx подставит URL текущего документа.

Скрытое поле <input type="hidden" name="formid" value="contact-form" /> указывает идентификатор формы, который мы указали при вызове сниппета.

Также вы скорей всего обратили внимание на конструкции следующего вида:

eform="Адрес электронной почты:email:1"

Не стоит пугаться, ничего сложного в этом нет, для того чтобы легче было понять смысл этих записей вы должны познакомиться со следующим шаблоном заполнения:

eform="[описание поля]:[тип вводимых данных]:[обязательное ли поле]:[сообщение об ошибке ввода]:[правило проверки ввода]"

Все параметры, как мы видим, разделены между собой знаком двоеточия, если же какой-нибудь параметр будет пропущен, знак двоеточия останется все равно (в таком случае оставшиеся параметры будут отделяться друг от друга знаком «::»). Ниже подробно описаны параметры этой конструкции.

Описание поля

Описание или имя поля может быть любым подходящим по смыслу.

Типов вводимых данных

Сниппет eForm поддерживает следующие значения типов данных:

  • string — любая строка. Поле с этим типом не проходит дополнительную проверку.
  • date — перед отправкой содержимое пройдет проверку, является ли введенная информация о дате корректной.
  • integer — в это поле можно ввести только целое число.
  • email — перед отправкой содержимое пройдет проверку, является ли введенный адрес корректным.
  • float — перед отправкой содержимое пройдет проверку, является ли поле числовым значением.
  • html — текст в HTML (например, вместо текстового переноса строки «\n» используется HTML тег «<br />»).
  • file — помечается поле, для прикрепления и отправки файла.

Обязательное ли поле

Этот параметр может принимать 2 значения:

  • 1 – поле обязательно для заполнения
  • 0 – поле необязательно для заполнения

Сообщение об ошибке ввода

Сообщение, которое будет выводиться в случае, когда введенная информация не удовлетворяет правилу проверки.

Правило проверки ввода

Дополнительное правило для проверки правильности ввода. С помощью этого параметра можно задать возможные значения для ввода либо с помощью регулярных выражений проверить правильность ввода информации. Если вы не хотите дополнительно проверять ваше поле еще по какому-нибудь условию, то можете просто опустить этот параметр.

Итак, теперь можно сравнить ранее незнакомые для вас конструкции в чанке «form-tpl» с только что разобранным шаблоном ввода.

Для конструкции eform="Адрес электронной почты:email:1"

  • Описание поля — Адрес электронной почты
  • Тип вводимых данных — email
  • Обязательное ли поле — 1 (обязательное)
  • Сообщение об ошибке ввода – отсутствует
  • Правило для проверки вводимых значений не задано

Вы можете обратить внимание, что каждое поле в HTML шаблоне формы должно иметь свое уникальное имя. 

Плейсхолдер[+verimageurl+] отвечает за вывод капчи.

Давайте разберем поле с именем «otdel», которое представлено в виде выпадающего списка. При вызове сниппета мы именно это поле будем использовать для выбора адресата с помощью параметра &mailselector.

Каждому пункту выпадающего списка соответствует числовое значение (value="1", value="2", value="3")

<select name="otdel">
<option value="1">Запрос информации</option>
<option value="2">Техническая поддержка</option>
<option value="3">Предложение</option>
</select>

Если посетитель выберет, например, из этого списка пункт «Техническая поддержка», то письмо будет отправлено на второй почтовый ящик, указанный в параметре &to при вызове сниппета. В нашем случае &to=`info@site.ru,support@site.ru,requests@site.ru` второй по счету электронный адрес есть support@site.ru. Если выберет пункт со значением value="1", то письмо будет отправлено на первый по счету электронный ящик. Одним словом, в HTML шаблоне формы значение «value» это ни что иное как порядковый номер почтового ящика, на который следует отправить письмо.

Чанк с шаблоном отправляемой информации

После создания HTML шаблона формы переходим к созданию шаблона, определяющего внешний вид информации, которая будет приходить на почтовый ящик.

Создаем чанк «report-tpl» и в его содержимое помещаем следующий код:

<p>Это сообщение было отправлено посетителем по имени [+name+] с помощью формы обратной связи. </p>
<table>
<tr valign="top"><td><b>Имя:</b></td><td>[+name+]</td></tr>
<tr valign="top"><td><b>Email:</b>:</td><td>[+email+]</td></tr>
<tr valign="top"><td><b>Сообщение:</b></td><td>[+comments+]</td></tr>
</table>
<p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>

Если вы обратите внимание, то в этом шаблоне вся введенная пользователем информация передается в с помощью плейсхолдеров вида [+name+]. При этом название каждого плейсхолдера совпадает со значение атрибута «name» соответствующего поля в HTML шаблоне (name="name", name="email" name="comments").

Чанк с текстом, который увидит посетитель после отправки

Создаем чанк «thank-tpl» и в его содержимое помещаем следующий код:

<strong>Спасибо, что воспользовались формой обратной связи на нашем сайте.</strong>
<p>Ваше сообщение будет рассмотрено нашими менеджерами в кратчайшие сроки, и, если оно требует ответа, Вы обязательно его получите.</p>
<p>Отправленная информация:</p>
<ul>
<li><b>Ваше имя:</b> [+name+]</li>
<li><b>Ваш e-mail:</b> [+email+]</li>
<li><b>Текст сообщения:</b> [+comments+]</li>
</ul>

Я также предлагаю вам вынести вызов сниппета eForm в отдельный чанк, для этого создайте чанк с именем, например, «form» и поместите туда конструкцию:

[!eForm? &formid=`contact-form` &tpl=`form-tpl`&to=`info@site.ru,support@site.ru,requests@site.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]

В итоге у нас должно получиться 4 чанка, которые вы для удобства можете объединить в одну категорию «Форма обратной связи»: 

  • «form-tpl» — шаблон формы обратной связи 
  • «report-tpl» — шаблон отсылаемой на e-mail информации
  • «thank-tpl» — шаблон информации, отображаемой после отправки
  • «form» — вызов сниппета eForm

На рисунке ниже показано, как должны выглядеть созданные чанки для формы обратной связи.

4 созданных чанка для формы обратной связи

Следующим шагом является вызов сниппета на странице «Контактная информация», для этого в поле «Содержимое ресурса» помещаем конструкцию вызова сниппета:

{{form}}

Ниже на рисунке показано, как должен выглядеть вызов сниппета eForm при условии, что этот вызов вы вынесли в отдельный чанк с именем form.

Вызов сниппета на странице

После этого можете посмотреть, что получилось, зайдя на страницу «Контактная информация». Если вы все сделали правильно, то на странице появится форма, которая будет выглядеть приблизительно вот так:

Внешний вид формы обратной связи

При попытке отправить незаполненную форму сниппет укажет вам на ошибки в заполнении:

Ошибки заполнения формы eForm

Если же вы верно заполните поля, после отправки сообщения отобразится информация, хранящаяся в чанке «thank-tpl»:

Отправка сообщения прошла успешно

Отправленное с помощью формы обратной связи сообщение придет на один из трех электронных адресов, в зависимости от того, какой пункт отправитель выберет в поле «Тема сообщения».

Если вы работаете на локальном компьютере (например с Denwer'ом), то проверить, доходят ли отправляемые письма, вы сможете в папке z:\tmp\!sendmail\. В эту директорию будут отсылаться письма, отправленные с помощью почтовых скриптов на локальном компьютере. Имя письма будет сформировано из даты отправления.

Доставленное на e-mail письмо

Как мы видим, письмо отлично дошло до получателя и внешний вид письма определяется шаблоном, который мы храним в чанке «report-tpl».

Внешний вид формы легко можно подкорректировать с помощью CSS по вашему желанию, в нашем шаблоне все стили, отвечающие за внешний вид форм лежат в файле assets/templates/site/styles/forms.css. Давайте в CSS сделаем все поля одинаковыми и изменим стиль вывода сообщения об ошибках заполнения. Для этого отправляемся редактировать файл assets/templates/site/styles/forms.css

Находим в этом файле следующий код:

/* ---------------Forms in Content Area-----------------*/

#container #respond{display: block; width:100%;}
#container #respond input{width:170px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0;}
#container #respond textarea{width:98%; border:1px solid #CCCCCC; padding:2px; overflow:auto;}
#container #respond p{margin:5px 0;}
#container #respond #submit, #container #respond #reset{
	margin:0;
	padding:5px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	cursor:pointer;
	}

и заменяем его на этот

/* ---------------Forms in Content Area-----------------*/

#container #respond{display: block; width:100%;}
#container #respond input{width:300px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0; }
#container #respond select{width:307px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0; }
#container #respond textarea{width:300px; border:1px solid #CCCCCC; padding:2px; overflow:auto;}	
#container #respond p{margin:5px 0;}
#container #respond #submit{
	width:148px;	
	margin:0;
	padding:5px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	cursor:pointer;
	}
#container #respond .vericodeform { width:142px;} 
.errors {background:#ffcece; border: 1px solid #cc4e4e; padding:5px; width:300px; }

После этого форма примет следующий внешний вид

Итоговый вид формы

Выглядит вполне симпатично. Если вам необходимо добавить другие поля или расположить уже имеющиеся как-нибудь по-другому, вы с легкостью сможете это сделать путем редактирования созданных чанков. Стилевое оформление также просто можно изменить в CSS файле.

На странице «Контактная информация» вы, помимо вызова формы, можете размещать любую необходимую информацию. Можно разделить эту страницу, например, на две части, в одной из которых будет форма обратной связи, а в другой — контактная информация и карта проезда. В общем, решать вам, в оформлении ваших страниц никто вас ограничивать не будет.

Кстати: чтобы текст на картинке в форме обратной связи генерировался из необходимых вам слов, необходимо их задать на странице системной конфигурации: Инструменты → Конфигурация → вкладка Пользователи → поле «Слова для генерации CAPTCHA-кодов».

Изменяем слова, которые используются для генерации капчи

На этом урок по созданию формы обратной связи на MODx можно считать завершенным. Ну и напоследок предлагаю вам список созданных чанков и измененных файлов за время урока.

Созданные чанки и измененные во время урока файлы:

  • «form-tpl» — шаблон формы обратной связи
  • «report-tpl» — шаблон отсылаемой на e-mail информации
  • «thank-tpl» — шаблон информации, отображаемой после отправки
  • «form» — вызов сниппета eForm
  • «forms.css» — css файл со стилями для форм

Процесс создания формы на MODx с помощью сниппета eForm вы можете посмотреть в видео к данному уроку.

Видео урок: Форма обратной связи на MODx. Сниппет eForm

Автор: Ефимов Виктор

Внимание: чтобы узнавать первым о появлении нового урока по MODx подпишитесь на рассылку. В этом случае анонс новых записей в блоге будет приходить к вам на е-мейл. Никакого спама.

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

26.09.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus