null

Contact form 7 — Событие после успешной и не успешной отправки + экспорт Popups + jquery сценарии

Достаточно плотно работая с легендарными плагинами Contact Form 7 и Popups у меня возник вполне очевидный вопрос “-Как сделать оповещение в виде попап окна после отправке формы?”.

Методом проб и ошибок все таки удалось отобразить попап окна которые сами открываются (и закрываются тоже самостоятельно — конечно же благодаря jQuery) после того как пользователь нажал на кнопку отправки формы.

Если пользователь верно заполнил все данные и форма была отправлена успешно, будет отображен данный попап, который исчезнет через пять с половиной секунд:

Contact form 7 - Событие после успешной и не успешной отправки + экспорт Popups + jquery сценарии

Если пользователь ввел не верно данные, или форма и вовсе не была заполнена, пользователь увидит данное окно, которое тоже закроется через 5.5 секунд:

Contact form 7 - Событие после успешной и не успешной отправки + экспорт Popups + jquery сценарии

Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом jQuery скрипте (который находится ниже).

На скринах с попап окнами отображен текст на украинском языке, не пугайтесь тект в экспорте Popups на руссском.

Скачать экспорт Popups окон:

UK+RUS Popups ok+error

После импорта Popups не забудьте заменить путь к изображениям “http://test.jasochka.sumy.ua/wp-content/uploads/2018/01/” на свой. Изображения которые я использовал в попап окнах вот:

like-300×273 warning-300×273

Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и PSD который придет Вам на помощь:

warning_AND_ok

Так же после импорта, пропишите данные стили ниже (так как 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 - ОШИБКА ЗАПОЛНЕНИЯ + УСПЕШНОЕ ЗАПОЛНЕНИЕ ФОРМ