Иногда требуется форму обратной связи (контактную форму) разместить во всплывающем окне (с эфектом lightbox).
Для этого можно использовать 2 плагина:
- Contact Form 7 — отличный плагин из ТОПа, который постоянно обновляется и пользуется огромным спросом у разработчиком на CMS WordPress.
- Shortcodes Ultimate — также отличный плагин, который имеет 5 звезд и более 3000 скачиваний.
Итак, в первую очередь нам необходимо скачать и активировать данные плагины. Как это сделать, неоднократно описано, поэтому не буду себя утруждать, а Вам порекомендую воспользоваться поиском в интернете.
После установки и активации нам необходимо:
1. Создать контактную форму: переходим в Contact Form 7 и нажимаем «добавить новую»
2. Настраиваем ее под себя и сохраняем.
В моем случае форма имеет такой вид.
Ошибка: Контактная форма не найдена.
3. Следующим шагом нам необходимо добавить дополнительные стили css в настройки Shortcodes Ultimate.
Заходим в панели управления «Шорткоды» -> «Настройки» -> вкладка «Произвольный CSS» и вставляем туда следующий код:
.gift-box {
background: none repeat scroll 0 0 #8a8a8a;
/*border: 2px solid #CCCCCC;*/
border-radius: 5px;
height: 50%;
margin: 0 auto;
padding: 25px;
position: relative;
width: 25%;
}
.gift-box {
display: none;
}
.mfp-content .gift-box {
display: block;
}
.su-lightbox > h2:hover {
cursor: pointer;
opacity: .6;
}
4. Последнем шагом вставляем в страницу или запись следующий код (где «contact-form-7 id=»765″ title=»Обратный звонок» — моя форма обратной связи (а должна быть Ваша!)):
<div class="gift-box">Ошибка: Контактная форма не найдена.
</div> заявка на консультацию
PS. Таким нехитрым образом, можно выводить формы обратной связи с эффектом Lightbox. При желании создайте кнопку и подключите к ней контактную форму, как например сделано у меня. Нажав на «заявка на консультацию» откроется форма обратной связи во всплывающем окне.