К основному контенту

1-5 мин

Zeroblock

Light

5

Этот скрипт позволит тебе сделать любой квиз или пошаговую форму из твоих зероблоков. Можно показывать два и более зеро за шаг и привязывать показ с данным.

Как сделать пошаговую форму из зеро (квиз) на Tilda?

(cвернуть)
Инструкция
vquiz
vqnext
#go123456789
#go[123456789,87654321]
vqprev
vfinal
12345678, [87654321, 1122334], 44332211

1. Создай на странице формы в зероблоке которые нужно объединить в пошаговую и задай им вот этот класс через ПКМ => Add CSS Classname:

2. Для переключения вперед создай кнопки/шейпы и задай им вот этот класс:

Либо для нескольких за раз

3. Если тебе нужно чтобы кнопка вперед обязательно переключала квиз только на какой-то конкретый блок, то укажи его в ссылке для твоей кнопки вот так (где вместо цифр напиши id блока на который нужно переключать квиз):

4. Для переключения назад создай кнопки/шейпы и задай им класс:

5. Создай в одном из шагов квиза одну пустую техническую форму и не убирай её за границы видимости (она скроется и через неё все формы будут синхронизироваться). Задай этой форме класс:

И добавь в эту форму 1 инпут с типом text comment

6. Укажи в генераторе id всех зеро-шагов твоего квиза через запятую. Если на каком-то из шагов тебе нужно показать 2 и более зеро, то возьми id этих блоков в квадратные скобки. Например:

7. Cгенерируй код со всеми нужными тебе параметрами и помести в блок т123 ниже зеро с формами

- ЕСЛИ ДЕЛАЕШЬ НЕСКОЛЬКО ТАКИХ ФОРМ, то не забудь отметить последний чекбокс "Включи если..."

- Не задавай в шагах в формах предустановленное значение по умолчанию!

- Заполняй поля в таком же формате, в каком полупрозрачным написаны ориентировочные значения в генераторе, ведь именно в таком виде он их ожидает получить

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

Важно!

undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Уверенным пользователям, которые каждый день зарабатывают на создании и верстке сайтов
Всё, что во Free и Pro на 1 месяц
и еще:
Pro на 1 год
2 990 ₽
1400 ₽ — ваша выгода
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только 
в определенное время
Pro на 1 месяц
390 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
Free
Этот мод доступен на PRO тарифе
Приоритетная поддержка
~50 новых модификаций, которые планируем выпустить в течение года
Обновления библиотеки с учетом изменений Tilda
ИИ-помощник с базовыми моделями
Возможность голосовать за новые моды и закрытый чат (скоро)
undefined
~25 Pro-модификаций
Генератор CSS
Распознавание блоков
Показать блоки т123
Автосохранение Zero-блока
Подсветка кода в т123
undefined
undefined
~20 бесплатных модификаций
Темная тема для Tilda
Кнопки быстрой публикации
Настройки меню в редакторе
Никаких автоплатежей
123

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

Примеры работы модификации
Выберете тип кемпера
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Какой тип кемпера вам нужен?
1 / 5
Пройдите опрос и получите подарок!
Далее
Сколько дней пларируете провести путешествуя
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Длительность путешествия?
2 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Какое дополнительное оборудование вам нужно (необязательно)
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Нужно помочь?
3 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Почти у цели!
4 / 5
Пройдите опрос и получите подарок!
Получить подарок
Выберете тип кемпера
Сколько дней пларируете провести путешествуя
Какое дополнительное оборудование вам нужно (необязательно)
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Мы сделали это!
5 / 5
Подарок был отправлен вам на указанную почту!