Как сделать форму обратной связи во всплывающем окне для WordPress

[vc_message color=»alert-success»]Если вам нужна форма обратной связи на чистом HTML без WordPress, тогда читайте эту статью:
Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке[/vc_message]

На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?

Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.

В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.

[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Код вставляется в шаблон сайта в файлы .php![/vc_message][/vc_column][/vc_row]

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

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

[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:[/vc_message][/vc_column][/vc_row]

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:

<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [[contact-form-7 id="420" title="Заказать звонок"]]
    </div>
</div>

У меня в примере код для формы «Заказать обратный звонок» — в форме всего два поля — имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.

Рассмотрим данный код.

Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:

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

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

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

В этом коде сама форма вызывается такой функцией:

<?php echo do_shortcode('[[contact-form-7 id="420" title="Заказать звонок"]]'); ?>

Где прописано — вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:

[[contact-form-7 id="420" title="Заказать звонок"]]

[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.[/vc_message][/vc_column][/vc_row]

Пример вызова двух форм обратной связи в pop-up окне:

<a href="#contact_form_pop_1" class="fancybox">Вызываем форму 1</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop_1">
        <?php echo do_shortcode('[[contact-form-7 id="420" title="Заказать звонок"]]'); ?>
    </div>
</div>

<a href="#contact_form_pop_2" class="fancybox">Вызываем форму 2</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop_2">
        <?php echo do_shortcode('[[contact-form-7 id="421" title="Оставить заявку"]]'); ?>
    </div>
</div>

В данном случае для вызова нескольких форм обратите внимание на эти части кода:

<a href="#contact_form_pop_1" ...
<div id="contact_form_pop_1"> ...

и для второй формы:

<a href="#contact_form_pop_2" ...
<div id="contact_form_pop_2"> ...

и так далее.

Вместо вывода шорткода формы обратной связи можно выводить любое содержимое, например блоки с текстом или картинками, или же форму для подписки Feedburner, например так выводится форма для подписки через Feedburner на одном из сайтов

<a href="#contact_form_pop" class="fancybox subscribe">ПОДПИСАТЬСЯ</a>
<div style="display:none" class="fancybox-hidden">
  <div id="contact_form_pop">
    <div class="subscribe-form">
      <div class="subscribe-text">ПОДПИСАТЬСЯ:</div>
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="text" name="email" placeholder="E-mail" class="subscribe-mail" />
        <input type="hidden" value="inoutdigest/feed" name="uri"/>
        <input type="hidden" name="loc" value="ru_RU"/>
        <input type="submit" value="ПОДПИСАТЬСЯ" class="subscribe-submit" />
      </form>
    </div>
  </div>
</div>

Можно использовать этот код для своей формы подписки изменив только адрес ленты http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свой.

[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Важный момент! Для того, чтобы форма имела красивый вид, для нее нужно задать свои стили отображения. Лучше всего обернуть свою форму в div еще на этапе создания формы в CF7.[/vc_message][/vc_column][/vc_row]

Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Добавляем такой код, если используется плагин с fancybox например Easy Fancybox:

on_sent_ok: $.fancybox.close();

в блок Дополнительные настройки вашей формы.

Скриншот:

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

Примеры контактных форм в всплывающем окне, которые я делал для своих заказчиков: