ФРИЛАЙН

Иногда требуется визуализация какой-либо формы обратной связи, изображения или текста во всплывающем окне. Хорошо, если в шаблоне темы эта функция уже прописана, тогда всё ОК'! А если нет, что делать? Предлагаю решение проблемы для тех, кто для организации обратной связи с посетителями сайта пользуется плагином С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>

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

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

• Отключаем визуальный редактор (переходим на вкладку «текст»).
• В окне редактирования записи вставляем следующий код:

<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;"> укажите нужный вам цвет текста формы в соответствии с общим дизайном вашего сайта.

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