Contact Form 7 во всплывающем окне — казалось бы, такая незаменимая вещь, как всплывающие формы обратной связи должны уже идти в коробке с любой CMS… Но нет… до сих пор приходится ставить несколько плагинов чтобы заиметь данный функционал на своем сайте. Итак, начнем!
Нужный нам плагин Easy FancyBox.
Заходим в Настройки -> Медиафайлы.
Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.
Если стоит сторонний плагин лайтбокса, лучше эту галку снять, так как они будут конфликтовать и ваши изображения будут открываться во всплывающем окне дважды
Ставим галку на пункт«Inline content»
И теперь нажимаем на кнопку «Сохранить изменения».
Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):
<div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?> </div> </div>
Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:
Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:
<div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form-7 404 "Not Found"] </div> </div>
Код кнопки, открывающей попап:
<a href="#contact_form_pop" class="fancybox-inline">Заказать звонок</a>
Возникла странная проблема с относительными ссылками в хэдере. К ссылке на активацию формы упорно приписывался адрес главной страницы…
Победил это добавив пробел перед решеткой.
Закрытие popup окна с формой обратной связи после успешной отправки
Добавляем такой код
on_sent_ok: $.fancybox.close();
в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.