Проcтая форма обратной связи на MODx Revolution + FormIt
Cоздать форму обратной связи на сайте с использованием системы управления MODx Revolution и дополнения FormIt следует:
Создать ресурс и вставить туда следующий код, который выводит основные поля и обработчик формы. В данном случае все поля обязательные для заполнения.
<h2>Форма обратной связи</h2>
[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`email_tpl`
&emailTo=`v.kamuz@gmail.com`
&emailSubject=`Письмо с сайта [[++site_url]]`
&redirectTo=`25`
&validate=`name:required,email:email:required,text:required:stripTags,phone:required`
]]
[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post" class="form">
<input type="hidden" name="nospam:blank" value="" />
<label for="name">Ваше имя <span class="required">*</span>:</label>
<span class="error">[[!+fi.error.name]]</span>
<input type="text" name="name" id="name" value="[[!+fi.name]]" />
<label for="email">Телефон <span class="required">*</span>:</label>
<span class="error">[[!+fi.error.phone]]</span>
<input type="text" name="phone" id="phone" value="[[!+fi.phone]]" />
<label for="email">Email <span class="required">*</span>:</label>
<span class="error">[[!+fi.error.email]]</span>
<input type="text" name="email" id="email" value="[[!+fi.email]]" />
<label for="text">Сообщение <span class="required">*</span>:</label>
<span class="error">[[!+fi.error.text]]</span>
<textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
<input class="submit_button" type="submit" value="Отправить" />
</form>
Создать ещё один ресурс, куда будет происходить редирект после успешной отправки формы. Не забываем изменить значение параметра &redirectTo=`25` в месте вызова сниппета FormIt (код выше), куда следует передать корректный ID ресурса. В содержимое ресурса можно написать всё что угодно, например:
<p>Благодарим за обращение!</p>
Осталось создать шаблон, который будет будет выводить информацию в письмо, тоесть нужно создать чанк с названием email_tpl, который передаёться в качестве параметра &emailTpl=`email_tpl` во время вызова сниппета FormIt:
<p>От кого: [[+name]]</p>
<p>Телефон: [[+phone]]</p>
<p>E-mail: [[+email]]</p>
<p>Сообщение: [[+text]]</p>
Можно добавить несколько правил CSS чтобы наша форма приобрела более привлекательный вид.
input, label, textarea{
display: block;
}
input, textarea{
margin: 0 0 10px 0;
border: 1px solid #ccc;
padding: 5px;
}
input.submit_button{
background-color: #43A52B;
border: 1px solid #358222;
padding: 5px 10px;
border-radius: 3px;
font: 13px Arial, Verdana, Tahoma, sans-serif;
color: #fff;
cursor: pointer;
}
input.submit_button:hover{
background-color: #358222;
}
span.required,
span.error{
color: #ff0000;
}
span.required{
font-size: 18px;
}
span.error{
font-size: 11px;
}