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

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

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

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

Тип формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Далее.

Параметры

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

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

Тут можно:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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