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

Содержание
  1. Как сделать всплывающую форму
  2. Демонстрация всплывающей формы
  3. HTML структура
  4. CSS код
  5. JS код
  6. Комментарии ( 1 ):
  7. Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
  8. Установка Contact Form 7
  9. Установка Popup Maker
  10. Плагином Easy Fancy box в форме ссылки
  11. Popup в Elementor по кнопке
  12. Создаем всплывающее окно при входе на сайт на HTML и jQuery
  13. Начало
  14. Импорт шрифтов Google
  15. Сброс CSS и стилей сайта по умолчанию
  16. Ссылка на jQuery v1.10
  17. Создание CSS-наложения
  18. Сначала рассмотрим установку позиции и добавление цвета
  19. Стили панели входа на HTML и CSS
  20. Создание кнопки закрытия
  21. Создание формы входа
  22. Стили кнопки входа
  23. HTML-код формы входа
  24. jQuery / Javascript
  25. AJAX и HTML 5
  26. Заключение и полный код
  27. Всплывающая форма обратной связи без плагинов
  28. Навигация по статье:
  29. Скрипт для создания всплывающей формы обратной связи
  30. Загружаем необходимые файлы на хостинг
  31. Подключаем скрипт всплывающей формы обратной связи к сайту
  32. Создать всплывающую форму
  33. Шаг 1. Нажмите «Создать форму»
  34. Шаг 2. Выберите понравившийся шаблон и назовите его
  35. Шаг 3. Настройте форму
  36. Шаг 4. Работа с готовой формой
  37. Шаг 5. Статистика (пока BETA)

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

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

Источник

Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker

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

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

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.

Установка Contact Form 7

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Переместил получившийся шорткод между тегами label, должно получится так.

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Делаем по аналогии, что получилось.

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

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

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

Установка Popup Maker

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

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

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

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

Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.

Не забываем нажать на опубликовать.

В запись загрузил изображение с помощью медиафалов.

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Открывается новая страница в браузере.

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать “Редактировать как HTML”, а дальше по старой схеме.

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

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

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

Вставка кода в виджет

По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

Показ формы связи через elementor

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

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

Читайте также:  Как сделать будку для хаски видео

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

Источник

Создаем всплывающее окно при входе на сайт на HTML и jQuery

Начало

Импорт шрифтов Google

Сброс CSS и стилей сайта по умолчанию

Ссылка на jQuery v1.10

Создание CSS-наложения

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

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

Сначала рассмотрим установку позиции и добавление цвета

Перед тем, как перейти к popup окну для сайта, пояснение Flexbox :

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

Стили панели входа на HTML и CSS

Теперь у нас есть контейнер, и нужно разместить в нем создаваемую форму входа. Общей чертой подобных форм с popup окном jQuery является полупрозрачная граница. Мы используем элемент контейнера для достижения этого эффекта, но можно использовать границу, чтобы получить то же самое:

Большинство CSS-свойств очевидны. С помощью значения rgba мы еще раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.

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

Теперь нужно оформить внутри панели входа заголовок ( h3 ):

Создание кнопки закрытия

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

Вот объяснение кода:

Создание формы входа

Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:

Сначала мы определили стили для меток формы. Благодаря этому пользователь может нажать текст и перейти к соответствующему полю формы. Элемент label работает непосредственно с id данных.

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

Стили кнопки входа

Стили кнопки не содержат ничего нового:

Для кнопки мы задали приятный синий фон с полупрозрачной темной рамкой. Этот прием позволяет не менять цвет границы, когда мы изменяем цвет фона. Мы также установили для кнопки стандартную CSS-анимацию перехода при смене цвета фона.

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

HTML-код формы входа

Полный HTML-код формы входа:

jQuery / Javascript

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

Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click :

Использование jQuery-функции preventDefault() позволяет остановить связь с перенаправлением пользователя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:

С помощью этой простой функции мы продублируем функционал для закрытия окна.

В JS popup окне сделаем так, чтобы пользователь мог нажать клавишу ESC для закрытия окна:

Вот все весь код jQuery :

AJAX и HTML 5

Что, если вы захотите сделать эту форму еще лучше? Можно включить в нее форму регистрации. Вот как это можно сделать без дублирования кода с помощью запроса JQuery AJAX GET :

Я создал новый класс для формы входа и ссылки для регистрации под названием « overlayLink ». После того, как пользователь нажимает на этот элемент, запускается функция.

Код страницы ajax/login-form.html будет выглядеть следующим образом:

Ссылки для вызова запроса AJAX будут выглядеть так:

Затем можно создать файл ajax/registration-form.html :

Заключение и полный код

Спасибо за внимание. Сегодня мы узнали, как сделать popup окно. Надеюсь, это руководство оказалось полезным. Вот полный код:

Источник

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

Приветствую вас на сайте 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 и внести все необходимые изменения через этот редактор.

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

Источник

Создать всплывающую форму

Всплывающие формы от UniSender — формы для автоматического сбора контактов, которые посетитель сайта видит, после того как выполнит определенные действия.

Формы должны побуждать совершить полезное с точки зрения маркетинга действие — подписаться на email-рассылку, оставить контактные данные, принять участие в акции и т.п.

Создайте всплывающую форму на странице «Инструменты – Всплывающие формы».

Шаг 1. Нажмите «Создать форму»

Шаг 2. Выберите понравившийся шаблон и назовите его

Шаг 3. Настройте форму

Настройте внешний вид формы.

Измените текст формы.

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

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

Мы выбрали «Увел мышку за пределы окна» и «Провел на странице 5 секунд». Значит, форма отобразится, когда пользователь проведет на странице более 5-ти секунд или когда потянется закрывать вкладку с сайтом.

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

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

Укажите звездочку: https://example.com/*, чтобы форма была показана на всех страницах сайта, а не только на главной.

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

Выберите список, куда добавлять ваши контакты.

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

Если вы выбрали «С письмом подтверждения подписки», заполните «Адрес отправителя», «Имя отправителя» и «Тему письма».

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

У вас несколько сайтов с установленными на них формами. Создайте доп поле «Сайт» и свяжите его со ссылкой на ваш сайт.

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

Скопируйте код и разместите на вашем сайте.


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

Активируйте форму и сохраните изменения.

Шаг 4. Работа с готовой формой

Все ваши формы доступны на странице «Инструменты – Всплывающие формы».

Вы можете их редактировать, копировать, удалить, активировать и отключить.

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

Шаг 5. Статистика (пока BETA)

На начальной странице вам доступна статистика: сколько посетителей видели вашу форму и сколько оставили свои контакты.

Кликните на «Статистика» в списке всплывающих форм:

Вы увидите статистику по вашей форме за последние 30 дней:

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

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

Сравните данные по условиям показа, которые заданы для формы. Максимальное количество условий для сравнения — 2:

Выберите дату, и ознакомьтесь со статистикой за указанный вами период.

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

Для просмотра доступны данные по всем формам:

Источник

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