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

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

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

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

• перед элементом;
• после элемента;
• внутри элемента вначале;
• внутри элемента вконце;
• заменить элемент.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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