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

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

  • автор:

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

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

Контактная форма для WordPress -это очень легко

Для создания всплывающих окон мы используем плагин OptinMonster.

Контактная форма для WordPress -это очень легко - 2

Шаг 1. Установите плагины WPForms и OptinMonster

Шаг 1. Установите плагины WPForms и OptinMonster

Установите и активирйте оба плагина. Для активации OptinMonster необходимо создать учетную запись в системе OptinMonster.

Шаг 2. Создайте контактную форму, используя WPForms

Чтобы создать форму обратной связи, в панели администрирования WordPress перейдите в раздел WPForms > Add New .

Шаг 2. Создайте контактную форму, используя WPForms

На следующей странице выберите шаблон Simple contact form и задайте ей имя.

Шаг 2. Создайте контактную форму, используя WPForms - 2

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

Сохраните внесенные изменения. После этого созданная форма будет готова к работе. Затем перейдите на вкладку Embed и скопируйте код формы.

Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster

Чтобы создать модальное всплывающее окно, в административной панели WordPress перейдите в раздел OptinMonster > Create New Campaign.

Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster

На следующей странице выберите тип кампании Simple contact form .

Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster - 2

В качестве шаблона установите Canvas . Это пустой холст, куда можно вставить любой код HTML, CSS, JavaScript.

На следующей странице введите название кампании.

Затем перейдите на вкладку Start building . После этого вы будете перенаправлены в конструктор. Чтобы создать всплывающее окно, используйте параметры, расположенные на вкладке Design .

Нажмите на кнопку Add Blocks и прокрутите вниз, чтобы найти варианты блоков. Под ними вы увидите HTML-блок. Перетащите его в область проектирования.

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

Do you have any questions?

Want to ask more about our service? Simply fill out the form and we’ll get back to you as soon as possible.

Сохраните внесенные изменения. После этого перейдите на вкладку Display rules и установите время на ноль.

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

Шаг 4. Публикация всплывающей формы

Нажмите на кнопку Yes/No , расположенную в верхней части экрана и перейдите на вкладку Activate .

Шаг 4. Публикация всплывающей формы

На вкладке Publish переключите статус в режим live .

Шаг 4. Публикация всплывающей формы - 2

После этого перейдите в раздел OptinMonster > Campaigns . Здесь вы увидите свою кампанию. Нажмите на кнопку Edit output settings и становите флажок Enable the campaign on site.

Нажмите кнопку Save settings , расположенную в конце страницы.

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

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

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

Создайте новую страницу в WordPress. Затем перейдите в текстовый редактор WordPress и добавьте приведенный ниже код. Не забудьте вставить ваш ключ.

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

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

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

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

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

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

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

More916

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

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

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

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

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

Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке

