Настройка всплывающего окна для сайта

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

Размещать всплывающие окна можно на любой странице сайта без изменения кода.

Обратите внимание!

Для работы модальной формы на вашем сайте необходимо установить скрипт eSputnik. Для его получения перейдите во вкладку “Сайт” → “Формы” и нажмите “Получить код”. Далее укажите домен вашего сайта, добавьте скрипт в код сайта перед закрывающим тегом </body>.

Скрипт должен быть установлен на всех страницах.

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

Тип формы

  1. Перейдите в раздел “Сайты” → “Формы” и нажмите на кнопку “Создать собственную форму”:

Создать собственную форму

  1. Выберите “Плавающая форма”:

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

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

  2. Выберите поля контакта, которые необходимо собрать:

Поля контакта, которые нужно собрать

  1. Нажмите “Далее”.

Создание формы в стиле сайта

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

Цвета элементов сайта

  1. Для выбора стиля всплывающей формы, нажмите на нужный шаблон. Всего доступно пять стилей: классический, минимализм, мягкий, декоративный и современный. Нажмите “Далее”:

Стиль сайта

  1. Выберите внешний вид формы и нажмите “Далее”. Всего их три:

  • Вертикальная с изображением:

Вертикальная с изображением

  • Горизонтальная с изображением:

Горизонтальная с изображением

  • Вертикальная без изображения:

Горизонтальная с изображением

Оформление и контент формы

Вкладка “Оформление”

  1. Во вкладке “Оформление” можно выбрать позиционирование формы и задать ей отступы:

Вкладка Оформление

  1. Тут вы сможете поработать со стилем текста. По умолчанию форма будет использовать шрифт, установленный на сайте, как основной. Но можно выбрать и другой. В таком случае шрифт должен быть загружен на сайт:

Шрифт в оформлении

  1. В разделе “Адаптивность” можно указать ширину экрана, начиная с которой отображение формы перестраивается на мобильную версию. По умолчанию это менее 576 пикселей:

Адаптивность

Вкладка “Контент”

“Контент” состоит из базовых компонентов и полей контакта. Их настройки зависят от выбранного типа формы. Чтобы добавить в форму компонент или поле — перетяните элемент в необходимую область.

Базовые компоненты

  1. По клику на главный текст появится редактор с настройками. Здесь задайте размеры контейнера, стиль текста, внутренние и внешние отступы:

Редактор для главного текста

  1. Кликнув на изображение, вы откроете его настройки. Здесь можно загрузить нужную картинку или найти ее во внутренних источниках. А еще задать ей размер и позиционирование:

Настройки изображения

  1. Перейдите к структуре, состоящей из полей для заполнения. Задайте ей нужные настройки. Кроме стандартных размеров и отступов, вы можете выбирать расположение элементов:

Расположение элементов

Можно задать структуре фон, добавить тени или обводку, скруглить углы:

Фон структуры

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

Код страны по умолчанию

Укажите обязательные поля. Например, имя и email, или все:

Валидация полей контакта

  1. На кнопке “Подписка” можно включить эффект ховера (при наведении на кнопку она будет меняться согласно заданным настройкам):

Эффект Ховера

  1. Общие настройки формы стандартные: выберите фон и расположение, задайте размеры и отступы:

Общие настройки формы

  1. Для форм “Успешная подписка”, “Повторная подписка” и “Ошибка” нужно также задать актуальные параметры (как и для формы подписки):

Другие окна формы подписки

  1. Во вкладке “Контент” в разделе “Мобильные настройки” можно увидеть, как форма будет выглядеть на телефоне, и задать все необходимые настройки:

Мобильные настройки формы

Верхняя панель настроек

Верхняя панель настроек

  1. Стрелки “Назад” и “Вперед” позволяют отменить или вернуть внесенные изменения в форму.

  2. Настройки мультиязычности:

  • настройки внешнего вида формы выполняются только для основного языка, откуда копируются во все остальные языковые версии;
  • в языковых версиях можно поменять только текст;
  • форма отображается на языке сайта, который определяется по значению атрибута lang в теге html; если его нет – по языку браузера.
  1. Кнопки перехода на мобильную или десктопную версию формы.

  2. Предпросмотр формы.

  3. Закрыть редактирование.

  4. Далее.

Параметры

Параметры формы

Для выбора условия показа окна, нажмите “Редактировать” напротив этого пункта:

Условия показа формы

Тут можно:

  • Выбрать частоту показа:

Частота показа

  • Когда покажется форма:

Когда показывать форму

  • Кому показывать:

Кому показывать форму

  • Задать страницы, на которых будет показываться форма. Или исключить ненужные:

Страницы, на которых будет показываться форма

  • Можно управлять показом формы с помощью API, показывать по клику на элемент на сайте. Для этого необходимо вставить CSS-селектор элемента вызова:

Условия показа формы

Или показывать с помощью JavaScript:

Показ с помощью JavaScript

Действия после заполнения формы

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

Сохранять контакты в группу

Добавлять можно либо только новые, либо и существующие контакты:

Добавлять только новые контакты

  1. Подтверждение email-адреса через отправку сообщения. Зачем нужен Double Opt-In, читайте здесь.

Double Opt-In

  1. Выбрать письмо, подтверждающее подписку:

Отправить письмо-подтверждение

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

Страница после клика

  1. При желании выстраивайте свою welcome-цепочку:

Welcome-цепочки

  1. Сохранив все настройки, проверьте, как форма отобразится на сайте. Для этого нажмите на кнопку “Смотреть на странице”:

Смотреть на странице

  1. Введите ссылку на сайт и нажмите “Смотреть на странице”:

Смотреть на странице

  1. При удачном выполнении всех шагов форма отобразится у вас на сайте согласно заданным условиям:

Примеры формы

  1. После тестирования формы откройте ее, нажав на кнопку “Видна посетителям сайта”, после этого нажмите “Сохранить”:

Видна только посетителям сайта

  1. Чтобы остановить показ формы, нажмите на кнопку “Видна только вам”, после этого — “Сохранить”:

Видна только вам

  1. Во вкладке “Статистика” можно увидеть результаты формы: просмотры, подписки и конверсии.

Статистика по формам

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email