Открываем FancyBox 3 после отправки сообщений Contact Form 7

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

// Открываем FancyBox 3 после отправки сообщений
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 );
document.addEventListener( 'wpcf7spam', function( event ) {
$.fancybox.open('<div class="popup invalid animated-modal"><h2>Возникла ошибка!</h2><p>Одно или несколько полей содержат ошибочные данные. Пожалуйста, проверьте их и попробуйте ещё раз.</p></div>');
}, false );
}); 
</script>
<?php
}

Это DOM events ContactForm 7


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

/* Styles for animated modal */
.animated-modal {
	overflow: hidden;
	transform: translateY(-80px);
	transition: all .5s; /* Should match `data-animation-duration` parameter */
}
.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;
}
/* Final state */
.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;
}
/* Reveal content with different delays */
.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;
}