Всплывающие окна FancyBox 3 при отправке данных из Contact Form 7

Долгое время я скрывал стандартные текстовые подсказки ContactForm 7 через CSS, т.к. они визуально портили форму, после нажатия кнопки «Отправить». Я думал, что было бы неплохо выводить эти сообщения во всплывающем окне, но не находил решений с интеграцией FancyBox3. Теперь решение нашлось, чем собственно и делюсь с Вами.

Визуально работа всплывающих окон выглядит так:

Думаю не стоит говорить, что плагины ContactForm 7 и FancyBox3 перед добавлением указанного ниже кода уже должны быть установлены на сайте. Начнём.

Добавляем в functions.php шаблона:

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
document.addEventListener( 'wpcf7mailsent', function( event ) {
$.fancybox.open('<div class="popup ok-send animated-modal"><h2>Сообщение отправлено!</h2><p>Спасибо за Ваше сообщение. Оно успешно отправлено!</p></div>');
}, false );
document.addEventListener( 'wpcf7invalid', function( event ) {
$.fancybox.open('<div class="popup invalid animated-modal"><h2>Возникла ошибка!</h2><p>Одно или несколько полей содержат ошибочные данные. Пожалуйста, проверьте их и попробуйте ещё раз.</p></div>');
}, false );
}); 
</script>
<?php
}

Это DOM события ContactForm 7 — https://contactform7.com/dom-events/ Например, если вы хотите вывести сообщение в случае, если система распознала отправляемое сообщение как спам, то нужно добавить следующий код в JavaScript:

document.addEventListener( ‘wpcf7spam’, function( event ) { $.fancybox.open(‘<div class=»popup invalid animated-modal»><h2>Спам!</h2><p>Система определила отправляемое вами сообщение как спам. Повторите попытку, либо попробуйте позже.</p></div>’); }, false );

CSS для эффектов появления Popup:

.animated-modal {
	overflow: hidden;
	transform: translateY(-80px);
	transition: all .5s;
}
.popup.invalid.animated-modal {
	background: linear-gradient(45deg, #9c2f3f 32%, #fb134c 100%);
}
.popup.ok-send.animated-modal {
	background: linear-gradient(45deg, #2f8c3a 32%, #13fb6c 100%);
}
.popup.ok-send.animated-modal .fancybox-close-small:after, .popup.invalid.animated-modal .fancybox-close-small:after {
	color: #FFF;
}
.popup.ok-send.animated-modal .fancybox-close-small:hover:after, .popup.invalid.animated-modal .fancybox-close-small:hover:after {
	color: #020202;
	background: #fff;
}
.ok-send.animated-modal *, .invalid.animated-modal * {
	color: #fff;
}
.animated-modal h2, .animated-modal p {
	transform: translateY(-40px);
	opacity: 0;
	transition-property: transform, opacity;
	transition-duration: .3s;
}
.fancybox-slide--current .animated-modal, .fancybox-slide--current .animated-modal h2, .fancybox-slide--current .animated-modal p {
	transform: translateY(0);
	opacity: 1;
	transition-duration: .3s;
}
.fancybox-slide--current .animated-modal h2 {
	transition-delay: .1s;
}
.fancybox-slide--current .animated-modal p {
	transition-delay: .4s;
}
.fancybox-slide--current .animated-modal p:first-of-type {
	transition-delay: .2s;
}