[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью:
Как сделать форму обратной связи во всплывающем окне для WordPress[/vc_message]

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

  1. Сделаем всплывающую форму с куки.
  2. Сделаем всплывающее окно после успешной отправки.

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

[UPD] Форму я брал с одного из рабочих сайтов, и чтобы было в ней меньше кода, взял код подписной формы. Думаю, переименовать поля в форме и добавить textarea не составит труда, поэтому из подписной формы не сложно будет сделать форму обратной связи или любую другую форму, я же оставлю код таким как он есть, иначе нужно менять еще и тексты в форме и менять стили, а мне уже лень (делаю уже, надеюсь, последний, 17-ый апдейт этого кода).

  • Универсальный скрипт формы обратной связи
  • Попап без плагина fancybox
  • Валидация HTML-формы без использования скриптов и php

Рекомендую изучить три статьи, ссылки на которые я указал выше, весь код будет взят из них и собран в этой статье с минимальными разъяснениями.

Форма обратной связи с всплывающим окном о подтверждении отправления.

HTML

В head подключаем нужные шрифты с Google Fonts, Bootstrap и FontAwesome (при необходимости, это не обязательно)

Основной HTML будет такого вида (все элементы и классы не являются обязательными у вас может быть совсем другой код, мой код взят из фрагмента рабочего сайта и немного упрощен для примера, но могут присутствовать лишние элементы):

 

Contact Form

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime repellat asperiores natus unde quos consequuntur aliquid temporibus doloremque nihil nulla quidem, expedita hic nobis ipsam quia fugiat. Sunt, maxime, fugit!

Subscribe

CSS стили

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

/* Стили для затемнения фона */ .popup-overlay < display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 186, 0, 0.7); z-index: 100; >/* Основные стили для всплывающего окна */ .popWindow < display: none; background-color: #161613; color: #fff; width: 90%; max-width: 720px; padding: 40px 30px; position: absolute; top: 50%; left: 50%; margin-left: -360px; margin-top: -185px; text-align: center; box-shadow: 0 0 30px rgba(18, 17, 12, 0.5); >/* Стили для адаптивности всплывающего окна */ @media only screen and (max-width : 800px) < .popWindow < margin-left: -45%; >> /* Кнопка закрыть всплывающее окно */ .close-btn < position: absolute; top: 0; right: 0; font-size: 40px; line-height: 20px; cursor: pointer; color: #999; padding: 10px; >/* Просто текст */ .subscribe_window .subcsribe-text < font-size: 18px; text-align: center; text-transform: uppercase; color: #fff; margin: 0 0 40px; position: relative; padding: 0 50px; z-index: 10; >/* Текст */ .subscribe_window .req-fields < color: #676767; text-align: left; >/* Стили формы */ .subscribe-form < width: 100%; max-width: 300px; margin: 0 auto; >.subscribe-form div < position: relative; >.subscribe-form input < border: 1px solid #3d3d3d; width: 100%; font-family: "Lato", sans-serif; font-size: 16px; line-height: 32px; padding: 5px 20px; margin-bottom: 20px; outline: none; background: #2e2e2b; color: #fff; border-radius: 4px; >.btn < color: #161613; background-color: #ffba00; padding: 10px 50px; text-align: center; font-size: 13px; border: 1px solid #ffba00; box-shadow: none; display: inline-block; text-transform: uppercase; text-decoration: none; display: inline-block; -webkit-transition: 0.4s; transition: 0.4s; >.btn:hover, .btn:focus < background-color: #ffba00; color: #fff; text-decoration: none; >.subscribe-form .btn < font-size: 24px; line-height: 54px; border: none; width: 100%; padding: 10px; font-weight: 700; text-align: center; outline: none; border-radius: 4px; >.subscribe-form .btn:hover < background-color: #e6a700; >.subscribe-form .btn i < font-size: 28px; margin-right: 7px; >.subscribe-form label < color: #fff; position: absolute; top: 12px; left: 20px; -webkit-transition: 0.28s; transition: 0.28s; >.subscribe-form label span < color: #ffba00; >.subscribe-form input:focus + label < left: -62px; font-size: 12px; >.subscribe-form input:invalid < box-shadow: none; >.subscribe-form input:valid < border: 1px solid #161613; >.subscribe-form input:valid + label < left: -62px; font-size: 12px; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) < border: 1px solid #d3362a; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label < left: -62px; font-size: 12px; >@media only screen and (max-width : 480px) < .subscribe_window< top: 5%; margin-top: 0; >.subscribe_window .subcsribe-text < padding: 0; >.subscribe-form input:focus + label < left: 20px; top: -18px; >.subscribe-form input:valid + label < left: 20px; top: -18px; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label < left: 20px; top: -18px; >> /* Стили для текста внутри благодарственного окна после успешной отправки */ .thank_you_window .thank_you_title < font-family: "Titillium Web", sans-serif; color: #fff; font-size: 32px; line-height: 50px; font-weight: 700; margin-bottom: 10px; >.thank_you_window .thank_you_body

JavaScript код

Обязательно подключаем jQuery :

Если вы хотите использовать в форме куки, то нужно обязательно подключить jquery.cookie.min.js .
Скачать скрипт jquery.cookie.min.js можно здесь.
Про пример использования куки почитайте здесь.

// PopUp Form and thank you popup after sending message var $popOverlay = $(".popup-overlay"); var $popWindow = $(".popWindow"); var $subscribeWindow = $(".subscribe_window"); var $popThankYouWindow = $(".thank_you_window"); var $popClose = $(".close-btn"); $(function() < // Close Pop-Up after clicking on the button "Close" $popClose.on("click", function() < $popOverlay.fadeOut(); $popWindow.fadeOut(); >); // Close Pop-Up after clicking on the Overlay $(document).on("click", function(event) < if ($(event.target).closest($popWindow).length) return; $popOverlay.fadeOut(); $popWindow.fadeOut(); event.stopPropagation(); >); // Form Subscribe $(".subscribe-form").submit(function() < var th = $(this); $.ajax(< type: "POST", url: "mail.php", data: th.serialize() >).done(function() < // после успешной отправки скрываем форму подписки и выводим окно с благодарностью за заполнение формы $subscribeWindow.fadeOut(); $popThankYouWindow.fadeIn(); // используем куки на 30 дней, если человек заполнил форму // для куки обязательно должен быть подключен jquery.cookie.min.js $.cookie('hideTheModal', 'true', < expires: 30 >); // очищаем форму setTimeout(function() < th.trigger("reset"); >, 1000); >); return false; >); >);

