Создание всплывающей формы Contact Form 7
Загрузка...
Нет ничего проще чем создавать всплывающие формы (Popup) на вашем сайте с помощью плагина EasyFancybox. Для этого устанавливаем и активируем его.
Далее аходим на страницу Настройки->Медиафайлы, и ищем следующий блок как на картинке. Отмечаем птичкой «inline-content», а так же устанавливаем ширину popup окна(У меня 320px).
Далее необходимо разобраться что именно будет отображаться в popup окне, и где именно будет расположена ссылка или кнопка.
Создание формы.
Я надеюсь вы знаете как создавать формы в Contact Form7, но если не знаете, вместе с установкой данного плагина автоматически создаётся Тестовая форма.
Нам нужно взять шорткод данной формы, и вставить его между HTML кодом
<div id="popup_form">[contact-form-7 id=»721″ title=»Контактная форма 1″]
</div>
Данный шорткод лишь пример, у вашей формы он будет с другим ID, и другим названием. Имейте это ввиду.
<a href="#popup_form" id="popup_button" class="fancybox-inline">Обратная связь</a> <div style="display:none" class="fancybox-hidden"> <div id="popup_form"> [contact-form-7 id="721" title="Контактная форма 1"] </div> </div>
Обратите внимание, что в качестве названия кнопки я указал «Обратная связь». Прежде чем оформлять дизайн кнопки, давайте определимся, где именно её отображать?
Есть несколько вариантов:
- Добавить данный код в уже созданный сайдбар на сайте.
- Добавить HTML код в текст записи или страницы
- Добавить HTML код в шаблон записи
- Создать новый сайдбар, и добавить php код в шаблон темы
- Создание шорткода
Первый вариант
Переходим на страницу Внешний вид->Виджеты, затем нажимаем HTML код. Выбираем сайдбар из списка, и нажимаем Добавить виджет. Обратите внимание, что сайдбары с названием «Под страницей» или «Под статьё», я создавал самостоятельно, поэтому у вас их не будет.
В текстовое поле вставляем наш код и нажимаем кнопу сохранить:
Вот в принципе и всё, если место где отображается кнопка вас устраивает, можно перейти к её оформлению. В моём случае она отобразилась под текстом страницы, именно там я добавил созданный ранее сайдбар.
Стандартное отображение меня совершенно не впечатляет, поэтому добавим нашей кнопке зелёный фон и белый текст, а так же закруглим её. Данный код можно использовать для всех последующих вариантов отображения кнопки.
.fancybox-inline {
border-radius: 10px;
background-color: #10da83;
padding: 10px;
color: #fff;
}Данный css код прописываем в файл стилей вашей темы. Для этого переходим в раздел Внешний вид->Редактор, и открываем файл style.css. В конец или начала файла пишем выше указанный код.
Уже лучше правда?
Но отображение самой popup формы жутковатое, поэтому нужно добавить отступ внутри popup окна, а так же уменьшить отступы между полями.
В тот же css файл добавляем следующий код:
/* Добавляем отступы */
#popup_form {
padding: 15px;
}
/*Убираем отступы у тэга p*/
#popup_form p {
padding: 0px;
margin: 0px;
}
/*У названия поля уменьшаем размер*/
#popup_form label {
font-size: 15px;
}
/*Уменьшаем высоту текстового поля*/
#popup_form textarea{
height:100px;
}
/*Добавим отступ после название поля и после него*/
#popup_form span{
padding-top:10px;
padding-bottom:10px
}
/*Устанавливаем одинаковую высоту текстовых полей и ширину в 100%*/
#popup_form input[type='text'],#popup_form input[type='email']{
height:30px;
width: 100%;
}
#popup_form textarea{width:100%}
У нас получится вот такая форма.
Второй вариант (Добавление кода в тело записи)
Данный вариант совершенно точно отобразит кнопку в том месте записи где вы пожелаете, но кнопку придётся добавлять на все страницы, что не совсем удобно.
Копируем код
<a href="#popup_form" id="popup_button" class="fancybox-inline">Обратная связь</a> <div style="display:none" class="fancybox-hidden"> <div id="popup_form"> Шоркод формы Contact Form 7 </div> </div>
И добавляем его в текст любой страницы или записи
Третий вариант (Добавить код в шаблон записи или страницы)
В каждом шаблоне WordPress, существует набор файлов:
— header.php (Шапка страницы)
— content.php (Сам контент — середина)
— footer.php (Низ страницы)
— single.php (отдельная запись)
— page.php (отдельная страница)
Нужно определиться где именно мы хотим добавить кнопку? Добавим её под записью(не путать со страницей)
Переходим в меню Внешний вид->Редактор и в правой колонке ищем шаблон с нашей записью, в моём случае это файл content-single.php, в вашем случае это может быть single.php. В каждом шаблоне могут быть разные файлы. В содержимом шаблона, для отображения текста записи существует функция the_content, я её выделил на рисунке.
Теперь нужно взять наш HTML код с виджетом (он чуть чуть изменён), и добавить его перед или после функции the_content (1 или 2)
<a href="#popup_form" id="popup_button" class="fancybox-inline">Обратная связь</a>
<div style="display:none" class="fancybox-hidden">
<div id="popup_form">
<?php echo do_shortcode('Шорткод с формой Contact Form 7');?>
</div>
</div>Обратите внимание, что я добавил функцию do_shortcode, которая обрабатывает шорткод и выводит полученный результат на экран.
Четвёртый вариант (Создание сайдбара).
С помощью данного способа мы сможем нашу кнопку показать на всех страницах и записях под или над самим текстом.
В первую очередь создадим САЙДБАР, для этого переходим в меню Внешний вид->Редактор, и в правой колонке выбираем файл function.php
Для регистрации нового сайдбара существует функция register_sidebar(). Пропишем данную функция в function.php, и жмём кнопку сохранить.
register_sidebar(array('name'=>'Под страницей или записью','id'=>'popup_button'));У функции register_sidebar есть различные параметры, в данном случае я добавил лишь название (name) и ID (popup_button).
Если всё сделано правильно, то на странице с Виджетами (Внешний вид-> виджеты) у нас появится новый виджет.
На новый виджет «Под страницей или записью» переносим HTML код (1), а затем в его содержимое добавляем код (2), и сохраняем (3).
<a href="#popup_form" id="popup_button" class="fancybox-inline">Обратная связь</a> <div style="display:none" class="fancybox-hidden"> <div id="popup_form"> Шорткод формы Contact Form 7 </div></div>
Теперь у нас есть виджет с кодом, и он никуда не денется, главное его не удалить. Осталось отобразить наш сайдбар в теле страницы. Как это сделать? Для этого существует функция dynamic_sidebar();
Опять заходим в меню Внешний Вид ->Редактор, и в файле function.php, нам нужно прописать код, который отобразит сайдбар в теле записи или страницы.
add_action('the_content','replace_content');
function replace_content($con){
ob_start();
dynamic_sidebar('popup_button');
$text=ob_get_contents();
ob_end_clean();
echo do_shortcode($con.$text);
}С помощью хука add_action мы фильтруем текст страницы или записи, и добавляем наш сайдбар dynamic_sidebar(‘popup_button’); в конец текста.
В принципе достаточно взять код dynamic_sidebar(‘popup_button’); и вставить его в любое место шаблона (header.php или footer.php), но обратите внимание, что данный код добавлять внутри <?php ?>
Если сайдбар нужно подключить вне php кода используем конструкцию
<?php
dynamic_sidebar('popup_button');
?>Надеюсь, что один из вариантов помог разобраться где именно показать кнопку, и ещё раз напомню для оформление кнопки достаточно добавить css код в файл стилей (styles.css)
.fancybox-inline {
border-radius: 10px;
background-color: #10da83;
padding: 10px;
color: #fff;
}
/* Добавляем отступы */
#popup_form {
padding: 15px;
}
/*Убираем отступы у тэга p*/
#popup_form p {
padding: 0px;
margin: 0px;
}
/*У названия поля уменьшаем размер*/
#popup_form label {
font-size: 15px;
}
/*Уменьшаем высоту текстового поля*/
#popup_form textarea{
height:100px;
}
/*Добавим отступ после название поля и после него*/
#popup_form span{
padding-top:10px;
padding-bottom:10px
}
/*Устанавливаем одинаковую высоту текстовых полей и ширину в 100%*/
#popup_form input[type='text'],#popup_form input[type='email']{
height:30px;
width: 100%;
}
#popup_form textarea{width:100%}Понятное дело, что подобным образом можно ни только создавать popup формы с обратной связью, но и форму с обратным звонком, плавающую кнопку на всех страницах сайтах, но это уже другая история.