Contact form 7 всплывающая форма: Всплывающая форма обратной связи wordpress: настройка за 5 минут

Всплывающая форма обратной связи wordpress: настройка за 5 минут

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

• Они постоянно обновляются
• Профессиональные разработчики
• У инструментов есть интеграция друг с другом
• На русском языке

Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

Contact form 7 в поиске

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

Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Заготовка под обратную связь

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Пример создания поля Имя

1. Выбираем Текст
2. Если обязательно для заполнения то отмечаем галочкой
3. Уникальный идентификатор, оставляем без изменения
4. Значение, которое отображается по умолчанию, что нужно ввести
5. Если отметить чекбокс, то название поля будет внутри
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Код поле добавления имени

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Панель инструментов

Делаем по аналогии, что получилось.

Готовый код

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Сохранение настроек

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

Вкладка Письмо

1. Вкладка письмо
2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
3. Тема отображается когда письмо придёт на почту
4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

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

Копируем шорткод

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

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Popup Maker

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

Название и добавление кода

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

Триггер

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

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

Прописываем класс

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

Остальные параметры

Не забываем нажать на опубликовать.

Публикуем

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

В запись загрузил изображение с помощью медиафалов.

Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Добавляем class к элементу

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Рабочая всплывающая форма

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать “Редактировать как HTML”, а дальше по старой схеме.

Редактирование HTML в Gutenberg

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.

Fancy box

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

<a href="#form_popup1">Отправить сообщение</a>
<div>
<div>
[contact-form-7 title="Всплывающая форма"]
</div>
</div>

Вставка кода в виджет

По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test

Вносим ID в тригеры

Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.

Выводим параметры элемента в elementor

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

Показ формы связи через elementor

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

• Устанавливаем оба плагина WordPress
• В Contact form 7 создаем новую форму, настраиваем ее по инструкции
• Добавляем шорткод в новый попап Popupmaker
• Настраиваем отображение окна
• Привязываем класс к любому элементы на сайте
• Проверяем работу

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

Пожалуйста, оцените материал: Мне нравится18Не нравится3

Всплывающее окно после успешной отправки формы Contact Form 7

Как в плагине Contact Form 7 сделать всплывающее уведомление об успешной оправке письма? Рассмотрим два бесплатных плагина “Popup for Contact Form 7” и “Popup Message Contact Form 7”.

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

Смотреть видео

• Вступление.
• Popup for Contact Form 7: общие настройки, указываем текст и внешний вид формы.
• Дружит ли “Popup for Contact Form 7” с плагином “Art WooCommerce Order One Click”? – Нет, не дружит!
• Popup Message Contact Form 7: текст, ширина окна и шаблон формы.
• Дружит ли “Popup Message Contact Form 7” с плагином “Art WooCommerce Order One Click”? – Да, дружит!
• Выводы.

Contact Form 7 ★ Всплывающее уведомление об успешной оправке письма

Смотреть это видео на YouTube.
Подпишитесь на канал InwebPress, чтобы узнать больше о создании и настройке сайтов!

Ссылки

Contact Form 7

Popup for Contact Form 7

Popup Message Contact Form 7

Popup for Contact Form 7

Самый простой и быстрый способ реализации данной задачи, является использование плагина Popup for Contact Form 7.

Плагин Popup for Contact Form 7 является бесплатным и устанавливается как все плагины: Админка – Плагины – Добавить новый. В поле поиска вводим название “Popup for Contact Form 7” и после отображения плагина выполняем его установку и активацию.

После активации плагина переходим в его настройки: Contact Form 7 – Popup Settings.

Настройки плагина

Настройки плагина состоят из 3 вкладок с простыми параметрами.

General Settings (Общие настройки)

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

Указываем размеры окна. Не забываем указывать размеры с единицами измерения (px, %).

Указываем продолжительность отображения окна. Например, 5000 – это 5 сек., после которых окно автоматически закроется.

Popup Text (Текст)

Указываем текст и изображение для нашего окна.

Popup Design (Внешний вид окна)

Указываем цвет текста, фоновый цвет или фоновое изображение для окна.

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

Примечание: Эти плагины не работают с плагином By one click WooCommerce.

Как сделать всплывающую popup форму contact form 7 на WP

Очень длинный заголовок получился у данной статьи чего я не очень люблю, но именно по такому запросу “Как сделать всплывающую popup форму contact form 7 на wordpress”, а точнее с такой проблемой мне пришлось столкнуться при создании очередного сайта на заказ.

Казалось бы ничего сложного, но в моем случае нельзя было применять плагин “Elementor” и другие конструкторы страниц. Именно поэтому я по привычке установил плагин Contact Form 7, и только потом понял, что он работает по шорткоду в любом месте сайта, но уже в открытом виде, а мне было необходимо запускать форму обратной связи при клике на изображение.

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

Всплывающая форма обратной связи на wordpress за 5 минут

Для решения этой проблемы, нам необходимо использовать два плагина в связке, это “Contact Form 7” и “Popup maker”.

Преимущества:

• Плагины на русском языке.
• Постоянно обновляются (кстати для CF7 – это не всегда хорошо, ниже по тексту решим и эту проблему).
• Плагины хорошо интегрируются между собой.
• Результат быстрый и удобный.

А теперь, разберем пошагово, как делать попапы (всплывающие окна) с встроенными формами.

Устанавливаем и настраиваем CF7

Сначала устанавливаем плагин Contact Form 7, через раздел “Плагины-Добавить новый” и активируем его, соответствующей кнопкой.

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

Удалите все лишнее, оставляя только теги <label></label> и кнопку “submit” – это кнопка для отправки данных. В верхнем меню есть несколько кнопок нас интересуют кнопки нужных нам полей например «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку “Текст”.

Пример создания поля “Имя”:

1. Выбираем кнопку “Текст”;
2. Если обязательно для заполнения то отмечаем галочкой;
3. Уникальный идентификатор, оставляем без изменения;
4. Значение, которое отображается по умолчанию, в нашем случае это “Ваше имя”;
5. Если отметить чекбокс, то название поля будет внутри;
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления;
7. Нажимаем вставить тег.

Далее помещаем получившийся шорткод между тегами <label>сюда вставляем код</label>, должно получится так:

