Долгое время я скрывал стандартные текстовые подсказки 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;
}