Как убрать после отправки форму Ajax Formit

07.04.2018
3842 просмотра

Возникла необходимость сделать форму обратной связи на Modx через связку Ajax + Formit, с валидацией полей, так чтобы после отправки форма обратной связи исчезла, а на её месте появилось сообщение об успешной отправке.

Готового решения не нашел, погуглив скомпилировал рабочее, на базе Bootsrap 4.

Для вывода формы используем пакеты Formit и AjaxForm. На месте вывода формы вставляем код вызова:

[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.example`
&hooks=`email`
&emailTpl=`tpl.Email`
&emailSubject=``
&emailTo=``
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено.`
&validate=`name:required:minLength=^3^,
email:email:required,
message:required:stripTags`]

После вызова Ajax вставляем код скрипта (для корректной отработки скрипта требуется подключение JQuery до вызова, как вариант — внутри тега HEAD):

<script>
$(document).on('af_complete', function(event, response) {
var form = response.form;
if (response.success) {
response.form.hide();
$('#success-response').removeClass('d-none');
}
});
</script>

Сообщение в случае успешной отправки:

<div id="success-response" class="alert alert-info d-none">
<p>Спасибо за обращение, сообщение отправлено.</p>
</div>

Пояснения:

Класс d-none, используется в Bootstrap-4 для скрытия DIV. Скрипт срабатывает на событие AjaxForm, проверяет ответ, и в случае успеха убирает форму вызова, и так же убирает у блока (div) с ID="success-response" класс d-none, оставляя остальные бутстраповские классы — alert alert-info.

Вместо ID="success-response" можно использовать своё имя, главное чтобы в скрипте и в div id они совпадали.

Чанк tpl.AjaxForm.example автоматически создаётся при установке пакета AjaxForm и содержит все необходимые поля. Можно на его основе сделать свой чанк и указать его в поле &form

Сообщение об успешной отправке с id="success-response" надо добавить в конце содержимого чанка tpl.AjaxForm.example

Сообщения из полей &validationErrorMessage и &successMessage будут появляться в модальном окне, не зависимо от сообщения с id="success-response".

Чанк tpl.Email надо создать самостоятельно. Базовое содержимое:

<p>Имя: </p>
<p>Email: </p>
<p>Сообщение: </p>

В поле &emailTo вписать адрес email на который отправлять, в поле &emailSubject — тему письма.

Оставьте комментарий
danil
19 октября 2018, 23:20

спасибо за вариант решения

Павел
16 мая 2019, 15:30

Добрый день. У меня что то совсем не выходит всплывающее окно после отправки. Форма очищается, письмо успешно приходит. Сайт на bootstrap4 может поэтому? На 3 все работает нормально, или я где то что то упустил…

[[!AjaxForm?
   &frontend_css=``
   &snippet=`Formit`
   &hooks=`recaptchav2,spam,email,emailUser`
   &customValidators=`formit2checkfiles`
   &form=`tpl.forma-pochta`
   &emailTpl=`tpl.email-forma-pochta`
   &emailFrom=`info@`
   &emailTo=`@yandex.ru`
   &emailSubject=`сообщение с сайта [[++site_url]]`
   &emailFromName=`[[+name]]`
   &validate=`email:required, name:required,files:formit2checkfiles,g-recaptcha-response:required`
   &validationErrorMessage=`Пожалуйста, заполните поля*`
   &successMessage=`ВАШЕ СООБЩЕНИЕ ОТПРАВЛЕНО. СПАСИБО!`]]

Artem Makarov aka Robin
16 мая 2019, 17:15

Надо сделать всё как в примере, а потом уже вносить изменения и отслеживать, на каком этапе «сломается».