Как создать форму обратной связи с помощью сниппета eForm MODx Evo

В данной статье приведены примеры форм обратной связи для MODx Evo средствами сниппета eForm.

Пример 1. Обычная форма обратной связи средствами сниппета eForm

Такую форму можно создать по следующему шаблону.

На страницу с формой пишем чанк {{form}} 

Создаем чанк {{form}} – вызов сниппета eForm (не забываем вписать электронный адрес, куда будет отправляться письмо, или несколько адресов через запятую без пробелов)

[!eForm? &formid=`contact-form` &tpl=`form-tpl`&to=`эл.адрес_1,эл адрес_2` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с сайта «Название сайта»`!


Создаем чанк form-tpl – шаблон формы обратной связи

<div id="respond" style="width:50%; margin:0 auto">
[+validationmessage+]
<form method="post" action="[~[*id*]~]" id="contact-form">
<input type="hidden" name="formid" value="contact-form" />
<p><br /><label accesskey="n" for="name">Ваше имя<font color="red">*</font></label><br/>
<input type="text" name="name" size="40" maxlength="60" eform="Имя::1" /></p>
<p><label accesskey="e" for="email">Электронная почта<font color="red">*</font></label><br/>
<input type="text" name="email" size="40" maxlength="40" eform="Адрес электронной почты:email:1" /></p> 
<p><label accesskey="c" for="comments">Оставьте свой отзыв<font color="red">*</font></label><br/>
<textarea cols="40" rows="10" name="comments" eform="Текст сообщения:html:1" ></textarea></p>
<p>Введите этот код:<font color="red">*</font><br />
<img src="[+verimageurl+]" alt="Код проверки" border="1"/><br />
<input type="text" class="vericodeform" name="vericode" /></p>
<p><input type="submit" name="submit" id="submit"  value="Отправить"></p>
</form>
</div>

 

Создаем чанк 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>

 

Создаем чанк thank-tpl – текст, который увидит пользователь после отправки сообщения

<strong>Спасибо за письмо! Мы постараемся ответить в ближайшее время.</strong><br />
<a href="[~[*id*]~]">Вернуться на страницу «Контакты»</a>

Сниппет генерирует таблицу стилей, в которую вносим изменения под свой дизайн.

/* ---------------Стили формы обратной связи-----------------*/
#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;
    }
/* ---------------Стили формы обратной связи-----------------*/


Пример 2. Две формы обратной связи средствами сниппета eForm и с двумя каптчами

1. Создать две формы с кодом, как в примере 1. Имена тех элементов, которые отмечены красным цветом, для второй формы изменить на другие имена.

2. Если используются две каптчи, необходимо внести изменения в код сниппета eForm. Информация взята из источника https://forums.modx.com/thread/57797/eform

Огромное спасибо автору kpoxas за решение проблемы!

Как на одной странице использовать несколько форм со своими капчами?

Вызываю несколько раз сниппет с разными id формы и с разными шаблонами.
Капча работает только в последней форме, а при отправке остальных пишет, что неправильный код подтверждения

Решил проблему

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

Пришлось немного модифицировать код eForm (для версии MODx 1.0.15).
В файле \assets\snippets\eform\eform.inc.php в строчке 188 заменить:

$code = $_SESSION['veriword'] ? $_SESSION['veriword'][$formid] : $_SESSION['eForm.VeriCode'];

заменить на:

$code = $_SESSION['veriword_'.$formid] ? $_SESSION['veriword_'.$formid] : $_SESSION['eForm.VeriCode'];

в строке 637 заменить:

$fields['verimageurl'] = MODX_MANAGER_URL.'includes/veriword.php?rand='.rand();

на

$fields['verimageurl'] = $modx->config['base_url'].'manager/includes/veriword.php?rand='.rand().'&formid='.$formid;

А в файле \manager\includes\veriword.php в строчке 69 заменить:

$_SESSION['veriword'] = $this->word;

на

$_SESSION['veriword_'.$_GET['formid']] = $this->word;


Изменение внешнего вида капчи MODx Evo

http://freelgraf.in.ua/blog/modx-evo/kapcha/
http://e-kao.ru/captcha