contact form 7 easy fancybox

Contact Form 7 во всплывающем окне — казалось бы, такая незаменимая вещь, как всплывающие формы обратной связи должны уже идти в коробке с любой

Систе́ма управле́ния содержи́мым (конте́нтом) (англ. Content management system , CMS) — информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым, иначе — контентом (от английского content).

Нужный нам плагин Easy FancyBox.

Заходим в Настройки -> Медиафайлы.

Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.

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

Ставим галку на пункт«Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке

Код кнопки, открывающей попап:

Возникла странная проблема с относительными ссылками в хэдере. К ссылке на активацию формы упорно приписывался адрес главной страницы…

Победил это добавив пробел перед решеткой.

Содержание

1. Закрытие popup окна с формой обратной связи после успешной отправки
2. Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки
3. Комментарии (110) к “Как сделать форму обратной связи во всплывающем окне для WordPress”
4. Сергей
5. Denis Creative
6. Вадим
7. Denis Creative
8. игорь

Закрытие popup окна с формой обратной связи после успешной отправки

Добавляем такой код

в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.

Если вам нужна форма обратной связи на чистом HTML без WordPress, тогда читайте эту статью:
Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке

На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 – с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице “Контакты”?

Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.

В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.

Код вставляется в шаблон сайта в файлы .php!

Код с всплывающей контактной формой, установленный в коде файла шаблона:

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:

У меня в примере код для формы “Заказать обратный звонок” – в форме всего два поля – имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.

Рассмотрим данный код.

Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:

Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:

В этом коде сама форма вызывается такой функцией:

Где прописано – вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:

Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.

Пример вызова двух форм обратной связи в pop-up окне:

В данном случае для вызова нескольких форм обратите внимание на эти части кода:

Вместо вывода шорткода формы обратной связи можно выводить любое содержимое, например блоки с текстом или картинками, или же форму для подписки Feedburner, например так выводится форма для подписки через Feedburner на одном из сайтов

Можно использовать этот код для своей формы подписки изменив только адрес ленты http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свой.

Важный момент! Для того, чтобы форма имела красивый вид, для нее нужно задать свои стили отображения. Лучше всего обернуть свою форму в div еще на этапе создания формы в CF7.

Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Добавляем такой код, если используется плагин с fancybox например Easy Fancybox:

в блок Дополнительные настройки вашей формы.

Скриншот:

Больше вариантов, какие действия могут быть после успешной отправки сообщения через CF7 можно найти в этой статье Действия после успешной отправки сообщения с формы CF7.

Примеры контактных форм в всплывающем окне, которые я делал для своих заказчиков:

Комментарии (110) к “Как сделать форму обратной связи во всплывающем окне для WordPress”

Сергей

Зачем изобретать велосипед, используем бесплатную форму от consultant-web.ru/callme/

Denis Creative

Можно воспользоваться и различными конструкторами, только с помощью CF7 можно создать гибкую форму под свои требования. и плюс создать свой дизайн.

Вадим

Доброго времени суток, Денис. Благодарю за статью, как раз искал для своего проекта такое решение.
А еще вопрос немного не по теме. Через какой плагин Вы выводили галерею фото? Очень красиво.

Denis Creative

Извиняюсь за задержку с ответом.

Галерея создана стандартным способом в админке WordPress, только + установлен плагин Easy Fancybox, который позволяет эту галерею красиво отображать. Постараюсь написать статью на эту тему в скором времени.

игорь

Привет! Я сделал так и всё получилось. Всё круто!
Но если усложнить задачу?
1. Мне надо не текстовая ссылка в качестве кнопки, а шорткод кнопки?
2. Мне надо захватить URL и заголовок страницы, что бы было понятно откуда отправили письмо.

Уроки разработки из собственного опыта

Автор: Николаенко Максим · Опубликовано Февраль 7, 2013 · Обновлено Август 4, 2019

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

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

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

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

Источник: computermaker.info