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

![](https://chat.dashamail.ru/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBVZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f766c0a2adc0b2e44d234ee38c1ec8560099a71b/\__2025-11-21__133204.png)

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

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

Далее будут описаны базовые принципы и логика работы с кодом в режиме тонкой настройки.

## **Настройка HTML**

HTML код по умолчанию выглядит так:

```
<div class="lp-image">
    {{image}}
</div>
<div class="lp-content">
    {{title}}
    {{description}}
    {{form}}
    {{note}}
</div>
<div class="lp-close-x"></div>
```

Он содержит три основных блока:

* LP-image, в котором содержится изображение, если оно включено в настройках;

* LP-content для всего остального содержимого поп-апа;

* LP-close-x служит для отрисовки крестика закрытия поп-апа.

\
В коде присутствуют специальные переменные: {{image}}, {{title}}, {{description}}, {{form}} и {{note}}. При генерации окончательного HTML кода виджета вместо них подставляются динамические данные, сгенерированные в соответствии с настройками, произведёнными на вкладке «Содержимое».

*Использование переменных не является обязательным и служит лишь для удобства настройки поп-апа. Вы можете полностью переопределить своим любой HTML код, возвращаемый переменными.*

*Для удобства работы, классы всех элементов имеют префикс LP-. Рекомендуется следовать этому правилу в процессе доработок и создания своего HTML кода.*

## **HTML код поп-апа благодарности за отправку**

Если в [настройках действий после отправки](https://help.leadplan.ru/hc/leadplan/articles/1768899375-) используется вариант «Показать сообщение», то после успешной отправки формы посетителю сайта будет показан поп-ап, содержащий информационное сообщение.\
\
Для информационного сообщения используется HTML код самого поп-апа, отличающийся только набором подставляемых переменных: в него будет загружено то же изображение, свои заголовок и описание, не будут загружены форма и комментарий под формой.\
\
Благодаря такому решению, вам не придётся делать двойную работу по созданию отдельного кода для поп-апа с формой и поп-апа подтверждения.

## **Переменная {{image}}**

В переменную {{image}} подставляется изображение (если оно используется), в соответствии с настройками, производимыми на вкладке «Содержимое». Код будет возвращен в виде:

```
<img src="https://anysite.ru/image.jpg" style="height: 210px;">
```

## **Переменная {{title}}**

В эту переменную будет подставляться «Заголовок» формы в основном поп-апе и «Заголовок сообщения об отправке» в информационном поп-апе после отправки основной формы. Код будет возвращен в виде:

```
<div class="lp-title">
    Подпишитесь на нашу рассылку!
</div>
```

для основного поп-апа и:

```
<div class="lp-title">
    Спасибо!
</div>
```

для последующего.

## **Переменная {{description}}**

В переменную {{description}} будет подставляться «Описание» формы в основном поп-апе и «Описание в сообщении об отправке» во втором информационном поп-апе. Код будет возвращен в виде:

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

для основного поп-апа и:

```
<div class="lp-description">
    <p>Вы успешно подписаны.</p>
</div>
```

для последующего.

## **Переменная {{form}}**

В {{form}} подставляется код формы, сгенерированный в соответствии с настройками, производимыми на вкладке «Содержимое». В зависимости от настроек, в этой форме может быть разное количество полей. Возвращаемый HTML код формы по умолчанию:

```
<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 и будут доступны в системе интеграций.\
\
Для переопределения формы необходимо в режиме Тонкой настройки вместо переменной {{form}} написать код формы и внутри необходимые поля. В общем виде, конструкция выглядит так:

```
<form novalidate="novalidate" class="lp-form">
    <!-- Ниже должны быть поля -->
    <!-- Конец блока с полями -->

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

Далее рассмотрим, как работать с различными элементами форм.

## **Radiobutton (переключающийся флажок)**

```
<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" value="" />
</div>
```

*В информационном поп-апе, появляющемся после отправки основного, код формы не возвращается.*

## **Переменная {{note}}**

Содержимое и настройки этой переменной, как правило выполняют роль подтверждения согласия с условиями подписки (отправки формы). По умолчанию в коде выводится под формой и имеет общий вид:

```
<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="" checked="">
    </div>
    <label class="lp-checkbox-label" for="lp-conditions-mark-1">
        <p>Я соглашаюсь с условиями обработки персональных данных</p> 
    </label>
</div>
```

*В информационном поп-апе код комментария не возвращается.*

## **Настройка CSS**

При включении «Тонкой настройки» в поле CSS выводится код, сгенерированный с учётом изменений, сделанных в режиме обычной настройки. Отличия могут быть в цветах базовых элементов и используемой в поп-апе коллекции шрифтов.\
\
Используя поле CSS, вы можете переопределить любой CSS код поп-апа. Но при этом следует учитывать, что в процессе загрузки в браузер посетителя сайта, в начало каждого стиля будет автоматически добавлена ссылка на индексный класс поп-апа. Благодаря этой особенности работы сервиса, 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 не содержит никакого кода.\
\
Этот функционал может пригодиться, когда необходимо будет реализовать принудительный вызов поп-апа при совершении какого-то действия на странице сайта (например, клик по кнопке). Или когда нужно передать в наборе отправляемых в поп-апе данных какое-то значение со страницы сайта или из переменных в Cookies.\
\
Для удобства работы с поп-апами вы можете использовать объекты и методы, которые становятся доступны при установке кода LeadPlan на сайт.

## **Объект lpTool**

Объект содержит поля и методы текущего поп-апа. В коде страницы могут быть несколько поп-апов, в том числе скрытых. Поэтому работать с DOM-элементами поп-апа в глобальном контексте неудобно. Рекомендуется использовать объект lpTool, который определен в контексте поп-апа, который вы настраиваете.

## **lpTool.element**

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

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

## **lpTool.onShow**

Событие, которое вызывается при показе поп-апа.

### **lpTool.beforeShow**

Событие срабатывает перед показом формы. В случае возврата «false», показ поп-апа отменяется. В теле данного события нельзя использовать DOM, в дальнейшем он будет не доступен. Если необходимо использовать DOM, нужно использовать метод «onShow».

### **lpTool.onSubmit**

Событие, которое вызывается при успешной отправки формы поп-апа.

### **lpTools.beforeSubmit**

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

### **lpTool.onClose**

Событие, которое вызывается при закрытии формы поп-апа.

### **lpTool.onCloseSuccess**

Событие срабатывает после закрытия окна, подтверждающего успешную отправку данных пользователя (благодарность за подписку).

### **Метод window.lp_show(popup_ID)**

Метод позволяет показать любой существующий поп-ап на странице сайта. Аргумент метода — числовой ID поп-апа. Поп-ап, который требуется показать, должен быть включен и в его [настройках показа](https://help.leadplan.ru/hc/leadplan/articles/1768895377-\_) должно быть установлено «По JavaScript вызову».\
При помощи события onSubmit и метода window.LP_show можно, например, сделать показ поп-апов друг за другом: при отправке первого поп-апа, показывается второй:

```
lptool.onSubmit = function() {
    window.LP_show(<ID второго поп-апа>);
}
```

### **Метод window.lp_close()**

Данный метод работает в двух режимах, в зависимости от аргумента:

1. Аргумент не содержит значения. Без указания параметра, метод сразу закрывает все виджеты, показывающиеся в данный момент на странице;

2. Аргумент метода, это popup_ID. Закрывается только виджет с указанным id.\
   \
   Пример выполнения метода с аргументом popup_ID:

```
window.LP_close(<ID поп-апа, который необходимо закрыть>);
```