КАК СДЕЛАТЬ ПОШАГОВУЮ ФОРМУ В ПОПАП ИЗ ЗЕРО БЛОКОВ?

1. Внутри Зеро-блока собираешь свою уникальную пошаговую форму; Она может состоять из различных типов полей, расположенных в нужном для тебя месте и количестве;

2. Для корректной работы формы, в ней необходимо указать следующее:

• У каждого поля заполняешь переменную (variable name);
• У кнопки (button) удаляешь текст;
• В настройках кнопки (button) удаляешь все цвета;
• Высоту ставишь на 0px;
• Если нужно указываешь «Обязательно для заполнения (Required)», когда данное поле не заполнено, перейти к следующему шагу будет нельзя.

3. Добавляешь на страницу блок BF204N и подключаешь к ней сервисы приема данных, которые нужны.

• Поля в блоке BF204N не нужно настраивать. Скрипт возьмет автоматически их из зеро блоков;

4. Далее в генераторе указываешь:

• «id блоков через запятую» — Выбираешь один или несколько блоков, в котором находятся поля формы;
• «id блока BF204N» — Выбираешь блок BF204N.

К кнопкам, которые выполняют роль переключения между шагами «Назад» и «Далее», указываешь классы.

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс, что и в генераторе.

Ниже в генераторе их указываешь:

• «Class для кнопки вперед» (например, next-btn);
• «Class для кнопки назад» (например, prev-btn).

На финальном зеро блоке создай свою кнопку «Отправить» (картинка, шейп, кнопка, текст) и пропиши ей ссылку, её необходимо указать в поле;

• «Ссылка для кнопки отправки» (например, #quizsend).
• «Проигрывать sbs-анимацию» — В случае если в Зеро-блоке есть sbs-анимация, в выпадающем списке выбираешь вариант, который тебе подходит;
• «При наличии обязательных полей» — Выбираешь, что будет происходить, в случае если обязательные поля не будут заполнены пользователем;
• «После отправки формы выполнить действие» — Указываешь, что необходимо отображать после отправки формы: поп-ап, отдельный блок или страница. И настрой необходимые параметры в полях, которые появились.

После того как настроили все шаги формы, нужно настроить попап, в котором будет ваша форма.

• «Ссылка для открытия popup» — Придумайте ссылку для открытия всплывающего окна (попап), а затем укажите ее в кнопке. Важно чтобы ссылка начиналась с символа #. Например, можно использовать ссылку вида "#openpopup".
• «Класс для закрытия popup» — В этом поле нужно придумать класс, который наоборот закроет вашу попап форму, только класс должен быть без символа #. Например closepopup.

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс, что и в генераторе.

• «Затемнение фона» — Если выбрать пункт "Да", то в генераторе появятся дополнительные поля, в которых можно настроить 2 поля:
• «Цвет фона» — Цвет затемнения фона;
• «Непрозрачность» — Непрозрачность: затемнения фона.

• «Z-index стандартной плашки с ошибкой» — В этом поле нужно настроить z-index для уведомления с ошибкой. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.
• «Z-index слайдов» — Эта настройка для слайдов / шагов формы. Z-index для слайдов уже настроен по умолчанию, чтобы попап открывался в самом верху слоев и перекрывал другие элементы, поэтому вы можете пропустить данную настройку, если только вы не указали более высокое значение для других блоков. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.

• «Не блокировать скролл» — При активации данной функции, пользователь сможет прокручивать страницу при открытом попапе.

• «Добавить автоматический индикатор прогресса» — Если хотите автоматизировать прогресс бар, тогда нужно раскрыть поля для настроек прогресс бара, нажав на эту ссылку "Добавить автоматический индикатор прогресса". После раскрытия настроек прогресс бара будут доступны следующие настройки:
• «Класс для шейпа» — В форме на каждом шаге / слайде нужно добавить один элемент "Shape", и расположить его где вам нужно. Размеры шейпа настраиваются в Зеро блоке, а цвета прогресса и фона настраиваются в следующих полях. В генераторе модификации в поле "Класс для шейпа" нужно указать класс без символов. Например progress.
• «Цвет фона» — В этом поле нужно настроить цвет фона прогресс бара.
• «Цвет индикатора» — В этом поле нужно настроить цвет индикатора прогресс бара, который будет двигаться в зависимости от прогресса заполнения.
• «Класс для текста (0-100)» — Если вы хотите добавить процентные значения, которые будут анимированы и меняться при переходе на следующий шаг, тогда вам нужно добавить текстовый элемент и расположить его рядом с "Shape", который выступает в роли прогресс бара. В этом поле вам нужно придумать и указать класс. Дальше лишь нужно указать класс для текстового элемента в Зеро блоке, чтобы модификация понимала, какие цифры анимировать.
• «Текст после (%)» — В этом поле вы можете указать символ для измерения прогресса. Например проценты — %. Указанный символ в этом поле будет отображаться после цифр прогресса.
• «Индикатор» — В данной настройке доступно 2 пункта, скруглять и обрезать. Пункт "Скруглять" скругляет границы полоски прогресса, который движется при переходе на следующий шаг формы. Пункт "Обрезать" убирает любые скругления границ у индикатора прогресса.
• «Отключить анимацию цифр» — При желании можно отключить анимацию цифр, которые плавно меняются от 0 до 100. Для этого нужно активировать данную функцию, нажав на пустой квадрат.

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс, что и в генераторе.

5. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;

Имей в виду:

• Если на странице есть несколько кастомных пошаговых форм, то у каждой такой формы должен быть свой блок BF204N и своя уникальная ссылка на кнопку отправки #quizsend1, #quizsend2 и т.д.;
• Что бы всплывающие подсказки "Обязательное поле" не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
• Не нужно подключать приемщики данных к каждому полю внутри Зеро-блока. Их нужно подключать к стандартной форме BF204N;
• Если языки ошибок внутри форм не совпадает с языком сайта, проверь настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
• Данная модификация не работает в связке с полем калькулятор и корзиной;
• Если на устройствах с iOS форма при заполнении приближается и это мешает восприятию контента, в head сайта добавь код:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />