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

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

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

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-селектор элемента, который вы хотите сделать местом размещения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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