JS-формы

JS-формы используются для сбора лидов напрямую с сайта компании и передачи заявок в YouRich Business. Такой формат подходит, если нужно быстро разместить форму на лендинге, странице оффера или отдельной странице партнерской программы без разработки формы с нуля.
JS-форма создается внутри YouRich Business, настраивается в кабинете, а затем вставляется на сайт с помощью готового кода. После отправки формы данные пользователя автоматически попадают в раздел Лиды. Общий сценарий работы:
  1. Вы создаете JS-форму
  2. Привязываете форму к конкретному офферу
  3. Настраиваете поля, внешний вид и документы
  4. Копируете код вставки
  5. При необходимости учета дополнительных данных интегрируете JS-скрипт
  6. Размещаете код на сайте
  7. Пользователь заполняет форму и в системе автоматически создается лид

Основные настройки формы

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

Основное

На данной вкладке задаются базовые параметры формы:
  • Название формы отображается в заголовке формы на сайте. Например, «Оставьте заявку» или «Получите специальные условия».
  • Описание формы размещается под заголовком. В нем можно кратко объяснить, зачем пользователь оставляет данные и что он получит после отправки заявки.
  • Оффер – обязательная привязка формы к конкретному предложению. Это нужно для того, чтобы данные корректно относились к нужной партнерской программе.
  • Разрешенные домены – список сайтов, с которых система принимает заявки. Это защитный механизм: заявки будут приниматься только с указанных доменов.

В названии и описании формы можно использовать переменные. Они позволяют автоматически подставлять данные в текст формы:
  • {{.user_name}} – имя и фамилия пользователя, создавшего форму
  • {{.partner_name}} – имя и фамилия партнера
  • {{.offer_name}} – название оффера
Это удобно, если одна и та же форма используется в разных сценариях и должна отображать персонализированный текст.
Если форма размещена на сайте, который не добавлен в разрешенные домены, отправка заявки может быть заблокирована

Поля

Далее необходимо настроить поля, которые пользователь будет заполнять на сайте. Поля формы берутся из набора полей лида. Если нужно добавить новое поле, которого нет в списке, сначала необходимо перейти в раздел Лиды → Настройка полей и создать дополнительное поле там. После этого оно станет доступно для выбора в JS-форме.
При добавлении поля указывается: поле из списка, название поля для отображения в форме и признак обязательности. Название поля можно изменить для удобства пользователя. Если поле отмечено как обязательное, пользователь не сможет отправить форму, пока не заполнит его.

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

Стили

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

Доступны два варианта темы: светлая и темная тема. Также доступно несколько режимов отображения:
  • Inline – форма отображается прямо внутри страницы
  • PopUp – форма открывается во всплывающем окне
  • Inline + PopUp – можно использовать оба варианта
В блоке цветовой схемы можно настроить: фон формы, цвет текста, цвет кнопки, а также цвет текста кнопки. Цвета задаются в формате HEX. Это позволяет подобрать оформление формы под фирменный стиль сайта.

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

Документы

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

Превью

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

Получение кода для сайта

После настройки формы система формирует код для вставки на сайт. В разделе кода доступны несколько вариантов: предпросмотр, быстрая установка и подробно.
Во вкладке Быстрая установка отображается полный код, который можно скопировать и вставить перед закрывающим тегом на сайте.
Во вкладке Подробно код разделен на части. Это удобно, если вы хотите отдельно подключить основной скрипт и отдельно разместить блок Inline-формы или кнопку PopUp.

Размещение JS-формы на сайте

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

1. Подключение скрипта формы. Сначала необходимо подключить основной скрипт формы. Скопируйте код подключения и разместите его перед закрывающим тегом на всех страницах, где будет использоваться форма.
2. Подключение JS-скрипта. При необходимости полноценно отслеживать лиды и корректно их идентифицировать в системе, вам необходимо добавить на сайт «JS-скрипт»
3. Добавление контейнера формы. После подключения скрипта необходимо разместить контейнер формы в том месте страницы, где она должна отображаться. Для Inline-формы рекомендуем использовать отдельный контейнер, в котором форма будет отображаться на странице, а для PopUp-формы используется кнопка или другой элемент, при нажатии на который она откроется.
4. Форма отображается на сайте. После размещения на сайте форма отображается как полноценный интерактивный блок сбора заявок. Внешний вид формы зависит от выбранных настроек оформления. Пользователь заполняет необходимые данные непосредственно на странице сайта, после чего нажимает кнопку «Отправить». Система проверяет корректность заполнения формы и создает новый лид в YouRich Business.

Требования для корректной работы формы

Для корректной работы JS-формы необходимо:
  • добавить домен сайта в список разрешенных доменов
  • убедиться, что форма активна
  • вставить код на нужную страницу сайта
  • проверить отправку тестовой заявки
  • убедиться, что лид появился в разделе «Лиды»
JS-форма может работать вместе с реферальными ссылками и промокодами. Если пользователь перешел на сайт по ссылке с параметром linkHash, а в вашего сайта дополнительно добавлен наш JS-скрипт, то после отправки формы лид будет связан с соответствующей реферальной ссылкой, партнером и оффером. Если пользователь указал промокод в форме, система также может определить партнера по этому промокоду.

Когда использовать JS-формы

JS-формы стоит использовать, если необходимо быстро разместить форму сбора заявок на сайте без отдельной разработки. Они особенно полезны, если:
  • у вас есть лендинг под оффер
  • нужно собирать заявки по партнерской программе и автоматически передавать в YouRich Business
  • требуется отслеживать источник заявки и связывать их с партнерами
  • необходимо использовать реферальные ссылки и промокоды.
JS-формы позволяют объединить внешний сайт, офферы, партнеров и лиды в единую систему учета.