Пошаговая форма в попап из Зеро блоков

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

• «Не блокировать скролл» — При активации данной функции, пользователь сможет прокручивать страницу при открытом попапе.
• «Включить автопринятие ответов (в блоке должно быть всего одно поле с типом radio)» — этот чекбокс активирует автоматическое принятие ответа, когда пользователь выбирает вариант в радиокнопке (не нужно нажимать кнопки «Далее» для перехода к следующему шагу).

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

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

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

Имей в виду:

• Если на странице есть несколько кастомных пошаговых форм, то у каждой такой формы должен быть свой блок BF204N и своя уникальная ссылка на кнопку отправки #quizsend1, #quizsend2 и т. д.;
• Если после отправки формы выбрано действие «Показать блок», поле «id блока после отправки формы» обязательно для заполнения;
• Если после отправки формы выбрано действие «Перенаправить на страницу», поле «Ссылка на страницу» обязательно для заполнения;
• Если после отправки формы выбрано действие «Показать стандартный попап», настрой внешний вид всплывающего попапа с сообщением об успешной отправке формы (Цвет фона окна, Цвет заголовка, Цвет текста, Цвет иконки, Цвет галочки в иконке, Цвет фона кнопки, Цвет текста кнопки, Цвет крестика для закрытия окна). Текст успешной отправки сообщения нужно настроить в блоке BF204N.
• Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
• Не нужно подключать приемщики данных к каждому полю внутри Зеро-блока. Их нужно подключать к стандартной форме BF204N;
• Если кнопка отправки формы не срабатывает, отключи в профиле Tilda опцию "Участвовать в тестировании новых функций";
• Если языки ошибок внутри форм не совпадает с языком сайта, проверь настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
• Данная модификация не работает в связке с полем калькулятор и корзиной;
• Если на устройствах с 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" />