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

В верхнем правом углу вкладки «Внешний вид» вы можете активировать режим «Тонкой настройки».

После включения данного режима вы сможете редактировать 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 код поп-апа благодарности за отправку

Если в настройках действий после отправки используется используется вариант «Показать сообщение», то после успешной отправки формы посетителю сайта будет показан попап, содержащий информационное сообщение.

Для информационного сообщения используется 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>

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

Rabiobutton (переключающийся флажок)
<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-1" value="2" />cb 2-2
    <input type="checkbox" name="LP-cb-1" 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.


Читайте также