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

Существует множество плагинов для WordPress для создания форм обратной связи на вашем блоге или сайте. Contact Form 7 самый примечательный из них, он позволяет встраивать контактную форму прямо в записи и страницы WordPress (в то время как многие плагины заставляют применять пользовательский шаблон к странице, тем самым ограничивая ее редактирование).

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox и Contact Form 7.

1. Первым делом устанавливаем плагины Contact Form 7 и Easy FancyBox.

Установка плагина WordPress

Установка плагина WordPress

2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.

Contact Form 7

Contact Form 7

3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.

Правим страницу в WordPress

Правим страницу в WordPress

Форма обратной связи

Форма обратной связи

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:

<a href="#contact_form_pop" class="fancybox">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form 1 "Contact form 1"]
    </div>
</div>
Easy FancyBox HTML

Easy FancyBox HTML

Ссылка на форму 'Contact Us' в WordPress

5. Все, теперь у нас есть ссылка, которая «запускает» форму контактов во всплывающем окне. Поздравляем! Вероятно вам придется подправить CSS емейл-формы для корректного отображения ширины и высоты, а также сообщений о возможных ошибках при заполнении. Для начала этого должно быть достаточно.

Всплывающая форма контактов в WordPress

Всплывающая форма контактов в WordPress

VN:F [1.9.22_1171]
Rating: 4.3/5 (6 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Юрий

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

    • ADv

      В голову приходит только плагин UberMenu

  • Pixes

    Что то делаю все так же по статье, но окно всплывает с не с формой,а с тегом формы. Пример : [contact-form 1 «Contact form 1»].
    В чем может быть причина? Версия WP 3.7.0

    • ADv

      Проверьте правильность указанного шорткода. Также вероятно, что запрещено выполнение шорткодов в области темы, где вы его вставляете

    • Дмитрий

      вот так вот

  • Александр

    Спасибо, сделал такую себе. Но вот проблема такая, при нажатии кнопки отправить, начинает бесконечно крутиться стрелка, и сообщения через раз приходят.

    • Саша

      У кого стрелки крутятся и сообщения приходят:

      Открывайте файл:

      /wp-content/plugins/contact-form-7/wp-contact-form-7.php

      Правьте строку:

      define( ‘WPCF7_LOAD_JS’, true);

      На:

      define( ‘WPCF7_LOAD_JS’, false );

  • Юрий

    День добрый ! Статья очень понравилась. Но вот проблема. Первый раз всплывает прекрасно. Второй раз вся страница ! Помогите

    • ADv

      Попробуйте подключить другой плагин для фенсибокса, вместо Easy FancyBox.

      • Дмитрий

        У меня такая же проблема первый раз форма, второй раз вся страница. После обновления все нормально и опять по новой.

  • Анастасия

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

    • ADv

      Подправить стили для формы в CSS как один из вариантов

  • Матвей

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

    • ADv

      Кнопка-картинка или кнопка-шорткод?

      • Рустам

        если кнопка шорт код?

  • Игорь Привалов

    Именно это и искал, но в моем шаблоне не отображается нормально(

    такой случай уже был у Pixes, но как решить???что нада поправить в шаблне?
    шотркод работает если его вставить просто на страницу или запись а в окне не хочет негде

    • Guest

      разобрался
      нужно вставлять
      а не просто [contact-form 1 «Contact form 1»]

      • Guest

        • Иван

          Я так и не понял, проблема у меня таже, что нужно вставлять вместо [contact-form 1 «Contact form 1»]?

      • Dani

        Вернее запись

        так и вызывается шорткод с вашими параметрами

  • Алексей

    У меня не всплывает на wppage/ Выводится надпись, на неё жмёшь и ничего не происходит. В чём может быть причина? Заранее спасибо.

  • Евгений

    У меня все получилось спасибо! Но у меня есть на главной странице кнопка заказать! Как сделать так чтоб при нажатии всплывало окно а не открывалась страница с формой?

    • ADv

      Решение, предложенное пользователем Игорь Привалов выше в комментариях Вам не подходит?

      • Guest

        Та же проблема

  • Илья

    А возможно эту форму привязать к стандартным комментариям? Т.е. нажал на ссылку, всплыло окно с формой, написал коммент, и коммент добавился на страницу с комментами? Такая страница с отзывами?

  • Никита

    Чувак, спасибо!

    • ADv

      Обращайтесь 😉

  • Сергей

    Спасибо брат, помогло!! уже дсяток плагинов за сегодня перебрал со вспывающим окном, форма выходила с ошибками, а fancy box отлично справляется, благодарю!

    • ADv

      Всегда пожалуйста

  • Алексей Рыжков

    а у меня выскакивает форма но не моя а другая чуток

  • Алексей Рыжков
  • Алексей Рыжков

    ура получилось допетрил…

  • Александр

    Вот такой код у меня и при нажатии на ссылку ничего не происходит. Что я упускаю?
    Спасибо.

    Contact Us

    • Татьяна

      То же самое, только в адресной строке прописывает /#contact_form_pop

  • Александр

    Вот такой код у меня и при нажатии на ссылку ничего не происходит. Что я упускаю?
    Спасибо.

  • Александр

    Вот такой код у меня и при нажатии на ссылку ничего не происходит. Что я упускаю?

  • Александр

    Картинка не загружается( код не вставляется в дискус(

  • Бойко Сергей

    У меня задача сделать во всплывающем окне сообщение об отправке заказа.
    Форма статичная и при нажатии на кнопку ЗАКАЗАТЬ должно появиться попап-окно, содержащее текст и картинки.
    Можно ли решить с помощью этих двух указанных плагинов данную задачу?

  • Ирина

    Отличная статья, все доходчиво, очень удобная форма, огромное спасибо!

    • ADv

      Читайте нас 😉

  • Анна

    Спасибо все получилось, оказалось все просто!

  • Юрий

    Интересная статья

  • Юра

    The requested content cannot be loaded.
    Please try again later.
    — выдаёт ошибку

    • гость

      вместо class=»fancybox» пропиши class=»fancybox-inline»

      • Андрей

        Спасибо большое! Помог.

  • Evgeny Kutsenok

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

    • ADv

      Попробуйте добавить скрипты фенсибокса в исключения Autoptimize

  • Alba

    good

  • Max

    Здравствуйте , у вас на сайте в правой колонке есть надпись :
    «В Помощь Вебмастеру»
    как её сделать?

    • ADv

      Поищите плагин по ключевым словам Sticky Widget

  • Jennifer Madera

    Спасибо за статью!

    Ребят, попробуйте сервис от http://pozvonim.com

    Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодиться мой комментарий

Scroll To Top