Своя форма подписки

В блоке «Свой HTML» можно разместить форму и передать её данные в SenlerLanding.subscribe. Телефон и email сохраняются в контактах лида, остальные разрешённые поля — в его переменных. Лид определяется по проверенному аккаунту VK, Telegram или MAX.

Разрешите группы и поля

Откройте настройки лендинга → вкладку «Разрешения».
В разделе «Разрешения для HTML-блоков» найдите «Сегменты». Нажмите «Добавить» и выберите сегменты, на которые посетитель сможет подписаться.
Рядом с ID под названием нужного сегмента находится иконка копирования. Нажмите её и вставьте значение в segmentId вашего кода.

В разделе «Данные лида» включите Email и Телефон, если они нужны форме.

Чтобы добавить поле анкеты, в разделе «Переменные лида» нажмите «Добавить» и выберите существующую переменную. Например, разрешите city для города и age для возраста. Если переменной ещё нет, сначала создайте её в настройках переменных лида.

Разрешите группы и поля. 1. выберите существующую переменную — 1. выберите существующую переменную

Переменные и данные лида разрешаются один раз для всего лендинга. Их можно настроить до выбора сегментов. Удаление последнего сегмента сохраняет выбранные поля, но запрещает подписки через SDK.

Крестик на переменной позволяет убрать её из разрешённых. Корзина рядом с сегментом запрещает подписку SDK на этот сегмент. Подробности доступны по иконке помощи рядом с заголовком раздела.

Сохраните настройки и опубликуйте лендинг. Пока список групп пуст, подписки через SDK запрещены. Можно разрешить до 20 сегментов и до 20 переменных на лендинг. Эти настройки разрешают запись полей, но сами по себе не делают их обязательными.

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

Добавьте форму

Для примера разрешите телефон и текстовую переменную city. Во вкладке HTML блока добавьте:

<form class="signup">
  <label>Телефон
    <input name="phone" type="tel" autocomplete="tel" maxlength="120" required>
  </label>
  <label>Город
    <input name="city" maxlength="100" required>
  </label>
  <button type="submit">Получить программу</button>
  <p role="status" aria-live="polite"></p>
</form>

Во вкладке JS вставьте код и замените ID_СЕГМЕНТА на ID под названием выбранной группы:

{
  const root = document.currentScript.parentElement;
  const form = root.querySelector('.signup');
  const button = form.querySelector('button');
  const message = form.querySelector('[role="status"]');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (button.disabled || !form.reportValidity()) return;
    const data = new FormData(form);
    button.disabled = true;
    message.textContent = '';
    try {
      const result = await SenlerLanding.subscribe({
        segmentId: 'ID_СЕГМЕНТА',
        contact: { phone: String(data.get('phone')).trim() },
        variables: { city: String(data.get('city')).trim() }
      });
      message.textContent = result.status === 'redirected'
        ? 'Продолжите подписку в приложении.'
        : ['subscribed', 'already_subscribed'].includes(result.status)
          ? 'Готово! Данные сохранены.' : 'Подписка отменена.';
    } catch (error) {
      message.textContent = error.message;
    } finally {
      button.disabled = false;
    }
  });
}

В CSS блока можно добавить простое оформление:

:scope .signup { display: grid; gap: 16px; }
:scope label { display: grid; gap: 6px; }
:scope input, :scope button {
  padding: 12px 16px;
  border: 1px solid currentColor;
  border-radius: 12px;
  color: inherit;
  background: transparent;
}

HTML-форма не отправляет нативный запрос по action: обработчик вызывает SDK. Обязательные согласия группы показываются штатным интерфейсом. Если телефон уже передан в contact, повторно вводить его не нужно. contactCapture позволяет запросить разрешённый контакт штатной формой, когда своего поля нет.

Что проверяет сервер

Сервер проверяет опубликованный список групп, разрешённые поля и типы переменных. Подмена HTML или прямой запрос к API не даёт записать другие переменные либо выбрать чужого лида. Передавайте числовую переменную числом, например age: 25, логическую — true или false; строка "25" не заменяет число.

Все данные одной формы ограничены 16 КиБ. При переходе в приложение они хранятся на сервере один час; телефон и значения переменных не помещаются в URL. После истечения часа заполните форму заново.

Контакты и переменные сохраняются вместе с подтверждённой подпиской до запуска её автоматизации. Повторная подписка обновляет переданные поля, но не создаёт новое событие подписки, если лид уже состоит в группе. При отмене до подтверждения данные не записываются в лид. При ошибке транзакции все её изменения откатываются.

Проверьте форму по опубликованной ссылке. В предпросмотре кабинета видны поля и стили, но JavaScript не выполняется. Подписка на публичной странице выполняется по-настоящему.