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

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

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

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

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

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

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

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

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

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

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

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

class="otkryt-modelnoe"

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

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

Теперь вывести на сайте всплывающее окно легче легкого, ведь появился плагин My Popup WPShop.

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

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