Тоже самое делаем и с остальными полями, нажимаем “Создать тег” и помещаем получившиеся шорткоды между тегами <label></label>. В итоге у нас должна получиться вот такая форма. В самом верху шаблона я прописал обычный текст и разместил его по центру.

Нажимаем “Сохранить” и далее открываем вкладку “Письмо”.

1. Копируем шорткоды в область “Тело письма”, именно эта информация будет приходить при заполнении формы к вам на почту. Дописал напротив каждой переменной название, чтобы обозначить какая информация будет поступать на почту.
2. В разделе “Кому” указываем емейл, на который получать письма с формы, по умолчанию берется емейл администратора сайта на WordPress. Можете написать любой.
3. Тема отображается, стандартно, когда письмо придёт на почту.
4. Дополнительные заголовки советую стереть, толку от этого нет, а ошибки возникать могут.

Нажимаем внизу “Сохранить” и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название формы, копируем в отдельный документ шорткод для того чтобы не искать его потом и нажимаем еще раз “Сохранить”.

Шорткод имеет, примерно, следующий вид: [contact-form-7 id=”197″ title=”Название формы”]

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

Теперь нам необходимо перейти к плагину “Popup maker”.

Устанавливается стандартно из админ панели WordPress, вводим в поиске по плагинам “Popup Maker”, устанавливаем и активируем.

Теперь также в левом меню администратора, у нас должен появиться одноименный раздел, нажимаем “Добавить всплывающее окно”. Даем имя всплывающему окну, название можно не прописывать (по-желанию), так как оно будет отображаться на сайте. Помещаем в текстовое поле шорткод скопированный ранее, после создания формы обратной связи.

Далее спускаемся ниже и видим меню настройки всемогущего Popup Maker. Сейчас нас интересует пункт “Триггеры”, открываем вкладку и нажимаем на кнопку “Добавить новый триггер”.

Обычно обратная связь появляется по нажатию кнопки, или как в моем случае, по клики на изображение, поэтому из списка выбираем параметр “Нажмите “Открыть”” и жмем “Добавить”. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.

С куки будьте осторожны, можно настроить их так, что форма откроется для посетителя всего один раз, и если он не намерен оставлять данные прямо сейчас, то второго шанса у него не будет. Хоть затыкайся. Поэтому если нам надо, чтобы форма всегда работала при клике, не выставляйте Cookies.

Далее у вас появится новое окно, пропишите в него class, он может быть любым, но обязательно с точкой в начале, я написал .audit. Помним про cookie, для триггера работающего при нажатии куки не нужны, выбираем “Добавить” или “Обновить” если создаете не в первый раз.

Далее, ознакомьтесь с другими вкладками, настройте внешний вид, анимацию и другие параметры появления, на сайте над которым я работал, я выбрал “Центр popup”, а потом зашел в раздел “Отображение-Внешний вид” и нажал “Настроить эту тему” и настроил тему согласно технического задания.

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

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

Тег <img> у вас должен приобрести вид <img class=”alignnone size full wp-image-хх ваш класс” src=”http://вашсайт/wp-content/uploads/2021/01/картинка.png” alt=”” class=”wp-image-xx”/>

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

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

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

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

Видео для тех, кому так удобнее воспринимать.

Для этой ели я всегда использую простенький плагин, который носит название “CF7 Customizer”, скачать вы его также можете через раздел “Плагины-Добавить новый”.

После активации плагина, перейдите в раздел “Внешний вид – Настроить”, это стандартная страница настройки вашей темы(шаблона). Там вы найдете вкладку “CF7 Customizer”.

Теперь откройте страницу с вашей формой. И поиграйте с настройками. Плагин очень удобный так как имеет визуальный редактор CSS классов. Все изменения в моменте принимают нужный вид.

Если у вас настроена форма в Popup, то для того чтобы вам был доступен визуальный редактор, создайте страницу или статью, разместите туда шорткод вашей формы, которую вы всегда сможете найти в разделе “Contact Form 7 – Контактные формы”, сохраните и откройте эту страницу/статью для редактирования с помощью данного плагина!

У меня получилась вот такая всплывающая форма.

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

Если необходимо придать разный внешний вид, то есть разные стили формам Contact Form 7, то я рекомендую использовать плагин “Contact Form 7 Style“, он удобен тем, что при стилизации формы, вы можете выбрать какой форме, какие стили прописать и соответственно придать индивидуальный вид каждой по отдельности.

А также, заметки ради, оставлю здесь название еще одного плагина стилизации широкого формата с визуальным редактором “Contact Form 7 Styler for Divi“.

Сontact form не отправляет письма

Помните в начале статьи я писал о том, что для “Contact form” не всегда хорошо, что он обновляется. Проблема заключается в том, что после обновления с версии 4.7 на некоторых хостингах возникают проблемы, связанные с отправкой сообщений.

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

Проверьте какая версия Contact Form 7 у вас сейчас установлена. Если у вас стоит версия 4.7 или более ранняя, то этой проблемы у вас быть не должно. А если у вас стоит версия 4.8 и выше, то обратите особое внимание на работу форм на вашем сайте.

Если же у вас на сайте все-таки обнаружилась проблема с отправкой писем с Contact Form 7, то для её решения вам необходимо будет сделать откат плагина до версии 4.7.

Делать мы это будем при помощи специального плагина, который называется WP Rollback.

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

После его установки и активации у вас в разделе “Плагины – Установленные”, возле названия каждого плагина появляется ссылка “Rollback“.

Найдите такую ссылку напротив плагина Contact Form 7 и нажмите на нее. Теперь в списке найдите версию 4.7, выберите ее и в самом низу нажмите на кнопку “Rollback”. Подтвердите действие.

После переустановки плагина, вам необходимо его снова активировать. И теперь проверить работоспособность отправки писем.

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

На этом у меня все. Статья получилось длинной как и само заголовок к ней. Надеюсь что она была для вас полезной и вы нашли здесь ответы на свои вопросы. Комментарии внизу если что ) пишите.

Как создать всплывающую форму контактов в WordPress

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

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox и Contact Form 7.

1. Первым делом устанавливаем плагины Contact Form 7 и Easy FancyBox.

Установка плагина WordPress

