Форма обратной связи в модальном окне на WordPress сайте

Форма обратной связи в модальном окне - WordPress

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

Плагины для формы обратной связи и модального окна

Для начала необходимо установить два WordPress плагина - это cForms и Fancybox for WordPress (см. инструкция по установке плагинов на WordPress). Затем с помощью плагина cForms необходимо создать форму обратной связи, которая будет всплывать в модальном окне после клика на кнопке.

Шаблон для страницы с модальным окном

Также необходим новый шаблон для страницы с модальным окном. В этом шаблоне необходимо вызвать ранее созданную форму обратной связи. Форму, созданную с помощью плагина cForms можно вызвать с помощью следующего php кода, где цифра 1 - это номер вашей формы:

<?php insert_cform(1); ?>

Ниже мы приведем примерный код, который должен располагаться в шаблоне страницы для модального окна. Этот код необходимо скопировать и вставить в новый php файл, например, page-phone.php. А затем этот файл необходимо загрузить на сайт в папку с вашей WordPress темой.

<?
/*
 * The template name: Модальное окно - форма обратной связи
 */
?>

<?php insert_cform(1); ?>

Далее, необходимо в админке WordPress создать новую страницу и присвоить ей шаблон с именем: "Модальное окно - форма обратной связи".

Ссылка для вызова модального окна с формой

Если вы успешно выполнили все предыдущие шаги, то вам осталось разместить ссылку на вашем сайте, которая будет ссылаться на ранее созданную страницу. Ссылке необходимо присвоить класс "fancybox", чтобы она обрабатывалась плагином Fancybox for WordPress.

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

Ниже мы привели примерный html код для создания подобной ссылки:

<a href="http://furnituraelite.ru/?page_id=70" class="sendbutton fancybox">Форма обратной связи</a>

 Оформление формы обратной связи

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

<?
/*
 * The template name: Модальное окно - форма обратной связи
 */
?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fancybox_form.css" type="text/css" media="screen" />

<?php insert_cform(1); ?>

Предупреждение

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