[Modx Evo] Создание он-лайн формы, обратная связь eForm ModX
Создадим простую форму обратной связи с проверкой валидности e-mail и всеми обязательными полями. Так же добавим капчу. Слова капчи можно редактировать в меню Modx. Инструмент - Конфигурация - Пользователи.
1. В самом начале необходимо создать новый чанк с именем zayvka. (Элементы - Управление элементами - Чанки - Новый чанк)
Описание: основной чанк он лайн формы, вставить в шаблон
Код чанка (HTML):
[!eForm? &formid=`form1` &tpl=`form-tpl`&to=`admin@mail.ru` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с сайта modx-studio.ru`!]
Здесь необходимо вставить свою почту (вместо admin@mail.ru), куда будет приходить информация из формы обратной связи. &vericode=`1` - если поставить 0, то капчи не будет. И изменить заголовок письма (Сообщение с сайта modx-studio.ru)
Сохраняем, выходим.
2. Далее создаем новый чанк, называем form-tpl и заполняем так:
<div id="contact_form">
[+validationmessage+]
<form method="post" action="[~10~]" name="myform">
<input type="hidden" name="formid" value="form1" />
<label for="author">Ваше имя</label> <input type="text" id="author" name="author" class="required input_field" eform="Имя::1" />
<label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field" eform="Адрес электронной почты:email:1" />
<label for="text">Текст сообщения</label> <textarea id="text" name="text" rows="0" cols="0" class="required" eform="Текст сообщения:html:0"></textarea>
<p>Введите этот код:
<img src="[+verimageurl+]" alt="Код проверки" border="0"/>
<input type="text" class="vericodeform input_field" name="vericode" />
<input type="submit" class="submit_btn" name="submit" id="submit" value=" Отправить " />
<input type="reset" class="submit_btn" name="reset" id="reset" value=" Сбросить " />
</form>
</div>
Здесь меняем внешний вид, стили, можно так же добавить дополнительные окна и изменить текст около окон. Вместо [~10~] вставляем ID страницы на которой расположена форма.
3. Важный чанк ответа report-tpl:
Это сообщение было отправлено посетителем по имени [+author+] с помощью формы обратной связи. </p> <table>
<tr valign="top"><td><b>Имя:</b></td><td>[+author+]</td></tr>
<tr valign="top"><td><b>Email:</b>:</td><td>[+email+]</td></tr>
<tr valign="top"><td><b>Сообщение:</b></td><td>[+text+]</td></tr>
</table>
<p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>
Если в прошлом пункте добавили поля, то следует их добавить и сюда.
4. И последний чанк называем thank-tpl, вот его содержимое:
<strong>Ваше сообщение отправлено!</strong> <p>Мы рассмотрим его в ближайшее время</p>
<p>Отправленная информация:</p>
<ul>
<li><b>Ваше имя:</b> [+author+]</li>
<li><b>Ваш e-mail:</b> [+email+]</li>
<li><b>Текст сообщения:</b> [+text+]</li>
</ul>
Здесь урок, который поможет прикрепить файл к форме обратной связи
Здесь урок, который поможет создать форму в модальном окне (всплывающее окно)
Отправить файл клиенту, после отправки формы связи
Другой вариант формы в модальном окне