Всплывающая контактная форма для блога
Часто бывает нужно сделать эффектную всплывающую контактную форму, это может быть заявка, или излюбленная шняга в шапке сайта “Заказать обратный звонок”
Это можно сделать всего с помощью двух плагинов,
Easy FancyBoxи Contact Form
Ищется и устанавливается все как обычно из официального репозитория WordPress – секретов нету.
Перейдем к настройка,
Первым мы будем настраивать плагин Easy FancyBox
переходим Настройки – Медиафайлы и ставим галочку в Inline content (Советую убрать галку в Images, так как большенство тем уже имею свои всплывающие окна и свои стили, и дабы избежать конфликта убираем)
С этим плагином все. Переходим к созданию самой формы. Переходим в плагин Contact Form Создаем новую форму и добавляем какие нужно поля. В принципе плагин уже сам генерирует тестовую форму, некоторым ее вполне достаточно.
Все с настройкой плагинов мы закончили. Будем делать саму кнопку.
чтобы потестить, переходим в любую запись и вставляем этот код
|
1 2 3 4 5 6 |
<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> |
Если не посредственно в код шаблона то используем вот в этот код
|
1 2 3 4 5 6 |
<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> |
При вставке у нас будет просто ссылка вида Оставить заявку
чтобы придать красивости кнопки, можно дописать стили .button1 Этот код как пример вы вправе написать свой стиль, его следует скопировать и вставить в файл style.css вашей темы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.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; } |
Полный код будет выглядит так
Пример как это все работает можно посмотреть на сайте http://antiseptik.tv/ В шапке зеленая кнопка. Для тех у кого выдаётся ошибка «The requested content cannot be loaded. Please try again later» (это случается на последних версиях движка вордпресса) рекомендуется сменить класc в ссылке: меняем на:
Оставить комментарий