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

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

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

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

Объект LP_tools

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

LP_tools.element

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

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

LP_tools.onShow

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

LP_tools.beforeShow

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

LP_tools.onSubmit

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

LP_tools.beforeSubmit

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

LP_tools.onClose

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

LP_tools.onCloseSuccess

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

Метод window.LP_show(popup_ID)

Метод позволяет показать любой существующий поп-ап на странице сайта. Аргумент метода — числовой ID поп-апа. Поп-ап, который требуется показать, должен быть включен и в его настройках показа должно быть установлено «По JavaScript вызову».

При помощи события onSubmit и метода window.LP_show можно, например, сделать показ поп-апов друг за другом: при отправке первого поп-апа, показывается второй:

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

Метод window.LP_close()

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

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

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

Пример выполнения метода с аргументом popup_ID:

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