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

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

Важно!

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

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

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

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

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

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

Сайт —> Формы

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

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

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

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

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

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

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

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

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

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

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

 Дизайн формы

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

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

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

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

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

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

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

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

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

Форма с обрамлением и текстом

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

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

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

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

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

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

Drag-n-Drop редактор форм в действии

Можно добавить три типа элементов:

  • базовые компоненты (кнопки, текст, изображение и контейнер);
  • поля контакта (емейл, имя и телефон);
  • согласие на обработку персональных данных.

Эти элементы пригодятся, если на старте создания формы вы забыли выбрать типы данных, которые она будет собирать (по умолчанию активирован только сбор email-адресов). Или если вам понадобится еще одна кнопка, изображение и т. д.

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

Справа на странице размещены две вкладки с настройками редактирования: "Стиль текста" и "Адаптивность".

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

Вкладка "Стиль текста"

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

Как переключить шрифты

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

Где найти название стиля шрифта

Вкладка "Адаптивность"

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

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

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

Подробные настройки виджетов

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

Стиль виджета

Чтобы задать общие параметры виджета, нажмите на любой свободный от элементов участок. Дальше можно:

  • выбрать ширину и высоту формы;
  • выровнять элементы внутри нее;
  • задать внутренние и внешние отступы;
  • выбрать цвет фона и варианты его заполнения – заливка или градиент.

Или добавьте в качестве фона изображение. Как это сделать – смотрите в анимации.

Алгоритм добавления изображения в качестве фона

Стиль текста

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

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

Выбираем цвет заголовкаТаким образом можно стилизовать буквы во всех элементах с текстом. Если вы хотите подкорректировать окошки о состоянии подписки (успешная, ошибка и т. д.), просто нажмите на их элементы.

Варианты отображения статуса подписки

Работа с изображениями

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

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

Инструменты для редактирования изображения

Если у вас нет собственного изображения, подберите из бесплатных библиотек абстракцию, иллюстрацию или иконку. Ссылки на соответствующие сервисы есть в нашем редакторе.

Стиль СТА-кнопки

С СТА-кнопкой для формы можно сделать многое. Доступны следующие настройки:

  • размер элемента (ширина и высота);
  • редактирование стиля текста кнопки (толщина шрифта, размер, цвет, выравнивание и т. п.);
  • скругление углов;
  • фон;
  • добавление обводки;
  • добавление тени.

Еще нужно настроить эффект ховера – то, как будет меняться кнопка, когда пользователь наведет на нее курсор. Можно сделать так, чтобы менялся только цвет фона или текста или все вместе.

Какие эффекты ховера доступны

Работа с полями контакта

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

Такой переключатель есть у каждой из строк для сбора данныхА в строке с номером телефона следует выбрать код страны по умолчанию:

Код страны можно выбрать в выпадающем списке

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

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

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

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

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

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

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

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

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

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

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

CSS-селектор

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

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

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

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

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

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

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

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

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

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

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

Тип события

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

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

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

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

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

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

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

Публикация

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

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

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

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

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