всплывающая форма обратной связи для сайта на html
Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке
[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью:
Как сделать форму обратной связи во всплывающем окне для WordPress[/vc_message]
Будет много кода, но он будет весь рабочий, понятный и очень простой.
Изначально думал, сделать несколько разных форм, но потом решил сделать одну, а в нее включить всё, что можно. И если нужна будет какая-то упрощенная форма, то можно будет просто использовать свои настройки и не включать все возможности.
[UPD] Форму я брал с одного из рабочих сайтов, и чтобы было в ней меньше кода, взял код подписной формы. Думаю, переименовать поля в форме и добавить textarea не составит труда, поэтому из подписной формы не сложно будет сделать форму обратной связи или любую другую форму, я же оставлю код таким как он есть, иначе нужно менять еще и тексты в форме и менять стили, а мне уже лень (делаю уже, надеюсь, последний, 17-ый апдейт этого кода).
Рекомендую изучить три статьи, ссылки на которые я указал выше, весь код будет взят из них и собран в этой статье с минимальными разъяснениями.
Форма обратной связи с всплывающим окном о подтверждении отправления.
В head подключаем нужные шрифты с Google Fonts, Bootstrap и FontAwesome (при необходимости, это не обязательно)
Основной HTML будет такого вида (все элементы и классы не являются обязательными у вас может быть совсем другой код, мой код взят из фрагмента рабочего сайта и немного упрощен для примера, но могут присутствовать лишние элементы):
CSS стили
Стили также взяты с рабочего примера, и не являются обязательными, используйте свои классы и стили, создавайте уникальный красивый дизайн.
JavaScript код
Обязательно подключаем jQuery :
Ниже функция для всплывающего окна.
Если куки не нужны, тогда добавьте этот код под основным кодом скрипта.
Если вы хотите использовать куки, тогда подключайте код ниже, но не забудьте подключить скрипт jquery.cookie.min.js
Рабочий пример:
Готовая HTML-страница c формой обратной связи с использованием куки:
Рекомендую к прочтению:
Комментарии (9) к “Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке”
Добрый день. Спасибо за красивую форму, не разобрался как выводить ее ( кнопка или ссылка для вывода формы.) Спасибо
Denis Creative
В данной статье поп-ап выводится автоматически через время после загрузки страницы.
В этой статье есть пример попапа с вызовом по клику на кнопке Делаем попап без плагина fancybox.
Если быстро, то надо добавить кнопку
при нажатии на кнопку показываем попап
чтобы при нажатии на область вне попап-окна, попап скрывался нужно после строки
По идее, должно работать.
Артём
Добрый день. Подскажите пожалуйста как сделать что бы форма выскакивала только один раз.
Мне дали скрипт но я не могу его применить к данной форме.
Denis Creative
Не знаю, это не мой скрипт. С этим лучше обратиться к фрилансерам или сюда https://stackoverflow.com/
Евгений
В HTML почти не разбираюсь, но взял за основу Ваш код, чтобы сделать всплывающее окно на главной странице у себя в офисе.
Благодаря комментариям в коде понял что куда. Супер получилось. Спасибо.
sterd
Скажите пожалуйста, а где именно прописать в коде свой Е_майл куда должно прейти уведомление, что клиент заполнил и отправил форму обратной связи.
Denis Creative
Sergio
А почему не отправляется ваша форма после нажатия кнопки «Subscribe» и не отображается «Блогодарственное окно»
3 способа. Как сделать форму обратной связи на html?
Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.
Способ №1. Форма обратной связи html + php.
Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.
Для данной формы вам потребуется:
Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.
Далее давай те напишем HTML код формы
Ну и конечно же файл CSS, что-бы все облагородить)
Вот, что получилось в итоге.
Способ №2. Сервис для формы обратной связи.
Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.
Для данного способа вам понадобиться:
У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.
Я собрал вот такую форму на сервисе Яндекса.
Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту
После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.
Способ №3. Ссылка для отправки email.
Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:
Такую ссылку можно усложнить и задать сразу еще и тему к примеру
При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.
Код простой формы обратной связи для сайта на HTML и PHP
Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.
Почему используется HTML и PHP?
Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.
Структура кода реализации обратной связи для сайта
Далее приведен алгоритм работы обратной связи:
В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.
Код формы обратной связи на HTML
Вначале приведем исходный код простой формы обратной связи для сайта на HTML:
Рассмотрим атрибуты формы
Далее внутри тега находится контейнер
Обратите внимание, что имена полей формы должны быть уникальны на странице, так как через них передаются параметры формы. Различные трюки и фишки, связанные полями формы будут раскрыты в другой статье, которая сейчас готовится к выходу.
Отправка письма PHP скриптом
Приведем код простого скрипта для отправки письма
Простой скрипт обработки данных формы HTML в PHP скрипте
Приведем сначала исходный код:
проверяем или используется метод POST
Далее проверяем или были высланы данные с полей ввода
Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.
Оформление формы обратного звонка для сайта CSS
Приведем код CSS оформления для формы обратной связи сайта.
Разберем подробнее код.
Подпись и поле ввода обернуты в контейнер div :
Для этого дива присвоим отступы сверху и снизу:
Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:
Аналогично для подписей и полей ввода:
Настраиваем красивый внешний вид подписей и полей ввода:
Звездочку делаем красной:
Оформляем кнопку «Отправить» :
При наведении на кнопку настраиваем изменение цвета:
Скачать исходный код формы обратной связи
Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.
Как сделать всплывающую форму
Сегодня вы узнаете, как сделать всплывающую форму на CSS+JS, чтобы она появлялась и исчезала при клике на кнопку. По такому же принципу вместо всплывающей формы, можно сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не только формы.
Просто форма – наиболее часто используемый компонент для всплывающего окна в принципе. Я категорически против принудительных всплывающих окон, обычно их называют поп-апами. Это когда вы заходите на сайт и сразу же в центре экрана выскакивает форма подписки, которая блокирует все ваши действия. У вас есть только два варианта: заполнить и отправить форму или закрыть (не сразу ясно как это сделать).
Не знаю как у вас, но у меня такая навязчивость, вызывает протест, если не сказать хуже. В большинстве случаем, я просто закрываю сайт.
Не унижайте ваших посетителей, позвольте им самим решать, заполнять форму или нет.
Демонстрация всплывающей формы
HTML структура
Ниже код кнопки, кликнув по которой, откроется форма подписки, за это отвечает атрибут onclick и событие openForm.
Форма подписки form помещена внутри тега div, состоит из двух текстовых полей и двух кнопок. У тега div одновременно задан класс и id. Зачем? В классе form-popup мы задаем стили, а на #myForm вешаем JS события.
CSS код
Код ниже, фиксирует кнопку, открывающую форму в определенном месте – в правом и нижнем углу браузера.
.open-button <
position: fixed;
bottom: 22px;
right: 26px;
width: 290px;
.. >
По умолчанию, всплывающая форма спрятана.
.form-popup <
display: none;
position: fixed;
bottom: 0;
right: 14px;
>
Стили для контейнера формы, тот самый div, куда можно помещать любые веб-элементы.
Оба текстовых поля должны по ширине занимать 100% относительно контейнера.
Когда поля формы в фокусе, то пусть меняют свой цвет. В фокусе – это значит в этот момент пользователь начинает взаимодействовать с формой.
Создаем общие стили для кнопок: Отправить / Закрыть.
Меняем цвет для кнопки Закрыть.
Делаем для всех кнопок эффект при наведении – полная непрозрачность.
JS код
Функция openForm открывает форму. Мы получаем элемент с #myForm и делаем его видимым display = «block»;
Оба значения display, скрипт берет их стилей, а события openForm / closeForm, прописаны в тегах button.
Данная статья, только отвечает на вопрос, как сделать всплывающую форму, без отправки данных на сервер.
На CodePen вы можете увидеть весь код всплывающей формы, который можно скачать и использовать в своих проекта.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
Форма отправит данные в файл обработки. Как это будет выглядеть визуально? Что станет с вплывшим окном?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Создаем всплывающую контактную форму для сайта
Все мы привыкли видеть контактные формы на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, как встроить контактную форму в модальное окно работающее на jQuery. Сегодня же, хочу познакомить вас, с интересным решением создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта.
На мой взгляд, замечательный образец средств взаимодействия с пользователями.
Пример посмотрели. Теперь, давайте разложим эту форму на составляющие, от создания общей структуры в Html, до формирования внешнего вида макета с помощью CSS.
HTML-код формы
Ничего сверхъестественного, максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом, для дальнейшего формирования внешнего вида формы в css и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.
Отправить нам сообщение
В моем примере, текстовая ссылка для вызова всплывающей контактной формы, сформирована с помощью свойств CSS3 в виде кнопки. Вы же можете использовать под это дело любую картинку, пункт меню или фрагмент текста, да все что угодно, лишь бы в радость вам и не на горе нам)))
Вы наверное заметили, что кнопка закрытия, вписана в блок контактной формы, непосредственно перед заголовком и это логично, а где же ей еще быть, кнопка должна появляться и исчезать вместе с формой. Внешний вид и позицию кнопки закрытия мы в дальнейшем сформируем в CSS
Вот и все, давайте теперь, посмотрим на полный Html-код страницы содержащей всплывающую форму обратной связи: