Контактная форма (Contact Form 7) во всплывающем окне с помошью Shortcodes Ultimate

Иногда требуется форму обратной связи (контактную форму) разместить во всплывающем окне (с эфектом lightbox).

Для этого можно использовать 2 плагина:

  • Contact Form 7 — отличный плагин из ТОПа, который постоянно обновляется и пользуется огромным спросом у разработчиком на CMS WordPress.
  • Shortcodes Ultimate — также отличный плагин, который имеет 5 звезд и более 3000 скачиваний.


Итак, в первую очередь нам необходимо скачать и активировать данные плагины. Как это сделать, неоднократно описано, поэтому не буду себя утруждать, а Вам порекомендую воспользоваться поиском в интернете.

После установки и активации нам необходимо:

1. Создать контактную форму: переходим в Contact Form 7 и нажимаем «добавить новую»

kontactform

2. Настраиваем ее под себя и сохраняем.
В моем случае форма имеет такой вид.

[contact-form-7 404 "Not Found"]

kontactform1

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;
}

shortcode

4. Последнем шагом вставляем в страницу или запись следующий код (где «contact-form-7 id=»765″ title=»Обратный звонок» — моя форма обратной связи (а должна быть Ваша!)):

<div class="gift-box">[contact-form-7 404 "Not Found"]</div>

 заявка на консультацию 

PS. Таким нехитрым образом,  можно выводить формы обратной связи с эффектом Lightbox. При желании создайте кнопку и подключите к ней контактную форму, как например сделано у меня. Нажав на «заявка на консультацию» откроется форма обратной связи во всплывающем окне.