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

Возникла необходимость сделать форму обратной связи на 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 — тему письма.