Ниже функция для всплывающего окна.

Если куки не нужны, тогда добавьте этот код под основным кодом скрипта.

// используйте этот код, если нужно появление формы без куки $(window).load(function() < setTimeout(function() < $popOverlay.fadeIn(); $subscribeWindow.fadeIn(); >, 2000); >);

Если вы хотите использовать куки, тогда подключайте код ниже, но не забудьте подключить скрипт jquery.cookie.min.js

// или используйте этот код, если нужно появление формы с куки и вы подключали jquery.cookie.min.js $(window).load(function() < // задаем переменную для cookie var hideTheModal = $.cookie('hideTheModal'); // если cookie не установлено. if(hideTheModal == null)< // Через 2 секунды появляется контактная форма setTimeout(function() < $popOverlay.fadeIn(); $subscribeWindow.fadeIn(); >, 2000); > >);

Рабочий пример:

Готовая HTML-страница c формой обратной связи с использованием куки:

    Pop-up Contact Form       /* Стили для затемнения фона */ .popup-overlay < display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 186, 0, 0.7); z-index: 100; >/* Основные стили для всплывающего окна */ .popWindow < display: none; background-color: #161613; color: #fff; width: 90%; max-width: 720px; padding: 40px 30px; position: absolute; top: 50%; left: 50%; margin-left: -360px; margin-top: -185px; text-align: center; box-shadow: 0 0 30px rgba(18, 17, 12, 0.5); >/* Стили для адаптивности всплывающего окна */ @media only screen and (max-width : 800px) < .popWindow < margin-left: -45%; >> /* Кнопка закрыть всплывающее окно */ .close-btn < position: absolute; top: 0; right: 0; font-size: 40px; line-height: 20px; cursor: pointer; color: #999; padding: 10px; >/* Просто текст */ .subscribe_window .subcsribe-text < font-size: 18px; text-align: center; text-transform: uppercase; color: #fff; margin: 0 0 40px; position: relative; padding: 0 50px; z-index: 10; >/* Текст */ .subscribe_window .req-fields < color: #676767; text-align: left; >/* Стили формы */ .subscribe-form < width: 100%; max-width: 300px; margin: 0 auto; >.subscribe-form div < position: relative; >.subscribe-form input < border: 1px solid #3d3d3d; width: 100%; font-family: "Lato", sans-serif; font-size: 16px; line-height: 32px; padding: 5px 20px; margin-bottom: 20px; outline: none; background: #2e2e2b; color: #fff; border-radius: 4px; >.btn < color: #161613; background-color: #ffba00; padding: 10px 50px; text-align: center; font-size: 13px; border: 1px solid #ffba00; box-shadow: none; display: inline-block; text-transform: uppercase; text-decoration: none; display: inline-block; -webkit-transition: 0.4s; transition: 0.4s; >.btn:hover, .btn:focus < background-color: #ffba00; color: #fff; text-decoration: none; >.subscribe-form .btn < font-size: 24px; line-height: 54px; border: none; width: 100%; padding: 10px; font-weight: 700; text-align: center; outline: none; border-radius: 4px; >.subscribe-form .btn:hover < background-color: #e6a700; >.subscribe-form .btn i < font-size: 28px; margin-right: 7px; >.subscribe-form label < color: #fff; position: absolute; top: 12px; left: 20px; -webkit-transition: 0.28s; transition: 0.28s; >.subscribe-form label span < color: #ffba00; >.subscribe-form input:focus + label < left: -62px; font-size: 12px; >.subscribe-form input:invalid < box-shadow: none; >.subscribe-form input:valid < border: 1px solid #161613; >.subscribe-form input:valid + label < left: -62px; font-size: 12px; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) < border: 1px solid #d3362a; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label < left: -62px; font-size: 12px; >@media only screen and (max-width : 480px) < .subscribe_window< top: 5%; margin-top: 0; >.subscribe_window .subcsribe-text < padding: 0; >.subscribe-form input:focus + label < left: 20px; top: -18px; >.subscribe-form input:valid + label < left: 20px; top: -18px; >.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label < left: 20px; top: -18px; >> /* Стили для текста внутри благодарственного окна после успешной отправки */ .thank_you_window .thank_you_title < font-family: "Titillium Web", sans-serif; color: #fff; font-size: 32px; line-height: 50px; font-weight: 700; margin-bottom: 10px; >.thank_you_window .thank_you_body  

Contact Form

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime repellat asperiores natus unde quos consequuntur aliquid temporibus doloremque nihil nulla quidem, expedita hic nobis ipsam quia fugiat. Sunt, maxime, fugit!

Subscribe

Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…

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

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

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

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

Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно слабым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом 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 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .

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

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