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

23.04.2014

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

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

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

Код вставляется в шаблон сайта в файлы .php!

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

<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>

*** Пробел после и перед квадратными скобками уберите на своем сайте.
И дальше у меня все шорткоды вызова формы обратной связи выведены с пробелами сразу после и перед квадратными скобками, иначе на моем сайте выводится реальная форма связи.
[ contact-form-7 id="420" title="Заказать звонок" ]

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

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

<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="Заказать звонок" ]

Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.

Пример вызова двух форм обратной связи в 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 404 "Not Found"]'); ?>
    </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 на свой.

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

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

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

on_sent_ok: $.fancybox.close();

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

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

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

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

Не уходи, пока не прочитаешь:

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

  • Сергей

    Зачем изобретать велосипед, используем бесплатную форму от consultant-web.ru/callme/

    Ответить
    • Denis Creative

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

      Ответить
  • Вадим

    Доброго времени суток, Денис. Благодарю за статью, как раз искал для своего проекта такое решение.
    А еще вопрос немного не по теме. Через какой плагин Вы выводили галерею фото? Очень красиво.

    Ответить
    • Denis Creative

      Извиняюсь за задержку с ответом.

      Галерея создана стандартным способом в админке WordPress, только + установлен плагин Easy Fancybox, который позволяет эту галерею красиво отображать. Постараюсь написать статью на эту тему в скором времени.

      Ответить
  • игорь

    Привет! Я сделал так и всё получилось. Всё круто!
    Но если усложнить задачу?
    1. Мне надо не текстовая ссылка в качестве кнопки, а шорткод кнопки?
    2. Мне надо захватить URL и заголовок страницы, что бы было понятно откуда отправили письмо.

    Ответить
  • fxr

    Куда именно требуется вставить код ?

    Ответить
    • Denis Creative

      Код нужно вставлять в шаблон сайта, не в Визуальный редактор

      Ответить
      • Denis Creative

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

        Ответить
  • Катерина

    Добрый день :)
    Поробовала сделать по Вашей инсутркции — все получилось! Только вот после заполнения формы и закрытия окна меня перекидывает на пустую старницу. Это проблема в форме?

    Ответить
  • Эдуард

    Всегда интересовал вопрос, сильно ли подобная фича тормозит загрузку сайта при медленном интернете (например на смартфоне)?

    Ответить
  • Станислав

    Спасибо, все поставил все работает..))

    Ответить
  • Nazar

    Добрый вечер, установил 2 плагина Contact Form 7 и Easy FancyBox, сделал как вы описали. При нажатии на текст ничего не происходит! как настроить правельно Easy FancyBox ??

    Ответить
    • Alex Bud

      Попробуйте подключить новую версию jquery.js, у меня тоже ничего не происходило, подключил новую библиотеку и все заработало)

      Ответить
      • Denis Creative

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

        Ответить
  • Yarik

    Здравствуйте. Метод хорош, но в моем случае что-то идет не так, так как при закрытии popup удаляется сам блок (в вашем примере блок с id=»contact_form_pop»), после повторного открытия — в popup помещается вся страница сайта. Интересно, никто не сталкивался с такой проблемой?

    Ответить
    • Denis Creative

      На каком-то из клиентских сайтов была похожая проблема, в шаблоне уже были подключения фансибокса, поэтому помогло подключение другого плагина для фансибокса, например, FancyBox for WordPress.

      Ответить
      • Денис

        тоже самое только с FancyBox for WordPress — перерыл весь код — вроде чисто но блок удаляется

        Ответить
        • Denis Creative

          В некоторых шаблонах могут быть конфликты с другими скриптами, в таком случае нужно искать с какими именно возникают конфликты или искать другие способы для реализации контактной формы в pop-up. Возможно стоит попробовать плагин Easy FancyBox.

          Ответить
  • Яна

    Подскажите пожалуйста как сделать дизайн для этой формы? Задала классы для элементов и отредактировала в css , но почему то не получается.

    Ответить
  • Андрей

    Всё отлично работает! Спасибо за статью.
    Но есть одна проблемка. Если устанавливаю на странице более одной формы, то всплывает всегда та, которая самая верхняя на странице. Например: если установить «Обратная связь» и «Форма заказа» (две абсолютно разные формы сделанные в CF7) на одну страницу, то в любом случае будет всплывать какая-то одна.
    В чём проблема?

    Ответить
  • Андрей

    Вопрос решён!
    Заменил в и заказать звонок pop на pop2

    Ответить
    • Denis Creative

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

      Ответить
  • Катя

    У меня такая проблема: при нажатии на кнопочку отправить в модальном окне, страничка перезагружается, и пользователь не видит сообщения при успешной отправки, но если снова вызвать popup то сообщение видно.
    Пробовала прописать script type=»text/javascript» src=»plugins/contact-form-7/includes/js/jquery.form.js» > и в таком случае с модальным окном срабатывает, но с формами на главной странице нет, они вообще перестают работать..
    Подскажите, в чем может быть ошибка?

    Ответить
  • Евгений

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

    Ответить
    • Denis Creative

      Окно не должно закрываться при отправке сообщения. Скорее всего или в шаблоне прописана функция для закрытия popup-формы при нажатии на кнопку Отправить, или Вы такую функцию написали без проверки на успешную отправку сообщения.

      Ответить
  • Наталья

    Спасибо огромное за информацию! Очень помогла. Перед тем, как попала на Ваш сайт, Пыталась установить по инструкциям 4-х ресурсов. Только Ваши помогли! Все работает, как часы! Спасибо!

    Ответить
  • Виктор

    Здравствуйте, я установил Contact Form 7 и Easy FancyBox все работает, но не совсем корректно — при нажатии на ссылку появляется белый квадрат 10х10 и все. Подскажите в чем может быть проблема?

    Ответить
    • Denis Creative

      Может неправильно форму вставили в popup, может стили для формы надо исправить, и еще с десяток возможных причин…

      Ответить
  • Юлия

    Сейчас работаю над проектом, в котором нужно вывести форму подписки в pop up.
    В качестве сервиса для подписки использую k-news. Не нашла для него плагинов pop up, которые были совместимы с ним.
    Форма сервиса вставляется через шоткод [knews_form].
    Как можно взять попап, походящий мне по функциональности и научить его понимать шоткод? Допустим в плагине есть текстовый редактор, но при вставке [knews_form], он выводит на экран [knews_form] вместо формы.

    Ответить
  • Юлия

    К предыдущему вопросу- возможно вам попадались плагины попапов, которые работают с шоткодами?

    Ответить
    • Denis Creative

      Посмотрите пример выше, описанный в статье, — любой шорткод можно вывести через код страницы примерно так

      <?php echo do_shortcode('[knews_form]'); ?>

      В итоге получится примерно такой вид:

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

      Если Вы вставляете данный код в Визуальном редакторе, тогда используйте такой вид:

      <a href="#contact_form_pop" class="fancybox">заказать звонок</a>
      <div style="display:none" class="fancybox-hidden">
          <div id="contact_form_pop">
              [knews_form]
          </div>
      </div>
      
      Ответить
  • Александр

    Здравствуйте! Уже вопрос задавали о том что вместо формы квадратик 10 на 10 пикселей, я вставил все правильно, и стили вообще не задавал, какая еще может быть причина в неправильной работе? Заранее спасибо.

    Ответить
    • Denis Creative

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

      <div id="contact_form_pop">Test Text</div>
      Ответить
      • Сергей

        Добрый вечер! Тоже с этой проблемой столкнулся, при нажатии на текст открывается окно 10 на 10, пробовал тест с текстом, текст отображается, в чем еще может быть причина?

        Ответить
        • Denis Creative

          Это значит, что форма вставлена неправильно.
          Если Вы вставляете код вызова формы в php-файлах шаблона темы, то используйте код:

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

          Если же Вы вставляете блок вызова формы прям в текстовом редакторе Записи, то используйте такой код:

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

          Итого, должен получиться, если вставлять код прям в визуальном редакторе (в режиме ТЕКСТ) такой код:

          <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>

          Так же важный момент!
          Должно быть соответствие якоря ссылки и id формы:

          <a href="#contact_form_pop_1" ...
          <div id="contact_form_pop_1"> ...
          
          и для второй формы:
          
          <a href="#contact_form_pop_2" ...
          <div id="contact_form_pop_2"> ...
          
          и так далее.
          
          Ответить
  • Алексей

    Добрый день! Не подскажете как сделать, чтобы всплывающее окно отображалось не по центру браузера? Вообще как менять расположение всплывающего окна?

    Ответить
  • Владимир

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

    Ответить
  • Алёна

    У меня не выходит… форма всплывает, а на ней текстом [contact-form-7 id="36" title="Обратный звонок"]
    screenshot
    каждый символ уже проверила.. с чем может быть проблема?

    Ответить
  • Станислав

    Здравствуйте, у меня есть сайт shtukaturka-sten.od.ua в котором есть кнопка Узнать Больше, которая есть благодаря теме оформления WordPress и в админке этой темы есть поле LINK для этой кнопки:
    я туда вписал #contact_form_pop, но я так понимаю нужно поменять класс этой кнопки на FancyBox и добавить где-то на сайте
    что-то наподобие этого текста:

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

    если я все правильно понимаю, то как это реализовать ???

    Ответить
  • Серж

    При на жатии на кнопку вилазить модальное окно с текстом The requested content cannot be loaded.
    Please try again later.

    Что может быть?

    Ответить
    • Denis Creative

      Что-то неправильно сделано… Надо смотреть, возможно, неправильная ссылка с якорем стоит (#contact_form_popup)

      Ответить
  • Евгений

    А у меня FancyBox конфликтует c Autoptimize — если включить сжатие javascript — то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?

    Ответить
  • Олег

    Спасибо за статью. Такой вопрос — как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
    Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.

    Ответить
    • Denis Creative

      По идее, Dynamic Text Extension должен работать без лишних движений.
      Возможно Вам поможет эта статья — http://denis-creative.com/special-mail-tags/

      Ответить
      • Олег

        Денис, смотрите, например есть такая ссылка с GET параметрами:
        site.ru/contact-form?param1=value1&param2=value2
        Как ее вставить в эту конструкцию?

        <a href=»#contact_form_pop» rel=»nofollow»>заказать звонок</a>
        [ contact-form-7 id=»420″ title=»Заказать звонок» ]

        Как я понимаю, ее нужно уместить куда-то в
        <a href=»#contact_form_pop» rel=»nofollow»>заказать звонок</a>

        Как это сделать?

        Ответить
        • Denis Creative

          Попробуйте в форму вставить тег [_url] — этот тег выводит ссылку на страницу, на которой была заполнена форма.

          Ответить
  • Иван

    Добрый день! Отличная статья, очень помогла. Спасибо! Но кое. что не знаю как сделать, как изменить размер шрифта в самих полях, цвет полей и как изменить стиль кнопки отправить? Заранее спасибо!

    Ответить
    • Иван

      Денис, подскажите пожалуйста, очень нужно!

      Ответить
      • Denis Creative

        Нужно просто задать класс для блока, в который Вы помещаете, форму, например .my_form. Это для того, чтобы для разных форм на сайте задавать разные стили.
        И с учетом родительского класса задавать стили для всего остального, например:
        .my_form form input{
        font-size: 18px;
        color: #333;
        border: 1px solid #ccc;
        }
        .my_form form input.wpcf7-submit{
        display: inline-block;
        border: none;
        padding: 15px 30px;
        color: #fff;
        background-color: #59d7c5;
        }

        Ответить
  • Дмитрий

    Здравствуйте. Подскажите, пожалуйста. У меня не появляется всплывающее окно.
    <a href=»http://test.mrorange.tmweb.ru/wordpress/uncategorized/vzyat-na-test/» rel=»nofollow»>внизу, где «форма заявки»</a>
    Хотя, например, на <a href=»http://test.mrorange.tmweb.ru/wordpress/seriya-rtt-a200/» rel=»nofollow»>странице</a> все работает. То есть, когда я вставляю медиафайл и делаю сслыку на него же, то попапп появляется, если просто добавляю класс, то ничего не происходит.
    Буду очень благодарен за ответ

    Ответить
    • Denis Creative

      Ссылка на окно должна быть в таком формате:
      <a class=»fancybox» href=»#contact_form_pop_1″>Вызываем форму 1</a>
      При этом сам всплывающий блок должен быть помещен в блок с id=contact_form_pop_1

      Ответить
  • Дмитрий

    Все так. Но не появляется всплывающего окна. В адресную строку добавляется якорь и все. Дальше тишина

    Ответить
    • Denis Creative

      На сайте подключено несколько скриптов для pop-up — lightbox и fancybox, посмотрите, попробуйте какой-то скрипт или плагин отключить. Возможно, нужно отключить скрипт в шаблоне сайта.

      Ответить
  • Дмитрий

    Да. Я пробовал тот и другой. С фанси бокс не получилось. Я скачал лайтбокс, отключил фанси и то же самое. Когда вставляю материал — работает. Когда добавляю класс фансибокс, то нет

    Ответить
    • Denis Creative

      Скорее всего это из-за конфликта скриптов, нужно смотреть детально, в том числе скрипты шаблона и плагинов. Такое бывает редко, но на некоторых шаблонах бывает. Так же бывало, что плагин Fancybox for WordPress не срабатывал, а плагин Easy Fancybox работал отлично.

      Ответить
      • Дмитрий

        Та-дам! : ) Easy Fancybox — наш выбор! Читал коменты выше и хотел скачать изи фансибокс, а скачай лайт бокс. Вот невнимательность моя меня всегда подводит..

        Большое спасибо, за помощь!

        Ответить
  • Alex

    Денис, спасибо за статью. Скажи, а есть простой способ сделать чтобы при удачной отправке сообщения через Contact Form 7 окно Fancybox автоматически закрывалось, желательно через промежуточное окно «ваша заявка отправлена» или какое-то похожее решение?

    Ответить
  • Пётр

    Добрый день!
    Очень полезно!
    Вопрос такой, с помощью данной фичи можно ведь ещё сделать попап окно при уходе с сайта?! Если кто додумал как, буду благодарен!

    Ответить
  • Михаил

    Просто спасибо!)

    Ответить
  • Юлия

    Очень спасибо! как раз то, что я искала!!!

    Ответить
  • Павел

    Все получилось.

    Ответить
  • Julse

    Благодарю, автора за статью, наконец-то получилось разместить две формы на одной странице!! )
    Но вот проблема. После активации плагина Easy FancyBox пропала возможность скролла в браузере Хром, в ФаерФоксе все норм скролится. При отключения плагина в Хроме снова все мышкой скролится нормально, но формы ясное дело не работают. Что это может быть?

    Ответить
    • Julse

      В общем это был видимо какой-то конфликт. Решение стала установка FancyBox for WordPress вместо Easy FancyBox и все заработало без проблем! Еще раз спасибо Автору за такой лайфхак!

      Ответить
  • Антон

    Чтоб без проблем отображать на странице текст шорткода без необходимости его выполнения используйте плагин
    https://ru.wordpress.org/plugins/shortcode-shortcode/

    Ответить
  • Алексей

    Подскажите, в чём может быть проблема. У меня он работает на главной и на страницах категорий, а на страницах записей нет. В адресной строке к урл добавляется #contact_form_pop, а форма не всплывает. В чём может быть дело?

    Ответить
    • Denis Creative

      Может какой-то плагин подключается со своими скриптами или просто скрипты отдельные подключаются на страницах single.php.
      Попробуйте разные плагины для fancybox — Easy Fancybox, FancyBox for WordPress или любой другой.

      Ответить
      • Алексей

        C Fancybox for WordPress у меня вообще нигде не работает. Или он по другому подключается?

        Ответить

Оставить комментарий