Сайт-визитка на MODX Evolution. Часть 11: контактная форма

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

Контактная форма для MODX Evolution - сниппет eForm

1. В дереве документов MODX Evolution откройте ресурс Контакты. На вкладке «Настройка страницы» снимите флажок напротив «Использовать HTML-редактор». В поле «Содержимое ресурса» на вкладке «Общие» вставьте вызов сниппета eForm со следующими входными параметрами:

[[eForm? 
&formid=`contact-form` 
&tpl=`contact-form`
&to=`red-book-cms@yandex.ru` 
&report=`contact-submit-message` 
&thankyou=`contact-report-message` 
&vericode=`1`
]]

Вот их расшифровка:

  • formid — идентификатор формы;
  • tpl — имя чанка контактной формы;
  • to — ящик-электронной почты на который будут отправляться письма;
  • report — сообщение о результате отправки письма через контактную форму;
  • thankyou — шаблон письма, отправленного с контактной формы;
  • vericode — использовать капчу (1) или нет (0).

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

[+validationmessage+]
<form id="contact-form" method="post" action="[~[*id*]~]">
    <input type="hidden" name="formid" value="contact-form" />
    <br />
    <label for="name">Ваше имя:</label><br />
    <input type="text" id="name" name="name" eform="Ваше имя::1" />
    <br />
    <label for="email">Электронная почта:</label><br />
    <input type="text" id="email" name="email" eform="Email:email:1" />
    <br />
    <label for="message">Ваше сообщение:</label><br />
    <textarea id="message" cols="20" rows="3" name="comments" eform="Сообщение:html:1"></textarea>
    <br />
    <label for="vericode">Введите код с изображения:</label><br />
    <p><img src="[+verimageurl+]" alt="Проверочный код" /></p>
    <input type="text" id="vericode" name="vericode" />
    <br />
    <button type="submit" name="submit" id="submit">Отправить</button>
</form>
  • [+validationmessage+] — выведет сообщение о результате отправки письма;
  • [~[*id*]~] — синоним / урл текущей web-страницы;
  • [+verimageurl+] — капча.

Конструкции вида eform="Ваше имя::1" обозначают привязку к eForm-полям.

Просмотреть

3. Чанк contact-report-message:

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

Чанки и плейсхолдеры eForm MODX Evolution

И вновь пройдемся по назначению плейсхолдеров:

  • [+name+] — поле имени / никнейма отправителя;
  • [+email+] — поле email, эл. почты;
  • [+comments+]  — поле текста сообщения.
Просмотреть

4. Чанк contact-submit-message:

<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>

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

Вот собственно и все, контактная форма готова! Сайт-визитка на MODX Evolution успешно собран!

Просмотреть

Контактная форма MODX Evolution eForm

Опубликовано 27-01-2014 в 10:49


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты