Всплывающая контактная форма WordPress
Недавно один из посетителей задал вопрос, как создать всплывающую контактную форму? Предлагаю вам создать такую форму при помощи двух плагинов Contact Form 7 и Easy FancyBox.
Первое что необходимо, это установить оба плагина. После того как установили и активировали необходимо в панели администрирования зайти в меню Контакты (CF7) и настроить форму. Процесс настройки довольно простой я упущу эту часть урока, если он необходим напишите мне в комментариях и я дополню этот урок. После создания формы плагин предложит вам шорткод для вставки в статью. Выглядеть это будет вот так:
После создания формы необходимо создать страницу и вставить в нее шорткод формы:
 |
|
Итак, форма у нас есть, осталось заставить появляться ее во всплывающем окне, для этого подменяем шорткод формы на следующий код.
|
1 2 3 4 5 6 7 |
<a href="#contact_form_pop" class="fancybox">Открыть контактную форму</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form 1 "Contact form 1"] </div> </div> |
Пример вставки кода формы:
После вставки кода и сохранения страницы, можно нажать на ссылку, потом откроется контактная форма во всплывающем окне.
Код проверил на одном из разрабатываемых мной сайтом, все работает. Удачи в разработке сайтв.
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
Здравствуйте!
А как этот обновленный код формы прикрепить к кнопке. Кнопка в виде картинки или ячейка в меню навигации.
Подскажите пожалуйста!
Для того чтобы ссылка вызывала контактную форму необходимо в нее ввести код как показано в примере «Пример вставки кода формы:». Отстилизовать ссылку при помощи CSS можно как будет вам угодно под ваш дизан.
Сергей чуть выше в коде есть пример, думаю если установите оба плагина и сделаете по примеру все станет ясно. Если не разберетесь напишите на каком сайте вам надо сделать и где, попробую помочь.
Спасибо! Получилось
Очень рад что мои труды со всплывающей контактной формой не направсны.
Отличное решение. Только бы еще углубиться в немного в стиль самой контактной формы. Привести её в порядок.
Тут основная задача была показать как форму встраивать, а стилизация форм это уже следующий этап и делается в стилях (css).
Здравствуйте, подскажите а где менять стили? и как сделать кнопку а не текст?
Стили темы в WordPress находятся тут: /wp-content/themes/папка с именем темы/style.css.
Кнопку а не текст в каком месте? У нас в примере кнопка отправки есть.
Почему-то не срабатывает в опере. При клике ничего не происходит. В хроме при повторном нажатии грузит не формы, а саму страницу в этом всплывающем окне.
Сбрось ссылку в комментарий если сайт доступен в интернет, может помогу.
День добрый ! Статья понравилась. Но форма всплывает один раз. А потом всплывает вся страница!!!!!Помогите!!!
Надо посмотреть на сам сайт, так навскидку сказать сложно.
Был похожий глюк — решилось установкой Easy FancyBox
Спасибо за подсказку! Думаю этот плагин лучше работает, так как у меня на некоторых сайтах тоже была проблема описанная выше. Добавлю его и к уроку.
Добрый день! Спасибо за отличную статью. А как сделать, чтобы форма всплывала при нажатии на кнопку-шорткод?
Для того чтобы форма реагировала на кнопку, можно просто оформить стилями ссылку «Открыть контактную форму», или как вариант, просто добавить в нужный элемент класс class=»fancybox».