Создание всплывающей формы Contact Form 7

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Нет ничего проще чем создавать всплывающие формы (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 формы с обратной связью, но и форму с обратным звонком, плавающую кнопку на всех страницах сайтах, но это уже другая история.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*