форма обратной связи в всплывающем окне 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” и не отображается “Блогодарственное окно”
Всплывающее окно с формой обратной связи
Этот урок можно назвать продолжением предыдущего мини-обзора где мы создавали круглые кнопки, одна из которых – заказ звонка, а вторая – обратная связь. Они являются лишь началом работы полной функции. Для завершения не хватает еще одной части, а именно модального окна.
По идее, оно должно появляться при нажатии на кнопку, чтобы создался эффект всплывающего окна с формой обратной связи. Форму будем создавать с помощью всем известного плагина «Contact Forms 7». Добавим свои стили к форме, оформим красиво. В общем, сделаем как надо.
В работе над модальным окном я воспользуюсь свободным плагином «Modal Window Effects» ( демо ). Вы же можете использовать любой другой (даже специальный) плагин окна для WordPress. Надо лишь привязать вызов к нашей кнопке, и все будет в ажуре. Поехали!
Кнопка со сплывающим окном обратной связи
Первым делом займемся установкой на сайт кнопки с окном, и уже потом перейдем к форме связи. Сложного в этом ничего нет. Из архива, скаченного выше по ссылке, нужно подключить три файла: два файла из папки «modal — JS» и один из папки «modal — CSS». Все они относятся к модальному окну, это для ясности.
Теперь открываем файл style.css и добавляем еще такой код (это стили кнопки):
Осталось вывести разметку.
Открываем файл footer.php и перед функцией вставляем HTML-разметку. На этом этапе у вас должна получиться плавающая кнопка на странице, по нажатию которой появляется всплывающее окно (пока что пустое).
Форма связи
Ну вот, дошли до последней части «урока».
Думаю, плагином «Contact Forms 7» все умеют пользоваться. После того, как в нем создадите новую форму, вместо стандартного кода, что образовывается по умолчанию, добавьте этот:
Теперь выводим форму в разметке выше в указанном там месте:
Стили оформления, по идее, должны подхватиться из вашей текущей WordPress темы, но можно прописать свои. В файл style.css прописываем такой код:
Обратите внимание на идентификатор перед тегами формы в стилях. У вас, естественно, он будет другой. Следовательно, его нужно поменять на свой, чтобы стили заработали. Узнать его можно в исходном коде.
Форма обратной связи в модальном окне
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript’ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
Итак, идем дальше и по порядку. Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму.
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
HTML:
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 4. Обработчик, отвечающий за отправку писем
Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше.
Шаг 5. «Прикрутка» основного фреймворка jQuery
Шаг 6. Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Шаг 7. jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
jQuery
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Курочкин
Урок создан: 15 Июня 2009
Просмотров: 249285
Правила перепечатки
5 последних уроков рубрики «Для сайта»
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Как сделать всплывающую форму
Сегодня вы узнаете, как сделать всплывающую форму на 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 и внести все необходимые изменения через этот редактор.
В первом случае подключение скрипта будет выглядеть так: