html MODX Revolution +FormItПроcтаяформаобратнойсвязина

Posted 2021-05-11

Проcтая форма обратной связи на MODx Revolution + FormIt

Для быстро создать форму обратной связи на сайте с использованием системы управления MODx Revolution и дополнения FormIt следует:

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

Внимание! Нужно исправить email в параметре &emailTo=`[e-mail]`. Все остальное можно оставить без изменений.

<h2>Форма обратной связи</h2>

[[!FormIt?
   &hooks=`spam,email,redirect`
   &emailTpl=`email_tpl`
   &emailTo=`[e-mail]`
   &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;
}

Ссылки по теме:

    Пример применения на реальном сайте
    Террасная доска Киев
    Разработка интернет-магазинов и корпоративных сайтов на MODx