Задавайте вопросы по курсам WordPress

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

Недавно один из посетителей задал вопрос, как создать всплывающую контактную форму? Предлагаю вам создать такую форму при помощи двух плагинов Contact Form 7 и Easy FancyBox. 

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

Contact Form 7 Easy FancyBox

После создания формы необходимо создать страницу и вставить  в нее шорткод формы:

WordPress пример вставки формы Contact Form 7wordpress form insert

 

 

 

 

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

 

Пример вставки кода формы:

Пример вставки контактной формы WordPress

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

wordpress form popup вывод формы

Код проверил на одном из разрабатываемых мной сайтом, все работает. Удачи в разработке сайтв.


Купить хостинг WordPress
Николаенко Максим

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Читайте также:

комментариев 16

  1. Аватар Seryoga Bungalo:

    Здравствуйте!
    А как этот обновленный код формы прикрепить к кнопке. Кнопка в виде картинки или ячейка в меню навигации.
    Подскажите пожалуйста!

    • admin admin:

      Для того чтобы ссылка вызывала контактную форму необходимо в нее ввести код как показано в примере «Пример вставки кода формы:». Отстилизовать ссылку при помощи CSS можно как будет вам угодно под ваш дизан.

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

  2. Аватар Seryoga Bungalo:

    Спасибо! Получилось

  3. Аватар Valentyn:

    Отличное решение. Только бы еще углубиться в немного в стиль самой контактной формы. Привести её в порядок.

    • admin admin:

      Тут основная задача была показать как форму встраивать, а стилизация форм это уже следующий этап и делается в стилях (css).

      • Аватар Alexander Adibekyants:

        Здравствуйте, подскажите а где менять стили? и как сделать кнопку а не текст?

        • admin admin:

          Стили темы в WordPress находятся тут: /wp-content/themes/папка с именем темы/style.css.

          Кнопку а не текст в каком месте? У нас в примере кнопка отправки есть.

  4. Аватар Максим Кукин:

    Почему-то не срабатывает в опере. При клике ничего не происходит. В хроме при повторном нажатии грузит не формы, а саму страницу в этом всплывающем окне.

  5. Аватар Татьяна Синикова:

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

  6. Аватар Вероника Вишневская:

    Добрый день! Спасибо за отличную статью. А как сделать, чтобы форма всплывала при нажатии на кнопку-шорткод?

    • Николаенко Максим Николаенко Максим:

      Для того чтобы форма реагировала на кнопку, можно просто оформить стилями ссылку «Открыть контактную форму», или как вариант, просто добавить в нужный элемент класс class=»fancybox».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal