Стилизация всплывающих сообщений в AjaxForm

После создания формы обратной связи Ajaxform для MoDx(отправляющего заявки без перезагрузки страницы) нужно изменить внешний вид и положение подтверждения об отправленной заявке. По умолчанию это окно всплывает в правом верхнем углу браузера, и зачастую посетитель просто не видит этого уведомления.

Стандартный метод по изменению дизайна всплывающего окна AjaxForm

По документации AjaxForm для стилизации jGrowl окон (которые используются для отображения уведомлений) можно указать свои css и js файлы через параметры сниппета AjaxForm, это параметры:

• frontend_css (по умолчанию файл лежит по пути assets/components/ajaxform/css/default.css)
• frontend_js (по умолчанию файл лежит по пути assets/components/ajaxform/js/default.js)

Недостатки этих методов в том, что придется делать копии стандартных файлов, и модифицировать их код. А при обновлении плагина код ajaxform/js/default.js может измениться.

1. Свой способ изменения дизайна:

Для начала для popup-окна зададим свойство sticky=true (чтобы окно не пропадало без явного нажатия на кнопку закрытия) и укажем класс темы для уведомления, чтобы было удобнее стилизовать внешний вид виджета jGrowl:

< script >
// customize AjaxForm
$(document).ready(function(){
    AjaxForm.Message.success = 
    function(message, sticky) {
        if (message) {
            $.jGrowl(message, {theme: 'taleby-message-success', sticky: true});
        }
    }; 
});
< /script >

2. Изменение дизайна окна AjaxForm через переопределение CSS:

Переписываем стандартные стили в своем файле. Файл с переопределенными стилями лучше всего подключать последним в списке css.

< stile >
#jGrowl { 
    margin:0px 12px 0; 
}
.jGrowl.center { 
    top:45% !important;
    width:30% !important; 
    left:35% !important; 
}
#jGrowl .jGrowl-notification {
    position: relative;
    width: 350px;
    font-size: 150%;
    margin: 19px auto;
    padding: 9px;
    background: none repeat 0 0 green !important;
    box-shadow: 0 0 0 7px #efd335 !important;
    border: 0px solid rgba(255, 255, 255, 0.49) !important;
    border-radius: 0 !important;
}
#jGrowl .jGrowl-notification .jGrowl-close {
    position: absolute;
    right: 4px;
    top: 4px;
    color: #fff !important;
}
#jGrowl .jGrowl-notification .jGrowl-message {
    color: #fff !important;
    font-size: 119%;
    line-height: 109%;
}
#jGrowl .jGrowl-closer {
    margin: 0 auto;
    font-size: 119%;
    line-height: 100%;
}
#jGrowl .office-message-success {
    background-color: green !important;
}
#jGrowl .ms2-message-success {
    background-color: green !important;
}
< /stile > 

3. Исчезающая форма после отправки сообщений Ajax + Formit

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

Здесь описывается готовое рабочее решение на базе Bootsrap 4. 
Для вывода формы используем пакеты Formit и AjaxForm. На месте вывода формы вставляем код вызова:

[ !AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.example`
&hooks=`email`
&emailTpl=`tpl.Email`
&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".

 

4. По нажатию крестика закрываем весь DIV #jGrowl

После того как сообщение «Об успешной отправке» показывается поверх сайта, а потом исчезает (или вы выключаете его крестиком) — при это сам DIV с ID «jGrowl» остается перекрывать весь сайт.

Нужно было наложить затемненный background именно на этот див (чтобы затемнение было на весь экран). Вследствие этого файл /assets/components/ajaxform/js/default.js был переписан с новыми условиями. 

Скачать готовый файл Default.js для AjaxForm.