Задача: Показать сообщение пользователю об успехе, спаме или некорректной отправке сообщения во всплывающем окне 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/
Например, если вы хотите вывести сообщение в случае, если система распознала отправляемое сообщение как спам, то нужно добавить следующий код в JavaScript:
document.addEventListener( 'wpcf7spam', function( event ) { $.fancybox.open('<div class="popup invalid animated-modal"><h2>Спам!</h2><p>Система определила отправляемое вами сообщение как спам. Повторите попытку, либо попробуйте позже.</p></div>'); }, false );
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; }
Большое спасибо за решение. Сидел до 4х утра, искал варианты. Один плагин на весь WP, да и тот глючный
Отличное решение! Рабочее! Благодарю