Настройка модального окна для сайта

Модальное окно — элемент (форма подписки в eSputnik), располагающийся поверх главного окна сайта.

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

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

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

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

Получить скрипт

Создание pop-up формы для сайта

Тип формы

  1. Перейдите во вкладку “Сайт” — “Формы”:

Сайт - Формы

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

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

  1. В открывшимся меню выберите “Модальное окно”:

Тип формы и поля - Модальное окно

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

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

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

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

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

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

Цвета элементов формы

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

Стиль сайта

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

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

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

 

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

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

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

Форма с декоративными элементами на фоне

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

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

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

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

  1. Во вкладке “Оформление” вы сможете поработать со стилем текста. Стандартный шрифт — Arial, но можно выбрать любой другой. Он должен быть загружен на сайт:

Стиль текста

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

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

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

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

Как работать с базовыми компонентами

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

Редактор с настройками

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

Редактор изображений

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

Выравнивание элементов внутри

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

Фон

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

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

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

Валидация

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

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

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

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

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

Формы “Успешная подписка”, “Повторная подписка” и “Ошибка”

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

Модальные настройки

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

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

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

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

  • настройки внешнего вида формы выполняются только для основного языка, откуда копируются во все остальные языковые версии;

  • в языковых версиях можно поменять только текст;

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

  1. Кнопки перехода на мобильную или десктопную версию формы.

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

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

  4. Далее.

Параметры

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

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

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

Здесь можно:

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

Частота показа формы

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

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

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

Кому покажется форма

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

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

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

Показ формы с помощью API

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

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

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

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

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

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

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

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

Подтверждение email-адреса через отправку сообщения

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

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

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

Перенаправить юзера после клика

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

Welcome-цепочка

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

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

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

URL страницы

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

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

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

Форма видна посетителям сайта

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

Форма видна только вам

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

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

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