AjaxForm - Отправка форм через ajax

Спонсор блога Магазин детской одежды Dress


Cниппет для отправки любых форм через ajax. По умолчанию рассчитан на работу с FormIt, но можно использовать и собственный сниппет.

1. Создаем чанк "callBack" (ну или любой другой, по смыслу)
2. Добавляем форму в чанк
3. вызываем сниппет [[!AjaxForm?form=`myForm`&snippet=`FormIt`]]

Параметры сниппета:

&form - чанк с формой ( по умолчанию - tpl.AjaxForm.example)
&snippet - сниппет для обработки формы (FormIt)
&frontend_css - Стили оформления формы и полей с ошибками ([[+assetsUrl]]css/default.css)
&frontend_js - Javascript для отправки формы через ajax ([[+assetsUrl]]js/default.js)
&actionUrl - Адрес коннектора, на который отправляется форма ([[+assetsUrl]]action.php)

Пример вызова сниппета:

[[!AjaxForm?form=`callBack`
&snippet=`FormIt` 
&hooks=`email` 
&emailTo=`myemail@gmail.com`
&submitVar=`callBackMes`
&emailTpl=`callBackMes`
&emailSubject=`Обратный звонок с сайта xiaomi-mi.ru`
&validate=`name:required,phone:required`
&validationErrorMessage=`Пожалуйста, заполните поля корректно`
&successMessage=`Ваше сообщение отправлено, в ближайшее время мы свяжемся с Вами`
]]

Пример чанка callBack:

<div class="popup" id="call">
<div class="close_order popup_close"></div>
<form id="callback_form" action="" method="post" class="ajax_form">
<input type="hidden" name="callBackMes" value="1">
<div class="input">
<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Ваше Имя" required>
<span class="error_name">[[+fi.error.name]]</span>
</div>
<div class="input">
<input type="tel" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш Телефон">
<span class="error_phone">[[+fi.error.phone]]</span>
</div>
<input type="submit" value="Отправить">
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
</form>
</div>

Пример чанка callBackMes (отвечает за формат письма) E-mail

<h3>Сообщение с сайта xiaomi-mi.ru Форма обратного звонка</h3>
<p>Имя: [[+name]]</p>

<p>Телефон: [[+phone]]</p>

Если необходимо после отправки формы скрыть всплывающее окно:

$(document).on('af_complete', function(event, response) {
var form = response.form;
// Если у формы определённый id
if (form.attr('id') == 'callback_form') {
$('#call .close_order').click(); // кнопка закрытия всплывающего окна
}

});

PS при работе с этим сниппетом ajaxForm столкнулся с проблемой,что письмо не приходит на email, хотя выскакивает оповещение, что сообщение отправлено. А причина была вот в чем: в файле документации 
\core\components\ajaxform\docs\readme.txt
Ошибка в вызове сниппета:

You can specify any parameters for end snippet:
[[!AjaxForm?
&form=`myForm`
&snippet=`FormIt`
&hooks=`email`
&emailto=`info@mysite.com`
&etc=`...`

]]

строка &emailto=`info@mysite.com` регистрозависима. Нужно 
&emailTo=`info@mysite.com` тогда все работает как нужно.







Документация на сайте разработчика