Contact form 7 всплывающее окно: обзор 3 плагинов и настройка

обзор 3 плагинов и настройка

В статье разберём как вставить 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.  Для любителей смотреть прикладываю видео обзор:

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

Как сделать всплывающее окно связи в WordPress

Skip to content

Практически всех владельцев сайтов интересует всплывающее окно связи. В WordPress такое окно можно создать с помощью 2-х плагинов и одного кода.
Первым делом необходимо добавить и активировать плагин Contact Form 7. С помощью этого плагина создают множество вариантов окна связи или даже заказа услуги (при хорошей фантазии). Здесь есть возможность добавить календарь с выбором даты, добавить таблицу списков и так далее.

Но сам плагин не создает всплывающего окна. Когда его активировать (вставить шоткод на нужную страницу) — появится поле для заполнения формы, которое занимает много места и смотрится некрасиво. Шоткод для вставки ( пример: [contact-form-7 404 «Не найдено»]) создается автоматически после создания новой формы связи и его необходимо вставить на страницу или виджет.

Для всплывающего окна надо загрузить еще один плагин — Eacy FancyBox. После активации плагин находится в разделе: меню-настройки-медиафайлы.

В настройках плагина необходимо выбрать нужные опции ( всплывание при нажатии на изображение или ссылку).

Плагин существует не только для создания всплывающих окон, но и для красивого оформления просмотра медиа-файлов на сайте. Если у вас включен Lightbox для просмотра изображений, плагин Eacy FancyBox создаст новое всплывающее окно поверх Lightbox и вам придется после просмотра закрывать сразу 2 окна. По этому, Lightbox лучше отключить. Далее можно оформить в фото-редакторе (например, photoshop) красивую надпись и даже изображение, потом загрузить его на свой сайт, скопировать url  и вставить этот url в следующий код:

ваше название формы связи» alt=» контактная форма » src=»ссылка на ваше изображение«>

Код можно вставить куда угодно: в хедер, футер, сайдбар, или на страницу.

Новый метод всплывающей формы связи

Дописываю 11 марта — 2018 год. Нашел более интересный способ создать обратную связь — кнопка со всплывающим окном. Делаю такие кнопки в двух визуальных редакторах страниц + Popup Maker + Contact form 7:

