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

автор: admin
01.05.2024

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

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

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

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

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

[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!
    
  Name * 
  Email * 
 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!
   





   Name * 
  Email * 
 Subscribe

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

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

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

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

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

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

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

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

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

More916

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

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

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

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

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

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

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

Вот что мы будем использовать:
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. В

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

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

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

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

Для чего нужна форма обратной связи на сайте?

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

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

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

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

СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

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

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):

 /* Форма обратной связи */ #inline { margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; } .txt { display: inline-block; color: #676767; width: 190px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; } .txtarea { display: inline-block; color: #676767; width: 617px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; height: 80px; } .txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; } input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; } input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; } #send { color: #FFFFFF; display: block; cursor: pointer; padding: 5px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; margin-bottom: 20px; } #send:hover { background: #979797; } /* Форма обратной связи */

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

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

Выглядит это вот так:

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

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

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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

Производит проверку введенного e-mail.
Указывает поля, с которыми будет работать.
Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
Обрабатывает введенную информации и инициирует отправку уведомления на почту.
Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

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

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

И придаем ей стили.

 .modalbox { color: #FFFFFF; display: block; cursor: pointer; padding: 10px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; text-decoration: none; text-align: center; margin:0 auto 20px; } .modalbox:hover { background: #979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.

 #inline { display:none; margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; }

В итоге получаем вот такую кнопку.

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

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

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

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

url: `http://site.ru/sendmessage.php`

Скачать исходные файлы форм обратной связи.

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

Размещенная на сайте информация не является публичной офертой в соответствии со ст. 437 ГК РФ

8 (917) 749-78-98 Задать вопрос

Присоединяйтесь в группу