Достаточно плотно работая с легендарными плагинами Contact Form 7 и Popups у меня возник вполне очевидный вопрос “-Как сделать оповещение в виде попап окна после отправке формы?”.
Методом проб и ошибок все таки удалось отобразить попап окна которые сами открываются (и закрываются тоже самостоятельно — конечно же благодаря jQuery) после того как пользователь нажал на кнопку отправки формы.
Если пользователь верно заполнил все данные и форма была отправлена успешно, будет отображен данный попап, который исчезнет через пять с половиной секунд:
Если пользователь ввел не верно данные, или форма и вовсе не была заполнена, пользователь увидит данное окно, которое тоже закроется через 5.5 секунд:
Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом jQuery скрипте (который находится ниже).
На скринах с попап окнами отображен текст на украинском языке, не пугайтесь тект в экспорте Popups на руссском.
Скачать экспорт Popups окон:
После импорта Popups не забудьте заменить путь к изображениям “http://test.jasochka.sumy.ua/wp-content/uploads/2018/01/” на свой. Изображения которые я использовал в попап окнах вот:
Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и PSD который придет Вам на помощь:
Так же после импорта, пропишите данные стили ниже (так как WordPress не включает CSS Popups в файл экспорта).
Стили для окна popups УСПЕШНОЙ ОТПРАВКИ:
/*
* Add custom CSS for this popup
* Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
*/
/*#spu-bg-1068 {
opacity: 0.6;
background-color: rgb(92, 162, 10);
z-index: 999999;
}*/
div#spu-bg-1068 {
opacity: 0.6;
background-color: green;
z-index: 9999999;
}
div#spu-1068 {
z-index: 99999999;
}
Стили для окна popups НЕ УСПЕШНОЙ ОТПРАВКИ:
/*
* Add custom CSS for this popup
* Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
*/
/*#spu-bg-1065 {
opacity: 0.6;
background-color: #F44336;
z-index: 999999;
}*/
div#spu-bg-1065 {
opacity: 0.6;
background-color: #F44336;
z-index: 9999999;
}
div#spu-1065 {
z-index: 99999999;
}
jQuery код отвечающий за появление и исчезание попап окон при успешной или не успешной отправке формы:
//START Contact Form 7 + Popups - ОШИБКА ЗАПОЛНЕНИЯ + УСПЕШНОЕ ЗАПОЛНЕНИЕ ФОРМ
/*Попап окно если форма не верно заполнена*/
jQuery(document).ready(function($) {
$(".wpcf7").on('wpcf7:invalid', function(event){
// Your code here
//alert('ERROR');
SPU.show(1065);
//Скрытие поп окна автоматически, через 5,5 секeнд
setTimeout(function(){$('div#spu-1065,div#spu-bg-1065').fadeOut(600, 'swing', function(){
//
});},5500); //5500 = 5,5 секунды
});
});
/*Попап окно если форма заполнена верно и письмо успешно отправлено*/
jQuery(document).ready(function($) {
$(".wpcf7").on('wpcf7:mailsent', function(event){
//alert('GOOD');
SPU.show(1068);
//Скрытие поп окна автоматически, через 5,5 секнд
setTimeout(function(){$('div#spu-1068,div#spu-bg-1068').fadeOut(600, 'swing', function(){
//
});},3500); //3500 = 3,5 секунды
});
});
//END Contact Form 7 + Popups - ОШИБКА ЗАПОЛНЕНИЯ + УСПЕШНОЕ ЗАПОЛНЕНИЕ ФОРМ
Источник записи: https://mediadoma.com