Loading
Контактная форма (Contact Form 7) во всплывающем окне (lightbox эффект)

Контактная форма (Contact Form 7) во всплывающем окне (lightbox эффект)

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

Для создания формы обратной связи или других форм для сайта на CMS WP дизайн студия «Движок» рекомендует плагин Contact Form 7, а для всплывающего окна с эффектом лайтбокс будем использовать Easy FancyBox.

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

1. Плагин Contact Form 7 так же этот плагин можно скачать ниже и через ftp установить его в каталог: wp-content/plugins/

Скачать файл бесплатно! Пожалуйста, поддержите нас, нажмите на одну из социальных кнопок ниже, чтобы получить доступ к заблокированному контенту.

2. Плагин Easy FancyBox так же этот плагин можно скачать ниже и через ftp установить его в каталог: wp-content/plugins/. На одном из сайтов заказчика для всплывающих окон использовался плагин FancyBox for WordPress.

Скачать файл бесплатно! Пожалуйста, поддержите нас, нажмите на одну из социальных кнопок ниже, чтобы получить доступ к заблокированному контенту.

Итак, устанавливаем и активируем оба указанных выше плагина. Создаю контактную форму и получаю шорткод вида*:

[contact-form-6 id="" title="Форма сайта"]

Настройки Easy FancyBox можно найти в меню слева: Параметры — Медиафайлы.
Настройки мы практически не меняли. Поставили галочки во вкладке Media на Images и Inline content (как раз inline content и отвечает за всплывание контента). Остальное можете настроить по своему усмотрению.

Теперь требуется встроить ссылку в нужное место.

Варианты встраивания ссылки с формой:

1. Встраиваем напрямую в шаблон:

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

2. Встраиваем в страницу или в запись

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

3. Встраиваем в виджет сайдбара

*нужно активировать поддержку шорткодов в фале functions.php (не все шаблоны поддерживают шорткоды в виджетах сайдбаров). Для этого в файл functions.php добавляем строку:
add_filter('widget_text', 'do_shortcode');
Теперь любой шорткод будет работать в виджете «Текст».
В виджет «Текст» вставляем код*:

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

4. Вызов формы обратной связи при нажатие на картинку:

Пример такой формы можете увидеть на сайте нашего заказчика: натяжные потолки в Киев
</code>

<a class="fancybox-inline" href="#contact_form_pop">
<img src="http://potolok-art.com.ua/wp-content/uploads/2013/02/button.png" alt="" border="none" /></a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">[contact-form-7 404 "Not Found"]</div>
</div>
5. Чтобы вызывать на одной странице несколько форм, нужно использовать различные <strong>id</strong> для вызова формы.
Пример вызова двух форм обратной связи в pop-up окне:

<code><a class="fancybox" href="#contact_form_pop_1">Вызываем форму 1</a>

Вызываем форму 2

 

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

...

и для второй формы:

...

и так далее.

6. Вывод формы подписки Feedburner

<a class="fancybox subscribe" href="#contact_form_pop">ПОДПИСАТЬСЯ</a>

 

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

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

Добавляем такой код, если используется плагин с fancybox например Easy Fancybox:
on_sent_ok: $.fancybox.close();
в блок Дополнительные настройки вашей формы.
Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Если выдает ошибку: The requested content cannot be loaded. Please try again later

Такая ошибка может быть на последних версиях движка вордпресса рекомендуется сменить класc в ссылке:
<a class="fancybox" href="#contact_form_pop">Обратная связь</a>
меняем на:
<a class="fancybox-inline" href="#contact_form_pop">Обратная связь</a>

Мы сменили fancybox на fancybox-inline.

Проблемы и решения какие встречаются:

1. При нажатии на ссылку с формой ничего не происходило — в адресной строке появлялось http://сайт/#contact_form_pop.
Проблема решилась заменой плагина Easy FancyBox на FancyBox for WordPress

2. Если у вас подключена галерея(к примеру NextGEN Gallery) или установлена тема, которые уже имеют эффект «лайтбокса», получается следующее: фотографии открываются встроенным лайтбоксом и ещё лайтбоксом от EasyFancy Box, то есть приходится их потом два раза закрывать.
Чтобы избежать этого, в настройках EasyFancy Box отключите галочку Images и в верхней части кода всплывающей формы замените класс fancybox на fancybox-inline. Ваш код будет выглядеть так:.

<a class="fancybox-inline" href="#contact_form_pop">Обратная связь</a>

 

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля