TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

4 255

Достаточно плотно работая с легендарными плагинами 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/” на свой. Изображения которые я использовал в попап окнах вот:

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

Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и 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 - ОШИБКА ЗАПОЛНЕНИЯ + УСПЕШНОЕ ЗАПОЛНЕНИЕ ФОРМ

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее