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

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

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

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

Contact Form 7 Easy FancyBox

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

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

 

 

 

 

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

 

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

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

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

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

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


Купить хостинг Admin VPS

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

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

  1. Seryoga Bungalo:

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

    • admin:

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

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

  2. Seryoga Bungalo:

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

  3. Valentyn:

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

    • admin:

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

      • Alexander Adibekyants:

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

        • admin:

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

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

  4. Максим Кукин:

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

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

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

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

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

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

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

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

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

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

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