null

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

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

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

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

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

Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом 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 УСПЕШНОЙ ОТПРАВКИ:

Стили для окна popups НЕ УСПЕШНОЙ ОТПРАВКИ:

jQuery код отвечающий за появление и исчезание попап окон при успешной или не успешной отправке формы:

Contact form 7 – Событие после успешной и не успешной отправки + экспорт Popups + jquery сценарии
5 (100%)
Всего проголосовало: 1