КАК СДЕЛАТЬ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ НА ВОРДПРЕСС | ФРИЛАЙН КАК СДЕЛАТЬ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ НА ВОРДПРЕСС | ФРИЛАЙН

Иногда требуется визуализация какой-либо формы обратной связи, изображения или текста во всплывающем окне. Хорошо, если в шаблоне темы эта функция уже прописана, тогда всё ОК’! А если нет, что делать? Предлагаю решение проблемы для тех, кто для организации обратной связи с посетителями сайта пользуется плагином Сontact form 7. Вполне вероятно, оно пригодится и в случае использования других плагинов. Как известно, форма обратной связи открывается на странице, либо её можно встроить в текстовый виджет. На странице — прошлый век, хочется посовременнее. А в виджете хороша маленькая форма, типа «ЗАКАЗАТЬ ЗВОНОК». А если речь идёт о многофункциональной форме — виджет будет громоздким и займёт весь сайдбар… Для себя я решила оба варианта (на странице и в виджете) установив дополнительно плагин Еasy Fancybox, если есть решение проще — пишите в комментариях — буду признательна!

КАК УСТАНОВИТЬ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ В ВИДЖЕТЕ:

  • Скачиваем плагин Сontact Form 7 в репозитории.
  • Настраиваем, например, форму заявки на услуги с бесконечным количеством полей.
  • Скачиваем плагин Easy Fancybox там же, устанавливаем и активируем.
  • Открываем раздел виджеты и в текстовый виджет вставляем следующий код:
<a class="fancybox" href="#contact_form_pop"><center><img src="ЗДЕСЬ ССЫЛКА НА КАРТИНКУ"border="0" title="Баннер" width="140" height="100"></center></a>
<div style="display:none">
 <div id="contact_form_pop">
 [ЗДЕСЬ ШОРТКОД КОНТАКТНОЙ ФОРМЫ СОЗДАННОЙ В Сontact Form 7]
 </div>
</div>

КАК УСТАНОВИТЬ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ НА СТРАНИЦЕ:

В этом случае всплывающее окно будет открываться при клике на текстовую ссылку (анкор). Чтобы посмотреть как это выглядит, кликните по этому анкору

Ваше имя (обязательно)

Ваш e-mail (обязательно)

СДЕЛАТЬ ЗАЯВКУ НА:
Приобретение готовой сборки интернет-магазина
Контекстную рекламу сайта, лендинга, блога
Изготовление интернет-магазина, сайта
Заполнение товаром интернет-магазина
Изготовление баннера, лого, фавикона
Техподдержка сайта, лендинга, блога
Техподдержка интернет-магазина
SEO - оптимизацию сайта
Подготовка рукописи к изданию
Изготовление видеоролика
Фотошоп, дизайн фотографий
Изготовление презентации
Создание слайд-шоу
Изготовление клипарта

ТЕХНИЧЕСКОЕ ЗАДАНИЕ

ПРИКРЕПИТЬ ФАЙЛ

  • Отключаем визуальный редактор (переходим на вкладку «текст»).
  • В окне редактирования записи вставляем следующий код:
<span style="color: #ff0000;"><strong><a class="fancybox" href="#contact_form_pop">ЗДЕСЬ ТЕКСТ ССЫЛКИ (АНКОР)</a></strong></span></span></p>

<div style="display: none; text-align: justify;">
<div id="contact_form_pop"><span style="color: #000000;">
[ЗДЕСЬ ШОРТКОД КОНТАКТНОЙ ФОРМЫ СОЗДАННОЙ В Сontact Form 7]
</span></div>
</div>
  • В скрипте <span style=»color:#ff0000;«> укажите нужный вам цвет ссылки анкора в соответствии с общим дизайном вашего сайта.
  • В скрипте <span style=»color:#000000;«> укажите нужный вам цвет текста формы в соответствии с общим дизайном вашего сайта.

На этом всё, сохраняйте и любуйтесь всплывающим окошком обратной связи!

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

Еще нет никаких комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

8 + 4 =

Хостинг от Макхост
ЗАДАТЬ ВОПРОСПОСМОТРЕТЬ ПОРТФОЛИО
Яндекс.Метрика