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

От Юрий Соколов Полезное для WooCommerce 0 Комментариев

Часто бывает нужно сделать эффектную всплывающую контактную форму, это может быть заявка, или излюбленная шняга в шапке сайта “Заказать обратный звонок”
Это можно сделать всего с помощью двух плагинов,
Easy FancyBoxи Contact Form

Ищется и устанавливается все как обычно из официального репозитория WordPress – секретов нету.
Перейдем к настройка,
Первым мы будем настраивать плагин Easy FancyBox
переходим Настройки – Медиафайлы и ставим галочку в Inline content (Советую убрать галку в Images, так как большенство тем уже имею свои всплывающие окна и свои стили, и дабы избежать конфликта убираем)

С этим плагином все. Переходим к созданию самой формы. Переходим в плагин Contact Form Создаем новую форму и добавляем какие нужно поля. В принципе плагин уже сам генерирует тестовую форму, некоторым ее вполне достаточно.

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

<a href="#contact_form_pop" class="fancybox">Оставить заявку</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">                
  [contact-form-7 id="35" title="Контактная форма 1"]
</div>
</div>

<a href="#contact_form_pop" class="fancybox">Оставить заявку</a>

[contact-form-7 id="35" title="Контактная форма 1"]

</div>

Если не посредственно в код шаблона то используем вот в этот код

<a 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="35" title="Контактная форма 1"]'); ?>
</div>
</div>

<a href="#contact_form_pop" class="fancybox">Контактная форма</a>

<?php echo do_shortcode('[contact-form-7 id="35" title="Контактная форма 1"]'); ?>

</div>

При вставке у нас будет просто ссылка вида Оставить заявку

чтобы придать красивости кнопки, можно дописать стили .button1 Этот код как пример вы вправе написать свой стиль, его следует скопировать и вставить в файл style.css вашей темы

.button1{text-decoration:none; text-align:center;
padding:2px 41px;
border:none;
  
font:20px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
background:#338023;
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  
  }.button1:hover{
padding:2px 41px;
border:none;
  
font:20px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#338023;
background-image: -moz-linear-gradient(top, #338023 0%, #1d4715 100%);
background-image: -webkit-linear-gradient(top, #338023 0%, #1d4715 100%);
background-image: -o-linear-gradient(top, #338023 0%, #1d4715 100%);
background-image: -ms-linear-gradient(top, #338023 0% ,#1d4715 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d4715', endColorstr='#1d4715',GradientType=0 );
background-image: linear-gradient(top, #338023 0% ,#1d4715 100%);  
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  
}.button1:active{
padding:2px 41px;
border:none;
font:20px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#338023;
background-image: -moz-linear-gradient(top, #338023 0%, #28611c 100%);
background-image: -webkit-linear-gradient(top, #338023 0%, #28611c 100%);
background-image: -o-linear-gradient(top, #338023 0%, #28611c 100%);
background-image: -ms-linear-gradient(top, #338023 0% ,#28611c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28611c', endColorstr='#28611c',GradientType=0 );
background-image: linear-gradient(top, #338023 0% ,#28611c 100%);  
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  
}

.button1{text-decoration:none; text-align:center;

padding:2px 41px;

border:none;

font:20px Arial, Helvetica, sans-serif;

font-weight:bold;

color:#ffffff;

background:#338023;

-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

}.button1:hover{

padding:2px 41px;

border:none;

font:20px Arial, Helvetica, sans-serif;

font-weight:bold;

color:#ffffff;

background-color:#338023;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d4715', endColorstr='#1d4715',GradientType=0 );

-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

}.button1:active{

padding:2px 41px;

border:none;

font:20px Arial, Helvetica, sans-serif;

font-weight:bold;

color:#ffffff;

background-color:#338023;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28611c', endColorstr='#28611c',GradientType=0 );

-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

}

Полный код будет выглядит так

 href="#contact_form_pop" class="fancybox button1">Оставить заявку</a>
<div style="display:none" class="fancybox-hidden ">
<div id="contact_form_pop">                
  [contact-form-7 id="35" title="Контактная форма 1"]
</div>
</div>

href="#contact_form_pop" class="fancybox button1">Оставить заявку</a>

[contact-form-7 id="35" title="Контактная форма 1"]

</div>

Пример как это все работает можно посмотреть на сайте http://antiseptik.tv/ В шапке зеленая кнопка.

Для тех у кого выдаётся ошибка «The requested content cannot be loaded. Please try again later» (это случается на последних версиях движка вордпресса) рекомендуется сменить класc в ссылке:

<a href=«#contact_form_pop» class=«fancybox»>Оставить заявку</a>

1	<a href=«#contact_form_pop» class=«fancybox»>Оставить заявку</a>

меняем на:

<a href=«#contact_form_pop» class=«fancybox-inline»>Оставить заявку</a>

1	<a href=«#contact_form_pop» class=«fancybox-inline»>Оставить заявку</a>

Блог