Отслеживание событий и поведения

Deep Links and Universal Links

Email

Омниканальность

In-App
Рекомендации в мобильных приложениях

Автоматизация

Документы

Соответствие GDPR

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

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

Важно

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

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

Ниже – инструкция по созданию виджета для сайта.

1. Тип формы и поля

  1. Перейдите на вкладку "Сайт" –> "Виджеты", нажмите "Создать форму подписки".
    Создание нового виджета
  2. Выберите тип формы, которую хотите создать: Встроенная, Поп ап, Плавающее окно или Плавающая панель. Для примера мы создадим встроенную форму.
  3. Укажите название формы. Обратите внимание, что название формы используется для поиска внутри системы; посетители не увидят ее на вашем сайте.
  4. Выберите типы данных, которые собираются из формы: email, номер телефона и/или имя.
  5. По завершении внесения настроек на этой вкладке нажмите кнопку “Далее”.
    Настройка

2. Настройка стиля формы

На вкладке "Стили сайта" вы можете настроить:

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

3. Выбор вида формы

На этой странице вы можете выбрать один из четырех способов размещения полей формы:

  1. Вертикальный с сопроводительным текстом:
    Дизайн формы
  2. Вертикальный с картинкой и сопроводительным текстом:
    Дизайн формы
  3. Вертикальный в рамке и сопроводительным текстом:
    Дизайн формы
  4. Вертикальный с изображением сбоку и сопроводительным текстом:
    Дизайн формы

После того, как вы нажмете кнопку “Выбрать” возле одного из вариантов, откроется страница редактирования контента формы.

4. Редактирование контента формы

Здесь вы можете отредактировать контент формы в четырех базовых состояниях:

  • Форма подписки – состояние, которое видит новый пользователь.
  • Успешная подписка – состояние, которое видит пользователь, успешно отправивший запрос.
  • Повторная подписка – состояние, которое видит уже подписанный пользователь, повторно отправивший запрос.
  • Ошибка – состояние, которое видит пользователь в случае неудачной попытки отправить запрос.

Левая панель настроек

Редактор форм работает по принципу Drag-n-Drop конструктора. Если вам нужно добавить элемент, просто нажмите на него левой кнопкой мыши и перенесите в соответствующее место формы.

Элементы структуры формы

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

Панель редактирования

Правая панель настроек

Справа на странице размещены три вкладки с настройками редактирования: "Оформление", "Контент" и "Общие".

Правая панель настроек

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

Эта вкладка предназначена для редактирования шрифта и адаптивности (ширина экрана для перехода к мобильной версии).

Стиль текста

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

Стиль текста

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

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

Чтобы изменить отображение элементов на мобильном, нажмите на элемент и перейдите на вкладку "Контент" → "Мобильные настройки".

Вкладка "Контент"

Отредактируйте отдельные структурные части формы.

Форма может состоять из следующих уровней:

  • структура
  • контейнер (для некоторых видов форм)
  • элемент

Структура формы

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

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

Важно

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

Значок замка

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

Изменить расположение элементов можно перетаскиванием. Измените поля, скругление и обводку справа.

Настройки

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

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

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

Родительский элемент

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

Код страны

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

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

Валидация

Можно установить изображение в качестве фона структуры, контейнеров или элементов (например, кнопок).

Выбор изображения

Вкладка "Общие"

В этой вкладке выберите действие по клику:

Действие по клику

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

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

  1. С помощью стрелок "Назад" и "Вперед" вы можете отменить или повторить изменения, внесенные в форму.
  2. Настройка мультиязычности:
  • настройки внешнего вида формы осуществляются только для основного языка и копируются оттуда в другие языковые версии;
  • в языковых версиях можно изменить только текст;
  • форма отображается на языке сайта, который определяется по значению атрибута lang в теге html; если же он отсутствует – по языку браузера.
  1. Цвет фона используется для того, чтобы увидеть, как форма будет выглядеть на фоне веб-страницы.
  2. Кнопки перехода на мобильную и десктопную версии формы.
  3. Предварительный просмотр формы и ее состояний.
  4. Закрыть без сохранения.
  5. Сохранить.

5. Выбор места размещения

  1. Введите CSS-селектор элемента, который вы хотите сделать местом размещения формы.
    CSS-селектор
  2. Укажите, как разместить форму относительно найденного элемента:
  • перед элементом;
  • после элемента;
  • внутри элемента вначале;
  • внутри элемента вконце;
  • заменить элемент.

Место размещения

Если вы не готовы указать местоположение формы, активируйте переключатель "Указать местоположение позже".

Нажмите кнопку "Готово". Сначала форму будете видеть только вы, на следующей странице вы можете сделать ее общедоступной.

6. Проверка корректности настроек

После сохранения вида формы вы будете автоматически перенаправлены к параметрам. Позже вы можете найти их во вкладке "Сайт" → "Виджеты" → конкретная форма → "Параметры".

Вкладка параметров

Во вкладке "Параметры" вы можете:

  1. изменить название формы;
  2. отредактировать внешний вид
  3. отредактировать условия отображения;
  4. изменить размещение;
  5. установить действия после подписки:
  • определить группу для сохранения контактов;
  • включить или выключить DOI;
  • добавить или изменить письмо-подтверждение;
  • выбрать, куда перенаправить пользователя по нажатию ссылки для подтверждения;
  • подключить или отключить онбординг.

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

Ссылка для подтверждения

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

Тип события

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

Переадресация

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

Повышение вовлеченности

По умолчанию видите эту форму только вы. Прежде чем публиковать форму, не забудьте проверить, как она выглядит на веб-странице. Для этого нажмите кнопку "Тестировать виджет", введите веб-адрес страницы с формой и нажмите еще раз "Тестировать виджет".

Когда все необходимые настройки добавлены, нажмите кнопку "Опубликовано" и сохраните настройки.

Опубликовано

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

Значок расписания

7. Статистика

Чтобы увидеть статистику, перейдите на вкладку “Сайт” → “Виджеты”, кликните название интересующей вас формы, перейдите на вкладку "Статистика". Здесь вы можете увидеть:

  • просмотры
  • подписки
  • конверсии

Статистические данные обновляются ежеминутно. Информация представлена в виде графиков за определенный период для удобного отслеживания эффективности формы.

Статистика

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