Всплывающая форма обратного звонка wordpress

Приветствуем вас! Недавно мы получили письмо от пользователя, спрашивающего как разместить свою контактную форму обратного звонка? Это распространенная тенденция на многих сайтах, которая используется для удобства пользователей, для совершения какого-нибудь целевого действия. В основном они имеют спрос на коммерческих сайтах, занимающихся продажей некой продукции. В этой статье мы покажем вам, как добавить всплывающую форму обратного звонка wordpress. Итак, начнем.

Шаг 1

Вам понадобится плагин «Contact Form 7» (https://wordpress.org/plugins/contact-form-7/). Скачиваем плагин, устанавливаем, активируем. После проделанных шагов, у вас появится кнопочка «Contact» в левой части админ панели.

Нажимаем на нее. Сначала вам нужно создать новую форму контакта, поэтому выбираем пункт «Добавить новую».

Пишем название. Здесь не нужно вашей фантазии, пишем предельно просто. Смотрим скриншот.

Далее добавляем поля, которые вам понадобятся. В принципе вы можете оставить все так как есть, так как эти поля у вас уже стоят по умолчанию. Но нам необходимо добавить самый важный пункт «Номер телефона». В правой части панели, жмем на кнопочку «Сгенерировать тег» и выбираем нужный вам пункт.

Жмем на пункт «Номер телефона», затем в чекбоксе ставим галочку обязательное поле. Далее вам нужно скопировать полученный тег в форму, который находится в левой части.

У вас появится вот такая запись в левой части.

Под email адресом разместите поле с номером вашего телефона. У вас появится следующая запись в левой части шаблона приходящих писем. 

В чекбоксе «Использовать HTML……….» ставим галочку.

Строку «Please fill in………» переводим на русский язык. Получится примерно следующее «Заполните пожалуйста обязательное поле».

Добавляем email адрес в поле адресат.

Все, теперь нам осталось нажать на кнопочку «Сохранить».

Шаг 2

Мы почти сделали нашу форму для сайта. Далее нам осталось при нажатии на нее сделать всплывающий эффект. Чтобы проделать некоторые манипуляции нам понадобится плагин «Easy FancyBox» основанный на языке Jquery. Проделываем знакомые вам действия, то есть скачиваем, устанавливаем, активируем плагин. (https://ru.wordpress.org/plugins/easy-fancybox/)

Допустим вышеперечисленные шаги вы проделали и наш плагин заработал. В нем появятся настройки для медиафайлов, которые мы сейчас бегло рассмотрим.

«Размеры изображения» — здесь вы выставляете свои параметры для миниатюр, крупных и средних картинок.

Далее у нас идут эффекты FancyBox для вытекающих категорий медиафайлов.

Ставим галочки у необходимых пунктов. Мы оставим только для изображений. Далее, ссылки, Overlay (затемнение области с контентом) – это 1 чекбокс, 2 – это закрыть форму при нажатии на затемненную область. Вы можете задать цвет и прозрачность. Мы ничего не делали, оставили все так как есть.

• Далее у нас идет окошко «Window»:
• Показ значка закрытия окошка
• Цвет, рамки и заголовка вокруг
• Размеры
• Задержка и скорость закрытия окна

Далее настройки совместимости с другими устройствами и браузерами. Здесь мы также ничего не трогали, но вы можете поэксперементировать.

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

Теперь нам остается все это хозяйство сохранить. Нам осталось совсем маленько до заветной цели. Теперь очень внимательно повторяем за нами. Мы нашу форму поставим на самом видном месте, например, в шапке блога. Шагаем в header.php и вставляем туда этот код. 

 

<a id="myButton" href="#contact_form_pop" class="fancybox" >Обратный звонок</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode (' [contact-form-7 id="92″ title="Форма обратного звонка"]'); ?>
</div>

Внимание, посмотрите внимательно на функцию в которой выводится наша форма.

[contact-form-7 id="88" title="Форма обратного звонка"]

Где ее взять? Бежим в «Контакт Форм 7» – «Формы» где вы и увидите шорткод.

Теперь все это дело мы сохраняем и идем смотреть что мы наваяли.

Это все. Мы надеемся, что эта статья поможет вам повысить ваши коэффициенты конверсии, используя всплывающее форму звонка WordPress. У нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!