2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.

Contact Form 7

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

Правим страницу в WordPress

Форма обратной связи

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:

<a href="#contact_form_pop">Contact Us</a>

<div>
    <div>
        [contact-form 1 "Contact form 1"]
    </div>
</div>

Easy FancyBox HTML

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

Всплывающая форма контактов в WordPress

VN:F [1.9.22_1171]

Rating: 2.7/5 (12 votes cast)

Всплывающая форма обратной связи для WordPress

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

1. Для чего нужна всплывающая форма обратной связи?

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

Во вторых, всплывающий эффект достаточно интересно выглядит;

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

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

 

Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

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

 

2. Устанавливаем Contact Form 7

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

Копируем название плагина Contact Form 7

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

Либо сразу в строку поиска ввести название плагина и нажать Enter.

Нажимаем на кнопку «Установить» и теперь активируем его.

 

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Нам нужно перейти к стандартным настройкам медиафайлов WordPress.

Заходим в пункт меню «Настройки» => «Медиафайлы».

Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.

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

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

5. Выводим форму обратной связи во всплывающее окно.

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

Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»

И в поле «Текст» вставляем следующий фрагмент кода:

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться

6. Редактируем фрагмент кода вывода формы обратной связи.

Вставляем этот шоткод в код виджета вместо [ВАШ ШОТКОД] Вместо ОТПРАВИТЬ СООБЩЕНИЕ вы можете написать любой другой текст. Это текст высветится на кнопке, по щелчку на которой будет открываться всплывающая форма обратной связи. Сохраняем настройки, переходим на наш сайт, обновляем страниц, и нажимаем на нашу ссылку. Вот что у меня получилось:

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

7. Стилизация кнопки

Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:

/***Стили для формы обратной связи****/ .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8; /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff; /*цвет текста*/ text-decoration:none; /*убрать подчёркивание у ссылки*/ width:200px; /*ширина кнопки*/ margin:auto; /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /**Плавное появление тени у кнопки при наведении**/ .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/***Стили для формы обратной связи****/   .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8;  /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff;  /*цвет текста*/ text-decoration:none;  /*убрать подчёркивание у ссылки*/ width:200px;  /*ширина кнопки*/ margin:auto;  /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }   /**Плавное появление тени у кнопки при наведении**/   .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000;   -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

Посмотрим, что у нас получилось:

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

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

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

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

Желаю вам успехов в создании такой формы и до встречи в следующих статьях.

 

С уважением Юлия Гусарь

Контактная Форма WordPress | Топ-7 Лучших Плагинов

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

Контактная форма создаст лучший пользовательский интерфейс на вашем сайте. Вот как:

• Доступность
  Ваш веб-сайт работает круглосуточно и без выходных, и ваши клиенты приходят со всего мира. Не позволяйте им ждать, чтобы связаться с вами в рабочее время. Они могут отправить вам сообщение в любое время и ждать вашего ответа.
• Ценная информация
  Вы можете собрать ценную информацию о своих клиентах. Посетители могут заполнять формы обратной связи о вашем сайте, чтобы вы могли анализировать и улучшать свой контент.
• Безопасность
  Форма обратной связи эффективна для уменьшения спама, наводняющего ваш почтовый ящик. Не нужно указывать свой адрес электронной почты, чтобы ваши клиенты могли с вами связаться. Есть также определённые инструменты, чтобы предотвратить спам-боты от переполнения вашего почтового ящика.

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

Обратите внимание, что Hostinger предлагает специальный оптимизированный для WordPress хостинг. Воспользуйтесь предложением и получите WordPress хостинг со скидкой до 82%!

К предложению

Контактная форма WordPress: Лучшие 7 плагинов

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

1. WPForms

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

Вот несколько замечательных функций, которые предлагает Контактная форма WordPress:

• Мгновенные уведомления
  Когда пользователь отправляет форму, он отправляет вам уведомление по электронной почте. Это важно для обеспечения быстрого ответа с вашей стороны.
• Загрузка файлов
  Контактная форма для WordPress предоставляет вам функции загрузки файлов, потому что одно изображение иногда предоставляет больше информации, чем бесчисленное количество строк текста. Всё, что вам нужно, это добавить поля загрузки в форму, чтобы ваши клиенты могли загружать изображения, PDF-файлы и т. д.
• Шаблоны
  Форма обратной связи WordPress предоставляет готовые шаблоны. Просто добавьте или измените шаблоны в соответствии с вашими потребностями. Это может быть форма цитаты, форма пожертвования или форма подписки.

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

Однако, если вы готовы инвестировать, премиум-версия предлагает вам отличную поддержку. Вы можете получить базовый план за 39,50 $ в год (со скидкой от его первоначальной цены 79 $) или план Elite, который стоит 299,50 $ в год.

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

2. Form Maker by WD

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

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

Вы можете оптимизировать FormMaker с помощью функции перетаскивания и вставки плагина WD.

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

• Функция «Сохранить прогресс» позволяет вашим клиентам сохранять частично заполненные формы.
• Функция условных электронных писем позволяет отправлять пользовательские уведомления по электронной почте разным получателям в зависимости от отправленной формы.
• Функция интеграции с Google Диском позволяет хранить данные в облачном хранилище Google.

Плагин FormMaker от WD WordPress имеет более 2 миллионов загрузок и 4,5-звёздочный рейтинг. Вы можете скачать его бесплатно и пользоваться его готовыми шаблонами и ограниченными возможностями.

Или вы можете получить премиум-версию за 30 $ и получить 6-месячный доступ к обновлениям и поддержке. У них также есть специальные предложения, которые стоят 99 $ в год, с 12 аддонами и 50 премиальными плагинами.

3. Contact Form 7

Создание формы контакта с этим плагином является самым быстрым решением. Сразу после активации у вас будет готовая форма для размещения на вашем сайте.

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

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

4. Caldera Forms

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

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

Если вы предпочитаете использовать месячный план, вы можете начать с базового за $ 14,99/мес. Вы получите неограниченное количество форм, материалов и функций защиты от спама.

Или вы можете получить годовой план стоимостью от 74,99 $ (для начинающих) до 549,89 $ (для агентств). Эти годовые планы включают дополнения, которые вы оцените по достоинству:

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

Новички могут попробовать бесплатную версию, прежде чем переходить на план Starter для получения дополнительных преимуществ.

5. Formidable Forms

Formidable Forms позволяет вам выйти за рамки основных функций других подобных плагинов.

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

Премиум-версия стоит 49 $ в год, а план Elite стоит 399 $ в год. Оба тарифных плана предлагают множество функций, поддержку клиентов и т. д.

Некоторые из премиум-функций:

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

6. Ninja Forms

Ninja Forms бесплатна, однако, бесплатная версия имеет ограниченные возможности. Если вы хотите больше преимуществ, вы можете получить премиум-версию, которая составляет $ 499/год.

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

Стартовый план стоит $ 29/год и предлагает поддержку клиентов, но вам придётся покупать дополнения отдельно.

Ninja Forms — это отличный вариант для любителей, так как он имеет простой в использовании конструктор перетаскивания.

Некоторые из лучших функций Ninja Forms:

• Окончательный контроль ваших форм
• Многоязычные настройки
• Простая интеграция с WordPress

7. Gravity Forms

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

Цена начинается с 59 $ в год за Базовую лицензию, 159 $ в год за Профессиональную лицензию и 259 $ в год за Элитную лицензию. С помощью плагина вы получите неограниченные формы и записи, условную логику, загрузку файлов и другие функции.

В зависимости от выбранного вами плана вы получите отличные дополнения, такие как MailChimp и Slack.

Заключение

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

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

Анна долгое время работала в сфере социальных сетей и меседжеров, но сейчас активно увлеклась созданием и сопровождением сайтов. Она любит узнавать что-то новое и постоянно находится в поиске новинок и обновлений, чтобы делиться ими с миром. Ещё Анна увлекается изучением иностранных языков. Сейчас её увлёк язык программирования!

Всплывающая форма contact form 7

SM C F это всплывающая форма обратной связи в модальном. Евгений к записи Контактная форма C F 7 во всплывающем окне эффект. Но хочется сделать вс красивее, чем просто поля на странице, хочется сделать всплывающую форму. Всплывающее окно для WP с плагином P M форма. А как эти сообщения сделать всплывающими или хотя бы чтоб не. Контактная форма C F 7 для Вордпресса во всплывающем окошке. Очень удобный плагин, создающий попап формы из любой формы C F 7. Главное достоинство контактной формы на C F 7 в простоте ее настройки, почти неограниченной. В этом видео показано, как в попапокно# Вордпресс вставляется шорткод плагина C F 7 и получается форма обратной связи во всплывающем окне. Настрою всплывающие окна, формы обратной связи. Сокол писал про совместную работу плагинов C F 7 и E FB для реализации всплывающей контактной формы на сайте вот тут. Второй плагин собственно сама форма C F 7. C 7 популярный плагин для создания форм обратной связи на WP. К сайдбару привязываете виджет TEXT, в него код вашей контакт формы [7 738. Точнее всплывающее окошко с крестиком появляется, если без него, то форма так же хорошо. Как поставить эту форму всплывающим окном при нажатии. Находитесь PD CMS W Создаем всплывающую форму. В нем пытаюсь реализовать всплывающую форму C F 7. Вот такое сообщение всплывает под формой C F 7 в некоторых случаях после попытки отправить сообщение администратору сайта. Но с помощью этого плагина Форма контактов на блоге появляется в всплывающем окне, а я не люблю. Далее, нам нужна форма связи в Лайтбоксе, для этого подойдт код от плагина C F 7 или C. Плагин C 7Ваша форма контактов на блоге. Предварительно вам нужно либо сделать либо взять уже подготовленный плагином C F 7 шорткод для вывода формы. Бежим в Контакт Форм 7. C F 7 контактная форма во всплывающем окне. Автозаполнение настраивается в самой форме C F 7. Создаем всплывающую форму в WP C F 7. Мы надеемся, что эта статья поможет вам повысить ваши коэффициенты конверсии, используя всплывающее форму звонка WP. Разбираем в видео как правильно сделать форму обрат. Здравствуйте друзья, подскажите пожалуйста, как называется плагин для C F 7 или. Доступно [J Всплывающие окна и модуль обратной связи P B и. Один из самых популярных плагинов для создания контактных форм на сайте WP это. Реализация всплывающей формы C F 7 в V C. Как сделать всплывающую контактную форму плагина C F 7. Одно из самых популярных расширений в JED каталоге, работающее на AJAX и. Мы решили сделать е всплывающей, в модальном окне. Как сделать на сайте всплывающую. Прежде всего, всплывающая форма позволяет вам сэкономить место на. C F 7 быстрая контактная связь и простота настроек. Активно [WP S P P всплывающие формы для C F 7. Возможность связаться с автором блога является не последним по значимости элементом. У себя на блоге я так и не придумал для чего нужна контактная форма во всплывающем окне, поэтому только при. Сейчас я расскажу как сделать всплывающую адаптивную форму обратной связи с помощью нашего плагина C 7. Для простоты мы будем использовать форму C F 7, уже созданную самим плагином при установке. Гайд по C F 7 создание и настройка контактных форм плагин W. Как называется плагин для C F 7, Всплывающая форма? В идеале, я покажу вам как создать всплывающую форму обратной связи, она же 7 или любая другая произвольная форма обратной связи в. Контактная форма C F 7 во всплывающем окне. C F 7 самый популярный плагин контактной формы для. Не забывайте только вставить шорткод от контактной формы плагина C F 7 свой. C F 7 форма обратной связи для.C 7 всплывающая форма обратной связи. P A P C F всплывающая форма обратной связи. Часто бывает нужно сделать эффектную всплывающую контактную форму, это может быть заявка, или. Надо при нажатии на кнопку Заказать в таблице цен открыть всплывающую форму для заказа. Главное достоинство контактной формы на C F 7

