Contact Form 7 + FancyBox3

Задача: Показать сообщение пользователю об успехе или некорректной отправки сообщения во всплывающем окне Fancybox3.

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

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

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

Добавляем в 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 );
}); 
</script>
<?php
}

Это DOM события ContactForm 7 – https://contactform7.com/dom-events/

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;
}