1. Elementor (бесплатный плагин для визуальной разбивки страниц на части с последующим внедрением разных элементов;
2. Fussion Builder от темы Avada — мега крутой плагин с контейнерами для страниц, но идет в комплекте с мультиконструктором

Установите на wordpress плагины контактной формы и всплывающего окна (popup maker и contact form 7). О форме связи есть уйма материалов, ее настроить проще простого. Опишу немного плагин попап мейкер. Ставится он стандартно. После установки виден в админке. Сначала создаем в нем новое всплывающее окно связи, настраиваем внешний вид, ширину и длину, потом вставляем шоткод нужной формы:

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

Вот как это выглядит в плагине визуального редактирования Elementor:

А вот еще вариант всплывающего окна обратной связи на базе конструктора Авада. Также есть кнопка, в которую вставляется шоткод:

Вид в админке:

Вообще то можно прописать и без визуальных конструкторов, используя прямое редактирование файлов css, но мне так удобнее и быстрее

А может вам надо кнопку быстрого заказа для woocommerce?

Обновление от 2021.05.14 — сама свежая информация о всплывающих окнах

Сейчас май 2021. На данный момент работаю с 2-мя темами — Avada (для сайтов), о которой я писал немного выше и Woodmart — для интернет-магазинов.

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

В теме Avada придумали свое всплывающее окно и даже свою форму связи без необходимости загружать плагины Contact Form 7 и Popup Maker.

Для этого надо вставить на страницу кнопку и специальный элемент Modal. Дать элементу название и прописать это название в кнопке, в разделе «Modal Window Anchor». Один элемент Modal с одной формой связи (одним содержимым) может работать на всех кнопках страницы. Его не надо ставить под каждой кнопкой. В случае, если надо разные формы связи (спросить, заказать, узнать цену и т. д.), тогда надо создавать еще один элемент Modal.

Вот видео:

Всплывающая форма связи в теме Woodmart на конструкторе WPBakery

В теме Woodmart, которая в паре с плагином Woocommerce дает возможность создавать потрясающие интернет-магазины, есть также свой элемент — Popup, в который можно вставить контактную форму 7 или другой контент.

Видео:

Page load link

Go to Top

Slick Popup: Contact Form 7 Popup Plugin — Плагин WordPress

• Детали
• отзывов
• Монтаж
• Развитие

Опора

Лучший всплывающий плагин WordPress для Contact Form 7

Наш плагин WordPress Popup поможет вам создать красивое и отзывчивое всплывающее окно с любой формой Contact Form 7 . Простая настройка стиля в соответствии с вашей темой

.

Идеально подходит для любого веб-сайта с одним продуктом или услугой . Разместите форму на всех страницах вашего сайта и будьте готовы получить больше потенциальных клиентов.

[Проверить демонстрацию] [Демо версии Pro]

Примечание: Плагин Contact Form 7 должен быть установлен и настроен для использования Slick Popup Lite.

Особенности плагина:

• Создать всплывающее окно для любой Контактная форма 7 Форма
• Используйте разные всплывающие окна для разных страниц
• 5 встроенных цветовых схем для всплывающего окна
• Импорт в один клик для демонстрационных форм
• Опции для стиля боковой кнопки
• Опции для стиля кнопки отправки

Другие преимущества:

• Привлекательно и красиво : Общая привлекательность всплывающего окна довольно
  прикольно и красиво .
• Несколько цветовых схем : 6 встроенных цветовых схем для легкого выбора
• 100% отзывчивость : Всплывающее окно отлично реагирует на все размеры экрана и хорошо работает на всех устройствах.
• Легкий и быстрый : Качество кода потрясающее, что делает его очень легким и молниеносным .
• Простота настройки : Простота настройки параметров делает его последним выбором после того, как вы его попробуете.
• Удобный для пользователя : Когда он загружается, пользователь находит его очень легко заполнить форму и запросы увеличивают .
• Совместимость с браузерами
  : * Тщательно протестировано со всеми основными браузерами * и их широко используемыми версиями.

Если у вас есть пользовательских ролей, постов или страниц – , это удовольствие для вас . Мы предоставили надежный набор фильтров , который может практически помочь вам изменить все настройки плагина на ходу.

Что еще?:

Премиум-версия — Slick Popup Pro имеет дополнительные функции:

• Несколько режимов активации — Автоматическое всплывающее окно, всплывающее окно при прокрутке, всплывающее окно при вводе
• 25+ анимационных эффектов
• 5 предопределенных макетов
• Несколько всплывающих окон на одной странице

Просмотр на CodeCanyon

• Настройте свое всплывающее окно в бэкэнде опций плагина.
• Изменение макета всплывающей формы доступно на всех страницах.
• Всплывающие эффекты.
• Положение боковой кнопки на небольших экранах.
• Страница Import CF7 Demo Forms
• Всплывающее окно с изображением
• Всплывающее окно с фоновым изображением

Самый быстрый способ установки плагина Slick Popup Lite:

Поиск «Slick Popup»

Нажмите «Установить сейчас»

Наконец, нажмите «Активировать плагин».

Если вы являетесь поклонником WordPress и предпочитаете делать что-то вручную, следуйте этим инструкциям:

1. Загрузите папку slick-popup в каталог /wp-content/plugins/
2. Активируйте плагин через меню «Плагины» в WordPress
3. Изменить настройки на странице параметров панели инструментов «Slick Popup»

Используйте class=’splite-showpopup’ для элемента, чтобы сделать его дескриптором для отображения всплывающего окна.

Могу ли я создать несколько всплывающих окон на одной странице?

Нет, в бесплатной версии этих функций нет. Пожалуйста, ознакомьтесь с демонстрацией этой функции в профессиональной версии.

Мы постарались подготовить код HTML/CSS для работы независимо от темы, но если у вас возникла проблема на вашем сайте, свяжитесь с нами для получения помощи. Электронная почта: [email protected]

Какая версия WordPress мне нужна?

Плагин будет работать в WP 3. 2+. Однако мы рекомендуем использовать последнюю версию.

Вы можете сделать это при добавлении/редактировании всплывающего окна в панели плагинов, у нас есть много вариантов настройки внешнего вида всплывающего окна.

Можно ли включить всплывающее окно только для выбранной страницы?

Да, вы можете сделать это в настройках плагина, просто установите флажок «Где показывать» в настройках плагина, чтобы сделать JS-конфликты в моей теме.

У меня есть сомнения, что мне делать?

Если у вас есть какие-либо сомнения или вопросы, прочитайте наш раздел часто задаваемых вопросов. Если это не поможет, вы можете обратиться в службу поддержки по адресу [email protected]

.

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

спасибо

Он очень прост в использовании, и я получил замечательную и быструю поддержку по некоторым вопросам на моем веб-сайте. Вы не будете разочарованы этим плагином и командой разработчиков

.

Просто и эффективно

Я получил очень быструю реакцию на мой запрос относительно функциональности on_click для изменения содержимого поля во всплывающей контактной форме 7. Работает очень хорошо для меня, большое спасибо!

Отличный плагин. Все, что мне нужно для моего сайта. Хороший функционал, отличная настройка, отзывчивость. И самое главное — практически мгновенная поддержка.

Прочитать 23 отзыва

«Slick Popup: Contact Form 7 Popup Plugin» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

Авторы

• Анкит Сингла
• Нихил Хохар
• Сави Гоял
• Танджот Сингх

1.7.13

• Протестировано и работает с WordPress 6.0
• Исправлено: Мелкие исправления
• Улучшено: CSS

1.

7.12

• Исправлено: Уведомление о пересмотре

1.7.11

• Исправлено: проблема с перелистыванием экрана

1.7.10

• Исправлено: проблема с прокруткой тела
• Исправлено: Расчетная ширина для ввода

1.7.9

• Удалить файлы V3 Redux-Framework и обновить до V4

1.7.8

• Исправление ошибок

1.7.7

• Обновленный Redux Framework

1.7.4

• Удалена платформа Codestar из-за проблем с совместимостью

1.7.3

• Добавлено: Bootstrap JS и CSS в ресурсах плагина
• Добавлено: jQuery jQuery v3.3.1 в ресурсы плагина (требуется для вкладок на странице поддержки)
• Обновлено: библиотека Redux и TGM

1.7.2

• Удалено: функция предоставления доступа по соображениям безопасности
• Другие мелкие улучшения

1.7.

1

• Протестировано и работает с WordPress 5.2
• Исправлены мелкие проблемы с намерением выхода
• Исправлены мелкие ошибки

1.7.0

• Улучшена скорость загрузки страниц меню в плагине
• Новые изображения для импорта стр.
• Исправлены мелкие ошибки
• Изменения в файле Readme

1.6.7

• Исправлены мелкие ошибки
• Изменения в файле Readme

1.6.6

• Улучшено: меню с добавлением подсказок.
• Добавлено: страница справки и поддержки.
• Протестировано и работает с WordPress 5.1
• Мелкие исправления ошибок

1.6.5

• Улучшено: меню с добавлением подсказок.
• Добавлено: перенаправление после закрытия.
• Добавлено: автоматическое закрытие после успешной отправки формы.
• Протестировано и работает с WordPress 5.0.3
• Мелкие исправления ошибок

1.

6.4

• Протестировано и работает с WordPress 5.0.1
• Мелкие исправления ошибок

1.6.3

• Добавлено: Внешний селектор
• Мелкие исправления ошибок

1.6.2

• Улучшено: удобное всплывающее меню
• Мелкие исправления ошибок

1.6.1

• Мелкие исправления ошибок

1.6.0

• Улучшено: всплывающее окно удаления
• Улучшено: Импорт демо
• Добавлено: поддержка фонового изображения
• Добавлено: Переменная высота и ширина всплывающего окна
• Добавлено: уведомления администратора
• Мелкие исправления ошибок

1.5.2

• Исправление ошибок

1.5.1

• Исправление ошибок

1.5.0

• Импорт форм для всплывающих окон
• Удаление электронной почты удалено

1.4.4

• Мелкое исправление

1.

4.3

• Добавлена ​​функция Pro
• Выберите определенные страницы для скрытия/отображения всплывающего окна

1.4.2

• Мелкое исправление в настройках плагина

1.4.1

• Испытано с WP 4.7 и CF7 4.6
• Ajax Loader обновлен для совместимости с CF7 4.6

1.4.0

• Добавлено: Особенности анимации (5 анимаций)
• Добавлено: параметры для изменения стилей «Фон формы»
• Добавлено: параметры для изменения стилей «Боковой кнопки»
• Добавлено: параметры для изменения стилей «кнопки отправки»
• Добавлено: раздел «Импорт демонстраций» добавлен на панель параметров
• Добавлено: 2 готовых контактных формы 7 форм для импорта
• Улучшено: сообщения об ошибках (недопустимая подсказка) контактной формы 7
• Улучшено: Возможность создания всплывающего окна одного цвета
• Улучшено: Ajax Loader всплывающего окна

1.

3.6

• Ошибка: Исправлена ​​ошибка, из-за которой положение боковой кнопки вызывало дополнительный интервал

1.3.5

Ошибка: исправлена ​​проблема с положением боковой кнопки «слева» (сообщается пользователями)

1.3.4

• Ошибка: исправлена ​​ошибка переопределения панели параметров

1.3.3

• Ошибка: Исправлена ​​ошибка при обновлении плагина

1.3.2

• Ошибка: исправлено уведомление администратора, когда контактная форма 7 неактивна

1.3.1

• Мелкие исправления

1.3

• Основной релиз: плагин полностью изменен на более современный
• Структура кода сильно изменена и улучшена

1.2.6.2

• Обновлено: теги и проверенная версия WordPress

1.2.6.1

• Исправлено: кнопка отправки формы по центру текста

1.2.6

• Исправлено: Внешний селектор для активации всплывающего окна имел ошибку типа.

1.2.5

• Добавлено: Внешний селектор для активации всплывающего окна. Селектор по умолчанию: .popup-activator

1.2.4

• Добавлено: уведомление о плагине Slick Popup в настройках плагина

1.2.3

• Фиксированное расположение z-индекса боковой кнопки

1.2.2

• Улучшенная палитра цветов в настройках плагина.
• Номер версии в заголовке плагина на странице настроек.

1.2.1

• Опция боковой кнопки: добавлен текст «Свяжитесь с нами»

1.2.0

1.2.0

• Боковая кнопка Улучшено использование текста, а не изображений
• Положение боковой кнопки слева на небольших экранах

1.0

• Страница улучшенных опций
• Несколько других тестов и импровизаций

0.1

• Первая загрузка в WordPress

Служба поддержки

Проблемы, решенные за последние два месяца:

1 из 3

Посмотреть форум поддержки

Пожертвовать

Хотите поддержать продвижение этого плагина?

Пожертвовать этому плагину

Как добавить всплывающее окно контактной формы в WordPress

Вы ищете простой способ показать всплывающее окно контактной формы на своем веб-сайте WordPress?

Контактные формы отлично подходят для общения с вашими посетителями. Разместив их во всплывающем окне, вашим клиентам будет еще проще связаться с вами по поводу ваших продуктов и услуг.

В этой статье мы покажем вам, как добавить всплывающее окно контактной формы в WordPress.

Зачем использовать всплывающее окно контактной формы?

Каждый веб-сайт или блог WordPress нуждается в контактной форме, чтобы пользователи могли обращаться с вопросами, отзывами или проблемами.

Однако, если ваша контактная форма находится только на одной странице, людям будет трудно ее найти.

В результате ваши пользователи могут покинуть ваш сайт, не связавшись с вами, и вы можете потерять потенциальных клиентов и конверсии.

Всплывающее окно контактной формы помогает решить эту проблему, позволяя вашим посетителям быстро просмотреть форму, нажав кнопку, чтобы они могли связаться с вами с любой страницы, на которой они находятся.

Это помогает удерживать людей на вашем сайте, так как им не нужно покидать страницу, которую они просматривают. Вы также можете расширить свой список адресов электронной почты, используя всплывающее окно контактной формы.

Тем не менее, вам сначала нужно создать контактную форму, а затем поместить ее во всплывающее окно для отображения на веб-страницах. Не волнуйтесь, мы поможем вам создать контактную форму и добавить ее во всплывающее окно в WordPress.

• Как создать контактную форму WordPress
• Добавить всплывающее окно контактной формы на ваш сайт WordPress

Как создать контактную форму WordPress

Во-первых, вам нужно выбрать плагин контактной формы WordPress.

Существует множество бесплатных и платных вариантов, но мы рекомендуем использовать WPForms, так как это лучший вариант.

WPForms — это удобный для начинающих плагин форм, предлагающий конструктор перетаскивания, который позволяет создавать контактную форму в WordPress всего за несколько кликов. Он также предлагает готовые шаблоны форм и множество параметров настройки.

В этом руководстве мы будем использовать версию WPForms Lite, поскольку она бесплатна и предлагает шаблон контактной формы.

Однако вы также можете использовать премиум-версию, чтобы разблокировать дополнительные функции. Например, WPForms Pro предлагает несколько шаблонов форм, дополнительные параметры настройки, мощные надстройки и позволяет собирать онлайн-платежи.

Для начала вам сначала необходимо установить и активировать плагин WPForms Lite. Если вам нужна помощь, ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.

После активации плагина вы готовы создать контактную форму. Все, что вам нужно сделать, это перейти к WPForms »Добавить новый с панели управления WordPress.

После этого WPForms попросит вас ввести имя для вашей формы и выбрать шаблон.

Выберите шаблон «Простая контактная форма».

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

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

WPForms также позволяет настраивать каждое поле в контактной форме.

Например, если вы нажмете на поле «Имя», вы получите различные параметры, такие как изменение его метки и формата. Вы даже можете добавить описание или пометить любое поле как обязательное.

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

В общих настройках вы можете переименовать форму, изменить текст кнопки отправки, включить защиту от спама и многое другое.

Далее вы можете перейти к опции настроек уведомлений. По умолчанию уведомления отправляются на адрес электронной почты администратора, настроенный на вашем веб-сайте WordPress.

Однако вы можете отправить уведомление из контактной формы на любой адрес электронной почты. Если вы хотите получать уведомления по нескольким электронным письмам, разделите каждое письмо запятой.

Для строки темы электронной почты WPForms использует имя формы, которое вы ввели ранее. Однако вы можете отредактировать текст строки темы по своему желанию.

После этого нажмите «Подтверждения».

WPForms будет использовать «Сообщение» в качестве типа подтверждения по умолчанию, когда ваши посетители увидят сообщение с благодарностью при отправке формы.

Однако вы можете изменить тип сообщения и перенаправить пользователей на определенную страницу вашего веб-сайта при заполнении формы.

Когда вы закончите создание контактной формы, не забудьте нажать кнопку «Сохранить» в правом верхнем углу, чтобы сохранить изменения.

Затем нажмите кнопку «Встроить» в верхнем углу рядом с кнопкой «Сохранить».

Когда появится новое окно, выберите опцию «использовать короткий код».

WPForms отобразит короткий код для вашей контактной формы, как только вы нажмете на ссылку. Мы предлагаем оставить эту вкладку/окно открытыми, так как они понадобятся вам на следующем шаге, где мы покажем вам, как добавить контактную форму во всплывающее окно.

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

Мы рекомендуем использовать OptinMonster, так как это лучший плагин для лидогенерации и оптимизации конверсии для WordPress. Более 1,2 миллиона веб-сайтов используют этот мощный инструмент.

В этом уроке мы будем использовать версию OptinMonster Pro, которая включает шаблон без помех и расширенные правила отображения для отображения всплывающего окна.

Сначала вам необходимо зарегистрировать учетную запись на веб-сайте OptinMonster. Просто зайдите на веб-сайт и нажмите кнопку «Получить OptinMonster сейчас».

Далее вам необходимо установить и активировать бесплатный плагин OptinMonster на вашем сайте. Для получения более подробной информации следуйте нашему руководству по установке плагина WordPress.

После активации плагина вы увидите мастер установки. Идите вперед и нажмите кнопку «Подключить существующую учетную запись».

Появится всплывающее окно, и OptinMonster попросит подключиться к вашей учетной записи.

Просто нажмите кнопку «Подключиться к WordPress».

Теперь, когда ваша учетная запись подключена, нужно создать новую кампанию для всплывающего окна контактной формы.

Вы можете начать, перейдя по ссылке OptinMonster » Кампании и нажав кнопку «Создать свою первую кампанию».

На следующем экране вам нужно будет выбрать тип кампании.

Поскольку мы создадим всплывающее окно контактной формы, выберите «Всплывающее окно» в качестве типа кампании.

После этого прокрутите вниз, чтобы выбрать шаблон для всплывающего окна. OptinMonster предлагает более 75 привлекательных дизайнов всплывающих окон с высокой конверсией.

Вы можете выбрать любой понравившийся шаблон. Затем введите название своей кампании и нажмите кнопку «Начать создание».

Теперь, используя конструктор перетаскивания в OptinMonster, вы можете редактировать свой шаблон всплывающего окна.

Теперь в меню слева от вас появятся различные блоки. Просто перейдите к блоку «WPForms» и перетащите его на свой шаблон.

После этого вам нужно щелкнуть раскрывающееся меню «Выбор формы» в настройках блока в левом меню и выбрать параметр «Добавить шорткод вручную».

Отсюда введите шорткод контактной формы WPForms в блоке. Чтобы найти код, вернитесь к настройкам встраивания WPForms и скопируйте шорткод.

Важно отметить, что вы не увидите предварительный просмотр контактной формы в шаблоне при добавлении шорткода.

Это нормально, так как ваша контактная форма появится после публикации кампании.

Затем вы можете перейти на вкладку «Правила отображения» вверху, чтобы выбрать, когда всплывающее окно должно появляться на вашем веб-сайте.

По умолчанию OptinMonster установит его, когда время на странице составляет 5 секунд, и всплывающее окно появится на любой странице.

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

Мы предлагаем использовать таргетинг MonsterLink (On Click). Таким образом, ваше всплывающее окно будет появляться, когда посетитель нажимает ссылку или кнопку.

После этого вы можете нажать кнопку «Копировать код MonsterLink» и добавить его к любому тексту, изображению или кнопке на вашем веб-сайте.

Для получения более подробной информации вы можете следовать нашему руководству для начинающих о том, как добавить ссылку в WordPress.

Ваш код MonsterLink будет выглядеть в HTML следующим образом:

Подпишитесь сейчас!
 

Однако, чтобы вставить ссылку в запись блога WordPress или на страницу, вам просто нужен URL-адрес из кода.

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/
 

Предположим, вы хотите добавить кнопку «Свяжитесь с нами» на свой сайт. Вы можете начать с редактирования любой страницы или публикации и перейти в редактор WordPress. Затем нажмите знак плюса (+) вверху и добавьте блок «Кнопки».

После этого вы можете ввести текст для своей кнопки, а затем щелкнуть значок ссылки.

Теперь добавьте URL-адрес MonsterLink к вашей кнопке.

После этого опубликуйте свой пост или страницу WordPress. Теперь MonsterLink будет добавлен к вашей кнопке «Связаться с нами».

Затем вернитесь к своей кампании OptinMonster, чтобы завершить настройку.

Выбрав MonsterLink в качестве цели и отобразив его на любой странице, вы можете нажать кнопку «Далее» внизу.

На следующем экране вы увидите параметры для изменения типа просмотра кампании, добавления анимации MonsterEffect и воспроизведения звука при появлении всплывающего окна.

Продолжайте и нажмите кнопку «Далее», когда вы будете удовлетворены настройками.

После этого OptinMonster покажет сводку настроек вашего правила отображения.

Это помогает убедиться, что вы правильно настроили, когда ваши кампании будут появляться на вашем веб-сайте.

Теперь вы готовы запустить свою кампанию и опубликовать всплывающее окно контактной формы. Для этого перейдите на вкладку «Опубликовать» вверху.

Затем вы можете нажать кнопку «Предварительный просмотр» перед публикацией вашей кампании. Это покажет вам предварительный просмотр того, как ваше всплывающее окно будет выглядеть на вашем веб-сайте.

Когда вы будете довольны внешним видом своей кампании, измените «Статус публикации» с «Черновик» на «Опубликовать».

Вы также можете выйти из конструктора кампаний OptinMonster и проверить статус своей кампании на панели управления WordPress.

Просто щелкните раскрывающееся меню «Статус» справа и измените статус с «Ожидание» на «Опубликовано».

Не забудьте сохранить изменения.

Затем перейдите к кнопке «Свяжитесь с нами», которую вы создали ранее с помощью MonsterLink, и увидите всплывающее окно контактной формы в действии.

Мы надеемся, что эта статья помогла вам узнать, как добавить всплывающее окно контактной формы в WordPress. Вы также можете ознакомиться с нашим руководством о том, как выбрать лучший конструктор сайтов, или с нашим сравнением лучшего программного обеспечения для расчета заработной платы для малого бизнеса.