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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стиль текста

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

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

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

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

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

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

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

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

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

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

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

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

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

А в строке с номером телефона следует выбрать код страны по умолчанию:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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