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

Contact Form 7 во всплывающем окне - это легко. Нужно всего лишь установить…

Popup Maker

1. Устанавливаем плагин Popup Maker
2. Создаем форму в Contact Form 7 и копируем ее шорткод
3. В Popup Maker нажимаем “Добавить новое всплывающее окно”
4. В поле редактора вставляем шорткод формы

5. В разделе “Настройки всплывающего окна” нажать “Добавить новый триггер”

6. Добавить нужный триггер (например, на клик по чему угодно с определенным css-классом - “Нажатие Открыть”)
7. Сохраняем получившееся окно
8. В любом месте вставляем ссылку с классом, указанным у только что созданного всплывающего окна.

   1	<a class="popmake-137">Заказать звонок</a>

9. Вы великолепны!

Easy FancyBox - устаревший способ

UPD 2022! Если способ не рабочий - напишите в комментвриях, протестирую и поправлю.

Устанавливаем плагин Easy FancyBox.

Заходим в Настройки -> Медиафайлы.

Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.

Если стоит сторонний плагин лайтбокса, лучше эту галку снять, так как они будут конфликтовать и ваши изображения будут открываться во всплывающем окне дважды.

Ставим галку на пункт «Inline content»

Нажимаем на кнопку «Сохранить изменения».

Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):

1
2
3
4
5

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]');?>
    </div>
</div>

Если Вы вставляете код вызова формы в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

1
2
3
4
5

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form-7 404 "Not Found"]
    </div>
</div>

Код кнопки, открывающей попап:

1

<a href="#contact_form_pop" class="fancybox-inline">Заказать звонок</a>

Возникла странная проблема с относительными ссылками в хэдере. К ссылке на активацию формы упорно приписывался адрес главной страницы. Победил это добавив пробел перед решеткой.

Для закрытия popup окна с формой обратной связи после успешной отправки в блок “Дополнительные настройки” вашей формы.

1

on_sent_ok: $.fancybox.close();