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

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

Важно!

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

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

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

Ниже — инструкция по созданию веб-формы для сайта.

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

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

Сайт —> Формы

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

Создать форму подписки

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

4. Задайте название формы.

5. Выберите типы данных, которые будут собираться из формы: email, номер телефона и/или имя.

6. Закончив вносить настройки в этой вкладке, нажмите кнопку “Далее”.

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

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

На странице “Стили сайта” вы можете настроить:

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

2. Дизайн формы: Классический, Минимализм, Мягкий, Декоративный или Современный. Закончив вносить настройки на этой странице, нажмите кнопку “Далее”.

 Дизайн формы

3. Выбор расположения полей формы

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

1. Горизонтальный:

Горизонтальная форма

2. Вертикальный:

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

3. Вертикальный с картинкой:

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

4. Горизонтальный с сопроводительным текстом:

Горизонтальная форма с сопроводительным текстом

5. Вертикальный с сопроводительным текстом:

Вертикальная форма с сопроводительным текстом

6. Вертикальный с картинкой и сопроводительным текстом:

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

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

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

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

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

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

Слева на странице расположены 2 вкладки с настройками редактирования: “Оформление” и “Контент”.

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

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

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

Стиль текста

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

Стиль текста

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

Шрифт заголовка

Брейкпоинт

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

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

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

Перейдя во вкладку “Контент”, вы сможете редактировать отдельные структурные части формы.

Структура формы может состоять из таких уровней:

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

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

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

Редактирование контента

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

Отображение элемента

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

Значок цепочки

Такие параметры полей ввода, как фон, тень и обводка, по умолчанию имеют значение “Всегда”. Это означает, что при ошибке они остаются неизменными. Если вы хотите, чтобы при ошибке они менялись, в выпадающем списке под названием параметра выберите “Зависит от состояния”.

Настройки фона

После этого укажите параметры элемента по умолчанию и при ошибке.

Параметры элемента

Параметры кнопки тоже имеют варианты “Всегда” и “Зависит от состояния”. Но здесь “Всегда” означает, что кнопка не меняется при наведении курсора. Если вы хотите, чтобы при наведении она менялась, в выпадающем списке под названием параметра выберите “Зависит от состояния”. После этого укажите параметры кнопки по умолчанию и на ховере.

Параметры кнопки

Ширину, высоту и внутренние отступы вы можете редактировать как на панели слева, так и с помощью перетаскивания границ элементов.

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

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

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

Настройка элемента более высокого уровня

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

Картинка-фон

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

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

Проверка данных и отображение ошибок, появляющихся при некорректном заполнении поля, происходят автоматически. Ошибки отображаются в тултипе.

Ошибки при заполнении

Также во вкладке “Контент” вы можете выбрать изображение, которое будет использоваться элементе "Картинка", и задать настройки его отображения.

Картинка для формы

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

Валидация

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

Верхняя панель

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

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

2. Цвет фона – применяется для того, чтобы увидеть, как форма будет выглядеть на фоне веб-страницы.

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

4. Предпросмотр формы и ее состояний.

Когда вы закончите редактирование контента, нажмите “Далее” на верхней панели.

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

1. Введите CSS-селектор элемента, который вы хотите сделать местом размещения.

CSS-селектор

2. Укажите, как расположить форму относительно найденного элемента:

  • перед элементом,
  • после элемента,
  • внутри элемента, первой,
  • внутри элемента, последней.

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

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

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

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

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

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

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

Письмо-подтверждение подписки

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

Тип события

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

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

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

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

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

Предпросмотр

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

Публикация

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

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

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

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

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