Как сделать квиз из зеро блоков в tilda?

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-анимация, в выпадающем списке выбираешь вариант, который тебе подходит;
• «При наличии обязательных полей» — Выбираешь, что будет происходить, в случае если обязательные поля не будут заполнены пользователем;
• «После отправки формы выполнить действие» — Указываешь, что необходимо отображать после отправки формы: поп-ап, отдельный блок или страница. И настрой необходимые параметры в полях, которые появились.
• «Добавить автоматический индикатор прогресса» — Если хочешь автоматизировать прогресс бар, то настраиваешь его

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" />