Квиз из Zero‑блоков

Позволяет создать пошаговый квиз из нескольких Zero-блоков с автоматической синхронизацией полей в единую форму

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>

Создайте Zero-блоки с шагами квиза и добавьте в них формы

Каждый шаг — это отдельный Zero-блок, в котором может быть одна или несколько форм (их поля синхронизируются автоматически). Важно: поля в разных формах/шагах должны иметь разные названия переменных, чтобы их данные не перезаписывали друг друга.
Задайте блокам с квизом класс .uc-quiz

Если вы планируете разместить несколько квизов на одной странице, задайте им разные названия классов, например, .uc-quiz1, .uc-quiz2 и т. д.
Как задать класс блокам?
Задайте ссылки кнопкам переключения шагов: кнопке «вперёд» ссылку #next, кнопке «назад» — #prev

Чтобы добавить необязательный шаг, который можно пропустить, задайте кнопке пропуска ссылку #skip или сделайте поля необязательными в настройках самих форм (Настройки поля → Снять галочку Required)
Скройте стандартные кнопки отправки данных и добавьте в последний блок свою кнопку со ссылкой #submit

Стандартные кнопки отправки данных можно скрыть в настройках форм (задать им width: 0 и height: 0 и удалить caption)
Подключите приемщики данных к первой форме последнего блока

Приемщики, сообщение успеха и все остальные настройки производятся с первой (нижней в слоях) формой последнего блока — именно она будет синхронизироваться со всеми остальными шагами. Для других форм это необязательно.
Задайте блоку, который нужно показать после отправки, класс .uc-quiz-success

Если блок не задан, после отправки квиза появится стандартный поп-ап успеха, указанный в настройках формы последнего блока
Задайте в настройках модификации параметры, стили и поведение квиза
Скопируйте код и вставьте его в блок T123 в конец страницы

<script>quiz.init(".uc-quiz", { autotoggle: true, save: true })</script>

Все примеры

93

Настройки модификации

Скорость и тип переходов:

Класс квиза*

+ Настройки квиза

Настройки квиза

Отключить автоматическую смену шага

Прокручивать к началу шага

Сохранять прогресс

Цвет и высота прогрессбара

Цвет и размер индикатора (полоски), отображающегося над блоком квиза во время его прохождения

Если включено, при переходе страница будет прокручиваться к началу текущего шага

Отключает автоматический переход на следующий шаг после выбора варианта ответа

Если включено, ответы и текущий шаг сохранятся в браузере, и посетитель сможет продолжить квиз с того же места

<!--quiz.js Квиз из Zero-блоков. https://postnikovmd.com/mods/quiz-->
<script>quiz.init(".uc-quiz")</script>

Скопировать код

Особенности

Собирается в одну заявку

Поля всех шагов автоматически объединяются в единую форму
Сохраняет данные полей

Посетитель может продолжить квиз с того места, где остановился
Поддерживает прогресс-бар

Подключается одним параметром и показывает, сколько шагов пройдено