Тонкая настройка формы в поп-апе

Режим «Тонкая настройка» включается кнопкой внизу страницы редактирования виджета или сочетанием клавиш Alt+X.

В этом режиме можно редактировать код страниц виджета и CSS, а также добавлять JavaScript-код, связанный с его работой.

Внимание: если выключить режим «Тонкая настройка», все изменения кода, сделанные в нём, пропадут. Вернутся последние настройки, сохранённые в обычном режиме до включения тонкой настройки.

Ниже описаны основные принципы работы с кодом в этом режиме.

Код страниц виджета#

В режиме тонкой настройки у каждой страницы виджета своя вкладка: Форма подписки — основной поп-ап, Подтверждение — сообщение после отправки формы. Рядом находятся вкладки CSS / Less и JavaScript.

Код страницы пишется в синтаксисе, похожем на JSX: это HTML с компонентами LeadPlan. По умолчанию код страницы «Форма подписки» выглядит так:

<lpPage>
  <lpImage data="left-img"/>
  <div class="lp-content-wrapper">
    <div class="lp-content">
        <lpHtml data="title"/>
        <lpHtml data="description"/>
        <lpForm class={params.form_style} />
    </div>
  </div>
  <lpClose class={params.close_style} />
</lpPage>

Набор блоков зависит от шаблона, который вы выбрали в галерее. Кроме стандартных страниц, к виджету можно добавить свои — подробнее в статье «Как добавить новую страницу виджета».

Компоненты LeadPlan#

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

Выражения в фигурных скобках подставляют значения из настроек виджета. Например, class={params.form_style} добавляет форме класс стиля, выбранного в поле «Стиль элементов формы» раздела «Параметры», а class={params.close_style} — класс стиля крестика.

У классов всех элементов есть префикс lp- (строчными буквами). Рекомендуем придерживаться этого правила и в своём коде. Префикс LP- заглавными остался от старого редактора.

Код страницы «Подтверждение»#

Код сообщения об отправке формы редактируется на отдельной вкладке Подтверждение. Структура такая же, как у основной страницы, но <lpHtml> подставляет заголовок и описание из раздела «Подтверждение».

Заголовок и описание#

<lpHtml data="title"/> выводит заголовок, <lpHtml data="description"/> — описание. Пример результата для основной страницы:

<div class="lp-title">
Подпишитесь на нашу рассылку!
</div>
<div class="lp-description">
<p>Зарегистрируйтесь, чтобы получать последние новости и специальные предложения.</p>
</div>

Компонент lpForm#

Компонент <lpForm> выводит форму по настройкам подраздела «Форма» в разделе «Форма подписки». Количество полей зависит от настроек. Форма по умолчанию:

<form novalidate="novalidate" class="lp-form">
<div class="lp-input-block">
<input type="text" class="lp-input" name="email" placeholder="Email" value="">
</div>
<div class="lp-input-block">
<input type="text" class="lp-input" name="name" placeholder="Имя" value="">
</div>
<div class="lp-submit-block">
<button type="submit" class="lp-submit">Подписаться</button>
</div>
</form>

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

Чтобы задать свою форму, замените компонент <lpForm/> кодом формы с нужными полями. Общая схема:

<form novalidate="novalidate" class="lp-form">
<!-- Здесь поля формы -->
<!-- Конец блока с полями -->

<!-- Кнопка отправки -->
<div class="lp-submit-block">
<button type="submit" class="lp-submit"></button>
</div>
</form>

Примеры разных элементов формы — ниже.

Радиокнопки (radio)#

<div class="lp-input-block">
<input type="radio" name="lp-rb-1" value="1" />Номер 1
<input type="radio" name="lp-rb-1" value="2" />Номер 2
<input type="radio" name="lp-rb-1" value="3" />Номер 3
</div>
<div class="lp-input-block">
<input type="radio" name="lp-rb-2" value="2-1" />Номер 2-1
<input type="radio" name="lp-rb-2" value="2-2" />Номер 2-2
<input type="radio" name="lp-rb-2" value="2-3" />Номер 2-3
</div>

Флажки (checkbox)#

<div class="lp-input-block">
<input type="checkbox" name="lp-cb-1" value="1" />cb 2-1
<input type="checkbox" name="lp-cb-2" value="2" />cb 2-2
<input type="checkbox" name="lp-cb-3" value="3" />cb 2-3
</div>

Выпадающий список (select)#

<div class="lp-input-block">
<select class="lp-input" name="lp-select-1" placeholder="Выбор">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

Текстовое поле (text)#

