Формы от contact form 7 во всплывающем окне, как сделать при помощи плагинов и других инструментов

В статье разберём как вставить contact form 7 во всплывающее окно. Скажу сразу принцип построен на связке с плагином Popup maker, который идеально совместим и не изменяет внешнего вида первого. Начнём с пошагового разбора с детальными инструкциями.

Создание новой формы contact form 7

Для начала создадим первый проект в contact form 7, с тремя полями имя, телефон и почта. Стандартный набор подходящий для сбора контактных данных в обратной связи. Сделали проект, теперь надо скопировать либо записать шорт код. С ним будем работать детальнее.

создание новой формы contact form 7

Как сделать интеграцию в PopupMaker

Устанавливаем PopupMaker, стандартно через административную панель поиском, либо скачиваем отсюда. После установки появиться в меню wordpress новый пункт, заходим и вводим новое модальное окно.

Создание всплывающего окна в Popup Maker

  1. Путь к добавлению нового всплывающего окна
  2. Название, оно не будет отображаться на сайте
  3. Заголовок попапа, если не нужно, то не пишем
  4. Шорт код из contact form 7

Далее спускаемся вниз. Нужно определить при каких условиях будет всплывать попап.

Popup maker триггеры

  1. Раздел Триггеры
  2. Нажимаем кнопку Добавить
  3. Выбираем один из двух триггеров, по нажатию какого либо элемента (открыть) или авто открытие, то есть по истечению какого либо времени.
  4. Добавляем

Выбрав “открыть”, появятся следующие опции. Задаём уникальный класс, я сделал .otkryt-modelnoe, с ним работаем дальше.

CSS класс для открытия модального окна

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

Теперь добавим класс к любому элементу в статье, например к ссылке на главной странице. Создадим новую запись, в ней вставим ссылку с прикреплением класса. Как видим на картинке, сначала во вкладке “визуально” создали ссылку, после перешли в текст и туда записали комбинацию.

class="otkryt-modelnoe"

привязываем css класс к элементу

Обновили или сохранили запись, обязательно проверяем работу на странице блога. Нажимая на “текст ссылки” отображается всплывающий элемент, а в нём наша форма созданная в contact form 7, оформление fancybox выставил.

пример работы всплывающего окна

Для данной операции подойдут плагины FancyBox и Easy Modal, но с ними операция боле сложная, приходиться писать код.

Всплывающее окно после заполнения и отправки

Разберём другой случай, когда модальное окно нужно после заполнения и отправки, то есть по достижении нажатия на кнопку “отправить”. С данной целью справиться плагин Popup for Contact Form 7, располагается здесь. Устанавливаем и активируем, после появится новый раздел.

Модальное окно только при отправке

  1. Раздел General Settings
  2. Основными настройки, выставляете галочками к каким проектам добавить постоповещение, настраиваем размеры окна (длину, ширину), а так же автоматическое закрытие, в нашем случае 5000 миллисекунд
  3. Сохраняем.

В Popup Text пишем содержимое, существует возможность применения стандартного редактора wordpress. В Popup Design делаем внешний вид, цвет шрифта и заднего фона. После сохранения проверяем работу.

пример работы

Инструмент минимален, для более глубокой разработки и настройки внешнего вида понадобятся небольшие знания css. Отмечу наличие способов без применения плагинов при помощи скриптов, применяя хуки contact form 7, но не советуем их брать, ввиду сложного применения, и не всегда корректного поведения.

Таким не хитрым методом мы смогли создать модальное всплывающее окно, а в нём работающая по всем правилам, например, обратная связь или звонок.

P.S.  Для любителей смотреть прикладываю видео обзор

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Валентин Лифанов
С 2008 года изучаю wordpress, веду блоги, пишу статьи. Бывает подрабатываю создавая сайты на этом удивительном движке.