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

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

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

Contact Form 7 Easy FancyBox

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

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

 

 

 

 

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

 

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

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

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

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

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


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

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

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


Вам может также понравиться...

комментариев 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».

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

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

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

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