<div class="lp-input-block">
<label>Text-1</label>
<input class="lp-input" type="text" name="lp-text-1" value="text-1" />
</div>

Числовое поле (number)#

<div class="lp-input-block">
<label>Number-1</label>
<input class="lp-input" type="number" name="lp-number-1" value="123" />
</div>

Многострочный текст (textarea)#

<div class="lp-input-block">
<textarea class="lp-input" name="lp-ta-1"></textarea>
</div>

Чекбокс согласия#

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

<div class="lp-note">
<div class="lp-input-block">
<input class="lp-checkbox" id="lp-conditions-mark-1" name="lp-conditions-mark-1" type="checkbox" value="">
</div>
<label class="lp-checkbox-label" for="lp-conditions-mark-1">
<p>Я соглашаюсь с условиями обработки персональных данных</p>
</label>
</div>

CSS#

На вкладке CSS / Less можно писать стили на CSS или Less. По умолчанию поле пустое: цвета, шрифты и размеры из раздела «Параметры» применяются автоматически, а здесь задаются только ваши дополнительные стили.

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

При этом поп-ап загружается прямо в HTML-код сайта и может наследовать некоторые стили сайта. Это тоже нужно учитывать.

Адаптивность#

Перед показом поп-ап измеряется в браузере посетителя. Если его ширина вместе с боковыми отступами больше ширины окна, к обёртке поп-апа добавляется класс lp-mobile. Та же проверка повторяется при каждом изменении размера окна.

Поэтому медиазапросы CSS (media queries) для адаптивности не обязательны, хотя использовать их можно.

Вот весь CSS-код, который делает базовый поп-ап адаптивным:

.lp-mobile .lp-image {
display:none;
}
.lp-mobile .lp-input-block {
display: block;
padding-bottom: 7px;
padding-right: 0px;
}
.lp-mobile .lp-note .lp-input-block {
display: table-cell;
padding-right: 5px !important;
}
.lp-mobile .lp-submit {
margin-top: 10px;
width: 100%;
height: 40px;
}
.lp-mobile .lp-submit-block {
display: block !important;
}
.lp-mobile .lp-description {
font-size: 14px;
}

JavaScript#

При включении тонкой настройки поле JavaScript пустое. Код из этого поля выполняется внутри виджета: здесь доступны объекты lpTool и lpUser. Со страницы сайта эти объекты не видны.

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

Объект lpTool#

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

lpTool.element#

Ссылка на DOM-элемент виджета. Например, поле email можно получить так:

var email = lpTool.element.querySelector('input[name="email"]');

lpTool.data#

Значения всех страниц формы: {email, phone, name, …}. Ключи — системные имена полей.

События#

На события подписываются вызовом функции, например lpTool.onShow(fn). Присваивание вида lpTool.onShow = fn из старых примеров на текущей версии ничего не делает.

В обработчик приходит объект {id, data, testId}: id — номер виджета, data — данные формы (то же, что в lpTool.data).

Цель в Яндекс Метрике после заявки:

lpTool.onSubmit(e => {
  ym(12345, 'reachGoal', 'lead', { email: e.data.email });
});

Город посетителя в данных заявки:

lpTool.beforeSubmit(e => {
  e.data.city = lpUser.environment.cityName || '';
});

Объект lpUser#

Доступен только в коде виджета.

lpUser.data — данные из прошлой заявки посетителя на этом сайте: name, email, phone, surName и другие поля. У нового посетителя объект пустой. Подходит, чтобы обратиться к посетителю по имени или заполнить форму заранее.

lpUser.environment — данные о посетителе. Значения могут быть null, проверяйте их перед использованием.

Например, lpUser.environment можно добавить к заявке, чтобы передать в CRM, или подставить город в текст виджета.

Функции для управления виджетами#

Эти функции доступны на странице сайта, где установлен код LeadPlan. Аргумент id — номер виджета из личного кабинета, число. Если вызвать функцию до загрузки скрипта LeadPlan, вызов встанет в очередь и выполнится после загрузки.

Имена функций пишутся заглавными буквами: LP_show, а не lp_show.

Показ виджета по клику на кнопку:

document.querySelector('#promo-btn').addEventListener('click', () => LP_show(85116));

Показ второго виджета после заявки в первом (код в поле JavaScript первого виджета):

lpTool.onSubmit(() => {
  LP_show(85117);
});

События виджетов на странице сайта#

Со страницы сайта события виджетов ловятся через объект window.leadplan. Например, заявка из виджета 85116:

leadplan.onSubmit(85116, e => console.log(e.data));