Contact Form 7 во всплывающем окне — PopUp форма обратной связи для WordPress

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();

в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.