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

Как сделать
Содержание
  1. Как сделать всплывающую форму
  2. Демонстрация всплывающей формы
  3. HTML структура
  4. CSS код
  5. JS код
  6. Комментарии ( 1 ):
  7. Всплывающая форма обратной связи без плагинов
  8. Навигация по статье:
  9. Скрипт для создания всплывающей формы обратной связи
  10. Загружаем необходимые файлы на хостинг
  11. Подключаем скрипт всплывающей формы обратной связи к сайту
  12. Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке
  13. Форма обратной связи с всплывающим окном о подтверждении отправления.
  14. CSS стили
  15. JavaScript код
  16. Ниже функция для всплывающего окна.
  17. Рабочий пример:
  18. Готовая HTML-страница c формой обратной связи с использованием куки:
  19. Комментарии (9) к “Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке”
  20. Denis Creative
  21. Артём
  22. Denis Creative
  23. Евгений
  24. sterd
  25. Denis Creative
  26. Sergio
  27. Обратная связь для сайта
  28. Формы обратной связи на сайт — что выбрать
  29. HTML&PHP форма (и скрипт) обратной связи для блога, сайта
  30. Super (AJAX) Contact Form — русифицированная версия формы обратной связи
  31. Установка готовой бесплатной формы обратной связи на сайт

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

Сегодня вы узнаете, как сделать всплывающую форму на 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 Русаков Михаил Юрьевич. Все права защищены.

Источник

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

Приветствую вас на сайте Impuls-Web!

Читайте также:  Как сделать свадебную арку с искусственными цветами

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

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

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

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

Данный скрипт называется jbCallMe. Скачать архив со скриптом вы можете по этой ссылке:

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

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

postmaster.php — выполняет функцию самой отправки письма на ваш e-mail. Данный файл должен загружаться в корень вашего сайта, то есть в папку с доменом.

Так же, здесь есть еще две папки js и css.

Из папки CSS нам понадобится файл jquery.jbcallme.css. В нём находятся стили, которые отвечают за визуальное оформление всплывающей формы обратной связи.

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

Файл jquery.js представляет собой библиотеку jquery, которая подключается автоматически на большинстве сайтов, работающих на CMS, и повторно подключать ее не нужно.

Поэтому если у вас сайт работает на движке WordPress, OpenCart, Joomla, либо на каком-то другом движке, то с вероятностью 99% библиотека jquery у вас уже подключена, и повторно ее подключать не нужно.

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

Загружаем необходимые файлы на хостинг

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

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

В первом случае подключение скрипта будет выглядеть так:

Источник

Создаем всплывающую 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” и не отображается “Блогодарственное окно”

Источник

Обратная связь для сайта

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

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

Формы обратной связи на сайт — что выбрать

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

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

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

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

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

Я же предлагаю сэкономить:

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («\code\assets\xml\config.php»):

Конфиг для настройки полей («\code\assets\xml\fields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей:
— более эстетично привлекательная
— используется проверка полей, ошибки выводятся через AJAX
— подробнейшая инструкция по установке и настройке внутри
— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

Очень удобно. Вот код для работы формы как в первом случае:

div id = «form» >
p > a style = «text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id = «forma0» > Заказать звонок / a > / p >

div id = «forma1» style = «display:none; background-color: #fff;» >
script src = «sendmailforms/jquery.maskedinput-1.2.2.min.js» type = «text/javascript» > / script >
link rel = «stylesheet» type = «text/css» href = «sendmailforms/form.css» / >
script src = «sendmailforms/wait_for_call.js» type = «text/javascript» > / script >
script src = «sendmailforms/ajaxupload.js» type = «text/javascript» > / script >
script src = «sendmailforms/upload_file.js» type = «text/javascript» > / script >
div class = «call-me-form» title = «Заказать звонок» button = «Заказать звонок» style = «width: 200px» > / div >
/ div >
script >
$(«#forma0»).toggle(function() <
$(«#forma1»).slideDown(«slow»);
>, function() <
$(«#forma1»).slideUp(«slow»);
>);
/ script >
/ div >

Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

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

Скачать форму можно по ссылке, либо с этого блога.

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

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

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

Источник

Оцените статью
Как сделать своими руками
Добавить комментарий
Adblock
detector