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

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

  • автор:

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

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

Создание формы обратной связи

Более или менее простой способ это создать страницу с контактной информацией и вывести на нее компонент «Форма обратной связи» как на картинке: Далее переходим в режим «Редактирование исходного кода» и оборачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):

IncludeComponent(
«bitrix:main.feedback»,
«»,
Array(
«USE_CAPTCHA» => «Y»,
«OK_TEXT» => «Спасибо, ваше сообщение принято.»,
«EMAIL_TO» => «mihail@bazarow.ru»,
«REQUIRED_FIELDS» => array(«NAME», «EMAIL», «MESSAGE»),
«EVENT_MESSAGE_ID» => array()
),
false
);?>

ВАЖНО! — не забудьте поменять мой электро ящик на свой. Добавляем в style.css шаблона вот такие стили:

.overlay <
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
>
.overlay:target <
visibility: visible;
opacity: 1;
>
.popup <
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
font: 14px Helvetica, Arial, Sans-Serif;
top: 40%;
visibility: hidden;
z-index: 10;

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
>
.overlay:target+.popup <
top: 50%;
opacity: 1;
visibility: visible;
>
.close <
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -13px;
font-weight: bold;
text-align: center;
text-decoration: none;
top: -15px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
>
.close:before <
color: rgba(255, 255, 255, 0.9);
content: «X»;
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
>
.close:hover <
background-color: rgba(64, 128, 128, 0.8);
>

И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body: Вообще, можно вставить этот кусок кода в любое место шаблона, но в футер шаблона будет и правильнее и понятнее. И последний маневр: в любом месте сайта вставляем ссылку Форма обратной связи . Пример работы: кликните Заказать разработку сайта

Небольшая фенька.

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

Михаил Базаров

Цифрой 5000 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .

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

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

з.ы. сама форма, обработчик есть.

  • Вопрос задан более трёх лет назад
  • 6276 просмотров

Комментировать
Решения вопроса 1

More916

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

Или же, опять таки поместив в блок, задать ему position как absolute или fixed и скрыть с помощью свойства display.
И тогда, с помощью js, повесить обработчик событий на клик по кнопке, который будет делать форму видимой.

Не ясно только, что значит

з.ы. сама форма, обработчик есть.

Так как обрабатывает запрос php скрипт, но никак не html форма. Быть может имелось ввиду, что обработчиком является страница, на которой расположена форма?

Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker

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

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

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

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

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

Установка Contact Form 7

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

CF7 в поиске по плагинам

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

Стандартная конфигурация

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

Отставляем label

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

Делаем поле Имя

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

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

Получившийся код

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

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

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

Готовый результат формы обратной связи

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

Обновляем настройки

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

Исправляем параметры отправки

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

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

shortcode вывода формы

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

Установка Popup Maker

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

Popup Maker в выдаче по плагинам

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

Вводим название и shortcod CF7

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

Таб с тригером

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

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

class для всплывающей формы

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

Изменение других параметров

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

Публикация попапа

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

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

Старый редактор WP

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

Прописываем класс к объекту

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

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

Таб визуально

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

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

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

Проверка всплывающей формы обратной связи на сайте

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

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

Вставка класса в гутенберге

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

Fancybox в админке вордпресса

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

Убираем не нужные элементы

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

Отправить сообщение 
[contact-form-7 title="Всплывающая форма"]

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

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

Пример вывода формы в сайдбаре

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

Popup в Elementor по кнопке

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

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

Записываем id

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

Параметры кнопки элементоре

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

Отображение popup на сайте

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

Итог

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

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

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

Появился еще один плагин всплывающих окон My Popup WordPress. Читайте его подробный обзор.

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

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

Вот что мы будем использовать:
Bootstrap – стили и скрипты фреймфорка для создания адаптивного модального окна.
jquery ajax — для отправки запроса к обработчику php без перезагрузки страницы.
php – обработка данных и отправка Email.

Для создания адаптивного модального окна будем использовать фреймворк bootstrap.
Для начала подключим bootstrap и jquery.
Для лучшего быстродействия сайта лучше скачать bootstrap и jquery.
В этом уроке мы подключим стили bootstrap с другого сайта, межу тегами … пропишем:

Перед закрывающимся тегом подключим jquery и javascript bootstrap.

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

Само модальное окно:

 

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

Теперь создадим скрипт, который будет выполнять Ajax-запрос.
Для начала напишем функцию обработки клика кнопки «Отправить письмо», обращаемся к селектору id=”btn-send”

  

При нажатии на кнопку нам нужно получить данные введенные в input и textarea, запишем их в переменные email и text.

  

Теперь отправим полученные данные Ajax-запросом в php файл.

  

Создадим файл page.php, в этом файле получим пришедшие данные и отправим email.

page.php:

  Сообщение успешно отправлено!'.$email.', '.$text.'
'; >else < echo '
Ошибка ! Сообщение не отправлено!
'; > ?>

Теперь осталось в нашем JS только вывести сообщениt об успешной отправки. В переменную data поподут данные которые мы выводили в php обработчике при помощи функции echo. В

  

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

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

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