Представляем последнюю версию одного из самых лучших модулей A Всплывающей контактной формы A P C F 3. Поскольку попытка сгруппировать два шорткода шорткод кнопки и формы C F 7. Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того. Всплывающая форма с защитой от спама на плагине C F 7. Настрою формы и всплывающие окна на WP SEO, C F 7, P. Контактная форма C F 7 во всплывающем окне эффект. Дополнительные настройки формы C F 7. C F 7 или самописная форма. Всплывающая контактная форма дальнейшее действия[

WPB Popup for Contact Form 7 — плагин WordPress

Описание

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

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

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

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

Текст кнопки, цвет, размер все можно изменить в настройках плагина. У него есть опции для WooCommerce, кнопка может отображаться на странице продукта.

Купить версию PRO | ДЕМО | Поддержка | Документация

Всплывающее окно для контактной формы 7 Основные характеристики

• Всплывающая кнопка для формы Contact Form 7.
• Показать кнопку, используя ShortCode, функцию PHP и обработчик действия.
• Показывать разные всплывающие кнопки на разных страницах с разными формами.
• Расширенные настройки для настройки стиля кнопок и всплывающих окон.
• Очень проста в использовании.
• RTL и поддержка нескольких языков.

Основные характеристики Premium

• Всплывающие кнопки для форм Contact Form 7.
• Показать кнопки с помощью коротких кодов и хуков действий.
• Показать разные всплывающие кнопки в разных местах с разными формами.
• Расширенные настройки для настройки стиля кнопок и всплывающих окон.
• Виджет Elementor для удобного использования с конструктором страниц Elementor.
• Расширенный генератор всплывающих кнопок для добавления нескольких различных настраиваемых всплывающих кнопок.
• Всплывающие кнопки могут отображаться для любых обработчиков действий.
• Красивый дизайн для форм, отображаемых во всплывающем окне.
• RTL Поддержка и мобильная адаптация.

Поддержка и документация:

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

Скриншоты

• Всплывающее окно для контактной формы 7.
• Всплывающая кнопка.
• Короткий код всплывающей кнопки.
• Настройки

Установка

• Установите его как обычный плагин WordPress.
• Для этого плагина требуется плагин Contact Form 7. Поэтому, если у вас не установлен плагин Contact Form 7, убедитесь, что вы также установили этот плагин.
• После установки плагина активируйте его. Затем перейдите в Личный кабинет> Контакт> Всплывающее окно. Настройте параметры плагина и сохраните настройки.
• После установки плагина следуйте нашей пошаговой онлайн-документации.

FAQ

Это работает с темой, которую я использую?

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

Обзоры

Для этого плагина нет обзоров.

Авторы и разработчики

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

авторов

История изменений

Версия 1.0

Версия 1.1

• На странице настроек добавлены документы.

Версия 1.2

• Исправлена ​​проблема выбора контактной формы в настройках.

Версия 1.3

• Протестировано с плагином Contact Form 7 новой версии 5.4

Версия 1.3.1

• Выпущена премиум версия.

Версия 1.3.2

• Добавлен список функций премиум-версии.

Slick Popup: плагин Contact Form 7 Popup — плагин для WordPress

Описание

Лучший плагин WordPress Popup для Contact Form 7

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

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

[Ознакомьтесь с демонстрацией] [Демо версии Pro]

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

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

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

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

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

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

Что еще ?:

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

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

Посмотреть на CodeCanyon

Установка

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

1. Посетите плагины -> Добавить новый на панели инструментов WordPress
2. Искать «Slick Popup»
3. Нажмите «Установить сейчас»
4. Наконец, нажмите «Активировать плагин».

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

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

FAQ

Как показать всплывающее окно с кнопкой или ссылкой?

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

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

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

Всплывающие окна выглядят одинаково во всех темах?

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

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

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

Как изменить внешний вид всплывающего окна?

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

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

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

Я сомневаюсь, что мне делать?

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

.

Авторы и разработчики

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

авторов

История изменений

1,7.11

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

1.7.10

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

1,7,9

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

1,7,8

1,7,7

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 для импорта
• Улучшено: сообщения об ошибках (not-valid-tip) контактной формы 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

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

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

И что еще более важно, они позволяют людям, заинтересованным в ведении дел с вами, связаться с вами. Я говорю из личного опыта.

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

Нужна помощь в настройке вашего сайта WordPress?
WHSR теперь является партнером Codeable.io, чтобы помочь пользователям, которым нужны профессиональные услуги по разработке / настройке WP.

Чтобы получить бесплатное предложение, заполните эту форму запроса.

Контактные формы необходимы

Я писатель-фрилансер, я начал писать, когда был второкурсником в колледже. В первый раз, когда я получил работу, мне пришлось подать заявку как минимум на 50 вакансий на Elance. Это был ад. Вскоре после этого один из моих друзей, который знал о моем фрилансе, предложил мне работу писателем в BlogVault, провайдере резервного копирования WordPress.

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

У меня нет собственного веб-сайта, на котором я мог бы рекламировать свои услуги и отображать свое портфолио. Я использую LinkedIn для отображения своего рабочего портфолио. Ни один из веб-сайтов, для которых я сейчас пишу, никогда бы не услышал обо мне, если бы у них не было легко доступной контактной формы.

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

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

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

Плагин Get A Good Contact Form — Контактная форма 7

1. Установите и активируйте плагин (ссылка ниже).

2. В панели администратора WordPress откройте «Контакт»> «Добавить».Настройте сообщение, которое вы хотите передать посетителю, в соответствии с требованиями.

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

Подробнее и загрузки

Popup Maker

На мой взгляд, плагин для создания всплывающих окон — это Popup Maker.

1. Установите и активируйте плагин (ссылка ниже).

2. Откройте Popup Maker> Добавить новый.

3. Создайте новое всплывающее окно и вставьте шорткод, который вы ранее скопировали из контактной формы 7.

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

Одна особенность, которая мне очень нравится в Popup Maker, — это возможность использовать файлы cookie.Если вы выберете опцию в разделе «Настройки автоматического открытия», то откроются следующие параметры.

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

И, наконец, вы получаете всплывающую контактную форму.

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

Подробнее и загрузки

Умная комбинация

Эта комбинация плагинов (контактная форма 7 + Popup Maker) должна вам очень пригодиться.

Я дам вам два альтернативных варианта всплывающих плагинов, если они вам когда-нибудь понадобятся. Popups и PopUp от Supsystic — очень хорошие плагины для создания всплывающих окон.

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

Ваши мысли всегда приветствуются в комментариях.

Как создать всплывающее окно с помощью контактной формы 7 (шаг за шагом)

Хотите создать всплывающее окно с контактной формой 7, чтобы посетители вашего сайта могли легче связываться с вами?

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

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

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

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

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

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

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

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

Как заставить клиентов заполнить вашу контактную форму, прежде чем вернуться в Google, изучить свой вопрос и перейти на страницу конкурента?

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

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

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

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

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

Есть много способов, но лучшее решение — использовать OptinMonster:

OptinMonster — программное обеспечение №1 в мире для привлечения потенциальных клиентов на рынке.Мы не только упрощаем создание потрясающих и целенаправленных всплывающих окон за считанные минуты, но также упрощаем встраивание форм из самых популярных плагинов для построения форм.

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

Это всплывающее окно было создано менее чем за 10 минут и станет отличным дополнением к любому сайту WordPress.

Готовы начать? Давайте погрузимся.

Создайте всплывающее окно с помощью контактной формы 7 сегодня

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

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

Если вам нужна помощь в настройке, мы настоятельно рекомендуем ознакомиться с этим руководством: Как подключить OptinMonster к WordPress.

Шаг 1. Выберите тип кампании и шаблон

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

Затем вам нужно будет выбрать тип кампании. Хотя у нас есть много вариантов на выбор, мы будем использовать Popup для сегодняшнего урока:

Пришло время выбрать шаблон:

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

А благодаря нашему конструктору перетаскивания не требуются навыки программирования или дизайна.

Однако сегодня мы собираемся создать простое всплывающее окно с контактной формой 7. Это означает, что нашим лучшим вариантом будет шаблон Canvas :

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

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

Когда вы выбрали правильный шаблон кампании для своего сайта, вам нужно будет назвать свою кампанию, назначить ее своему веб-сайту и нажать Начать создание :

Тогда вы будете готовы разработать свою кампанию.

Шаг 2. Вставьте контактную форму 7 в свое всплывающее окно

На данный момент шаблон вашей кампании находится в редакторе OptinMonster.Поскольку мы начинаем с пустого шаблона, вам нужно добавить шорткод контактной формы 7 во всплывающее окно.

Сделать это просто. Нажмите + Добавить блоки вверху меню редактора:

Затем найдите блок < HTML> и перетащите его в шаблон кампании:

Затем перейдите в панель управления WordPress, чтобы получить встраиваемый шорткод Contact Form 7. Щелкните плагин Contact Form 7 (обозначенный Contact ) в WordPress, чтобы открыть список форм.

Затем скопируйте шорткод рядом с формой обратной связи, которую вы хотите использовать:

Вернитесь в редактор OptinMonster и щелкните блок HTML, который вы только что добавили в свой шаблон. Это приведет к появлению инструментов редактирования с левой стороны. Вставьте шорткод контактной формы 7 в блок HTML:

Обратите внимание, что шорткод появится в вашем редакторе, а не в контактной форме:

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

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

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

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

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

Вот всплывающее окно контактной формы 7, которое мы разработали для сегодняшней демонстрации:

Он простой, элегантный и очень эффективный.

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

Если вы не знаете CSS, не беспокойтесь. Вот код, который мы использовали в сегодняшней демонстрации для стилизации нашей формы:

Вы можете вставить это с помощью специальной функции CSS OptinMonster.В главном меню редактирования нажмите Optin Settings »Custom CSS :

.

Затем скопируйте и вставьте приведенный выше код CSS, чтобы оформить форму:

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

Вы также должны знать, что каждый раз, когда вы изменяете или добавляете блок HTML, вам необходимо обновлять кампании в плагине OptinMonster.

Для этого перейдите в панель управления WordPress и нажмите OptinMonster »Кампании .Затем нажмите Обновить кампании :

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

Шаг 3. Установите правила отображения

По умолчанию OptinMonster имеет два правила отображения для каждой кампании:

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

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

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

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

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

Вот как это настроить. Сначала перейдите к Display Rules в верхней части редактора OptinMonster:

Затем щелкните первое правило по умолчанию, чтобы открыть параметры правила отображения:

Найдите в строке поиска MonsterLinks ™.Когда оно появится в меню, нажмите на правило:

Затем нажмите Копировать код MonsterLink ™ :

Теперь у вас есть встраиваемая ссылка на всплывающее окно контактной формы. Он представлен в виде HTML, например:

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

Но для многих конструкторов страниц, используемых с WordPress, вам не нужен HTML для вставки ссылки на кнопку или текст.Вместо этого вам нужен только URL-адрес. Вы можете просто скопировать URL-адрес из фрагмента кода выше (URL-адрес начинается с https: // ):

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

Теперь вы можете встроить эту ссылку в любую кнопку или текст на своем сайте так же, как и в любой другой URL-адрес.

Все, что осталось — опубликовать свою кампанию.

Шаг 4. Опубликуйте всплывающее окно контактной формы

Последний шаг — опубликовать вашу кампанию.Для этого нажмите Опубликовать вверху меню редактора:

Затем измените статус кампании с Черновик на Опубликовать :

И все!

Создайте всплывающее окно с помощью контактной формы 7 сегодня

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

Мы надеемся, что это руководство было для вас полезным. Если это так, вы можете посетить следующие ресурсы:

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

Готовы начать? Подпишитесь на OptinMonster сегодня!

Опубликовано Натан Томпсон

Натан Томпсон — отец, писатель и любитель путешествовать (именно в таком порядке). Когда он не борется со своими детьми, вы, вероятно, обнаружите, что Натан дает своим глазам столь необходимую передышку от экранов с хорошей книгой или планирует семейную поездку со своей замечательной женой.

Как создать всплывающую контактную форму WordPress (открытая форма во всплывающем окне)

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

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

Во-первых, я покажу вам, как это сделать, используя 100% free комбинацию всплывающего модуля и модуля формы.Затем я также покажу вам, как это можно сделать с помощью одного плагина с платной версией Elementor (Elementor Pro).

Итак — два способа открыть контактную форму во всплывающем окне на WordPress, начиная сейчас…

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

Вот пример того, что вы будете создавать с помощью этого метода:

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

Для реализации этой функции вам понадобятся два бесплатных плагина:

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

Продолжайте, установите и активируйте оба плагина. Тогда вот как все настроить…

Шаг 1. Создайте контактную форму

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

Продолжение статьи ниже

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

Закончив работу с формой, нажмите кнопку Embed и скопируйте шорткод формы, потому что он понадобится вам на следующем шаге:

Шаг 2. Создайте всплывающее окно

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

Для этого перейдите в Popup Maker → Добавить всплывающее окно .

Затем вставьте код для вставки вашей контактной формы в текстовый редактор:

При желании вы также можете добавить текст вокруг своей контактной формы.И далее в интерфейсе вы можете использовать вкладки Display и Close , чтобы настроить внешний вид вашего всплывающего окна:

Однако единственное абсолютное требование здесь — это добавить код встраивания вашей формы в текстовый редактор. Изменение любых других настроек необязательно.

Продолжение статьи ниже

Когда вы закончите, убедитесь, что Publish ваше всплывающее окно.

Шаг 3. Создание кнопки для открытия всплывающего окна

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

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

Вот пример кнопки HTML:

Свяжитесь с нами!

Чтобы найти этот класс CSS — popmake-contact-form в моем примере — перейдите в Popup Maker → All Popups и посмотрите на столбец CSS Classes :

Затем перейдите к сообщению или странице, где вы хотите добавить кнопку.

Если вы используете новый редактор блоков Gutenberg, вы можете добавить HTML в блок Custom HTML . Или, если вы используете классический редактор, вы можете использовать вкладку Текст :

Продолжение статьи ниже

И все! После того, как вы опубликуете страницу, ваши посетители смогут нажать на кнопку, чтобы открыть контактную форму:

Как автоматически открывать всплывающее окно (вместо нажатия кнопки)

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

Например, вы можете добавить триггер для автоматического открытия всплывающего окна через X секунд:

Премиум-версия плагина Popup Maker включает больше опций триггера, таких как запуск всплывающего окна в зависимости от того, насколько далеко вниз по странице прокрутил посетитель.

Как открыть контактную форму во всплывающем окне на WordPress с помощью Elementor Pro

Вот пример того, что вы будете создавать с помощью этого метода:

Elementor — популярный плагин для построения страниц, который позволяет создавать контент с помощью визуального редактора с перетаскиванием.Мы используем его здесь, в WPLift, и оценили его положительно. В последней версии Elementor Pro теперь вы можете использовать тот же интерфейс для создания любого типа всплывающего окна, включая всплывающее окно, отображающее контактную форму.

Elementor Pro стоит 49 долларов, но в результате использования этого метода у вас будет гораздо больше гибкости в том, как ваше всплывающее окно и форма выглядят и функционируют.

Вот как использовать эту функцию в Elementor Pro.

Шаг 1. Создайте всплывающее окно

После того, как вы установили и активировали как Elementor, так и Elementor Pro, вы можете начать работу, перейдя в Templates → Popups → Add New Popup :

Затем дайте вашему всплывающему окну имя и нажмите Create Template :

Откроется набор готовых шаблонов всплывающих окон.

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

Шаг 2. Настройте форму

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

Этот виджет позволит вам добавлять и изменять поля для сбора необходимой информации:

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

Шаг 3. Публикация всплывающего окна

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

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

Однако в этом руководстве я сосредоточусь на том, чтобы показать вам, как открывать форму, когда пользователь нажимает кнопку. Для этого подхода к запуску кнопки вам не нужно устанавливать какие-либо триггеры или условия — просто нажмите кнопку Сохранить и закрыть :

Шаг 4. Создание кнопки для открытия всплывающей контактной формы

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

Добавьте обычный виджет Button .Затем выберите Dynamic для ссылки на виджет кнопки. В раскрывающемся списке Dynamic выберите опцию Actions> Popup :

Затем щелкните всплывающее окно , чтобы изменить его настройки:

• Действие — «Открыть всплывающее окно»
• Popup — выберите только что созданное всплывающее окно

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

И все! Должно получиться так:

Есть вопросы?

Вот и все! Два разных способа открытия контактной формы во всплывающем окне на вашем сайте WordPress без необходимости запутывать руки каким-либо настраиваемым кодом.

Есть вопросы о том, как реализовать эти методы? Дайте нам знать в комментариях, и мы постараемся помочь!

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

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

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

В этом уроке я собираюсь показать, как использовать плагин контактной формы WordPress, а также всплывающий инструмент.Хотя существует несколько способов создания всплывающих контактных форм, я собираюсь рассмотреть бесплатный метод с использованием Popup Maker и Ninja Forms.

Использование форм ниндзя

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

Перейдите в область «Плагины» и нажмите «Добавить».”

Установите и активируйте плагин «Ninja Forms». Вы можете найти его, используя поле поиска в правой части экрана.

Ninja Forms может перенаправить вас прямо на свою панель управления. Если нет, вы можете выбрать опцию «Формы ниндзя» в левом столбце администратора.

Ninja Forms по умолчанию создает форму «Свяжитесь со мной». Это простая форма, которую вы можете использовать прямо из коробки при установке плагина. Допустим, мы хотим изменить запрашиваемую информацию.Щелкните заголовок формы «Свяжитесь со мной».

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

Как видите, Ninja Forms содержит множество дополнений, которые можно перетаскивать прямо в форму. Допустим, нам нужна отметка даты сообщения. Перетащите поле «Дата» в форму.

Теперь щелкните поле даты, чтобы открыть его свойства справа.

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

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

Через мгновение Ninja Forms покажет неактивную кнопку публикации. Щелкните значок «X» в правом верхнем углу, чтобы закрыть редактор.

Теперь у нас есть идеальная форма для связи. Ninja Form предоставляет шорткод для добавления формы к любому сообщению или странице на вашем веб-сайте. Скопируйте и вставьте этот код, чтобы разместить форму.

Хотя мы могли бы просто разместить эту форму на веб-сайте, мы хотим сделать ее всплывающим окном. Теперь нам нужен плагин Popup Maker.

Использование Popup Maker

Вернитесь в область «Добавить новые плагины» и установите Popup Maker.Убедитесь, что вы устанавливаете правильный плагин. Существует множество различных инструментов для создания всплывающих окон, и в этом руководстве специально используется Popup Maker.

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

Появится панель управления Popup Maker с пустым списком всплывающих окон. Если вам понадобится доступ к ним в будущем, они будут именно здесь.

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

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

Введите новый заголовок всплывающего окна в поле, чтобы идентифицировать его в Popup Maker. Я просто буду использовать то же имя и называть его «Свяжитесь со мной».

Щелкните поле редактора и нажмите кнопку «Добавить форму».

Используйте раскрывающееся окно для выбора формы.Нажмите кнопку «Вставить». Это список из вашего плагина Ninja Forms.

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

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

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

Теперь у вас есть всплывающая контактная форма.

Настройка всплывающего окна

Между Ninja Forms и Popup Maker у вас есть доступ ко многим параметрам настройки. Возможно, вам придется немного поэкспериментировать с формой, например, отрегулировать время, если вы хотите, чтобы она открывалась автоматически или где вы хотите, чтобы форма отображалась на вашем сайте.

В самом всплывающем окне у вас есть доступ к изменению темы. Это не то же самое, что тема, с которой работает ваш сайт WordPress.Они предназначены специально для всплывающих окон и могут быть настроены, щелкнув инструмент «Темы всплывающих окон» в разделе «Создатель всплывающих окон».

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

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

Могу ли я использовать любой плагин для создания всплывающих окон с Ninja Forms?

У вас есть доступ к большому количеству плагинов для создания всплывающих окон для WordPress. На этот раз я использовал только Popup Maker, потому что это один из самых простых и эффективных инструментов для этой цели. Однако есть много вещей, совместимых с Ninja Forms. Найдите тот, который лучше всего подходит для вас.

Будет ли Popup Maker работать с контактной формой 7?

Popup Maker работает с большинством популярных плагинов для создания форм.Фактически, разработчик конкретно указывает, как Contact Form 7 входит в число поддерживаемых плагинов. Из-за того, как создатели форм обрабатываются в WordPress, Popup Maker должен работать с очень большой их частью.

Много возможностей

Ninja Forms и Popup Maker открывают двери для всех видов возможностей для повышения функциональности вашего сайта. Например, вы можете настроить опросы или поделиться важным контентом с посетителями при входе на свой веб-сайт. Думайте об этом как о выпуске новостей, в котором рассказывается важная информация, имеющая отношение к вашей странице.

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

Что бы вы добавили во всплывающее окно для своего веб-сайта? У вас есть контактная или другая целевая страница, готовая для ваших посетителей?

Автор: Каумил Патель

Каумил Патель является главным операционным директором GreenGeeks и имеет более чем 13-летний опыт работы в индустрии веб-хостинга, работая с компаниями веб-хостинга и владея ими.Каумил специализируется на маркетинге, развитии бизнеса, операциях, слияниях и поглощениях.

Закрыть / открыть всплывающее окно и создать файл cookie после отправки контактной формы 7

Примечание. Popup Maker версии 1.9 представляет Отправка формы триггер и cookie. Рекомендуемая передовая практика — использовать новый триггер и файл cookie вместе при использовании формы Popup Maker или поддерживаемого интеграцией плагина формы WordPress во всплывающем окне.

См .: Интеграция Popup Maker с плагинами WordPress Form Builder

См .: Триггер: отправка формы

Popup Maker интегрируется напрямую с подключаемым модулем Contact Form 7 (CF7), чтобы пользователи подключаемого модуля могли устанавливать файлы cookie браузера при отправке формы.Файл cookie предотвращает повторное отображение всплывающего окна, содержащего форму, после ее успешной отправки.

Выполните следующие действия, чтобы установить файл cookie Popup Maker «Contact Form 7 Success» :

1. В редакторе всплывающих окон прокрутите до поля Popup Settings ;
2. Перейдите на вкладку опций «Триггеры» ;
3. Выберите категорию опций «Триггеры и файлы cookie» ;
4. Нажмите кнопку «Добавить новый файл cookie» .

Поле настройки параметров с надписью «Когда следует создавать файлы cookie?» откроется. Выберите параметры раскрывающегося меню, чтобы просмотреть параметры файлов cookie. Выберите вариант «Контактная форма 7 Успешно» , а затем нажмите кнопку «Добавить» , чтобы установить этот параметр. Следуйте оставшимся подсказкам в поле настроек параметров, чтобы добавить или обновить параметр cookie.

Минимальные требования к плагину для интеграции Popup Maker и контактной формы 7

Popup Maker версии 1.6+

Контактная форма 7 версии 4.7+

См. Контактную форму 7 Success Cookie в действии

В следующих видеороликах используется старый интерфейс администратора Popup Maker (до версии 1.7+). Однако процесс установки и связывания триггера с файлом cookie остается таким же в текущей версии плагина. Примеры видеороликов в этом разделе демонстрируют связь между триггером и файлом cookie Contact Form 7 Success .

Создание файла cookie при отправке формы

Создайте файл cookie, как обычно, за исключением того, что выберите параметр cookie «Contact Form 7 Success», как показано в следующем видео:

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

Получите доступ к действию «Закрыть всплывающее окно» при создании формы в модуле Contact Form 7, как показано в следующем видео.Если вы хотите, чтобы ваши пользователи видели ваше сообщение «Успешно», не забудьте установить задержку (миллисекунды) в параметрах плагина Contact Form 7, достаточную для того, чтобы они могли его прочитать.

Открыть всплывающее окно при отправке формы

Получите доступ к действию «Открыть всплывающее окно» при создании формы в модуле Contact Form 7, как показано в следующем видео:

---

Popup Maker Действия после отправки формы Успешно отправлено

Плагин Contact Form 7 позволяет пользователям устанавливать и отображать сообщение об успешном выполнении после успешной отправки формы. Сообщение об успешном выполнении устанавливается и управляется в самом плагине формы, а не в Popup Maker.

Popup Maker добавляет опции «Закрыть всплывающее окно» и «Открыть всплывающее окно» на вкладке «Параметры всплывающего окна» Контактной формы 7. Эти параметры позволяют пользователям плагина двумя способами отображать подтверждающее сообщение после успешной отправки формы. Подробнее см. Ссылку на соответствующую статью ниже.

Статья по теме: Как настроить действия плагина формы после успешной отправки формы

.