Как сделать пошаговую форму из зеро (квиз)?
Этот скрипт позволит тебе сделать любой квиз или пошаговую форму из твоих зероблоков. Можно показывать два и более зеро за шаг и привязывать показ с данным. Пример работы модификации внизу cтраницы
1-5 мин.
Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓
!
JavaScript
Zeroblock
1. Создай на странице формы в зероблоке которые нужно объединить в пошаговую и задай им вот этот класс через ПКМ => Add CSS Classname:
2. Для переключения вперед создай кнопки/шейпы и задай им вот этот класс:
3. Если тебе нужно чтобы кнопка вперед обязательно переключала квиз только на какой-то конкретый блок, то укажи его в ссылке для твоей кнопки вот так (где вместо цифр напиши id блока на который нужно переключать квиз):
4. Для переключения назад создай кнопки/шейпы и задай им класс:
5. Создай в одном из шагов квиза одну пустую техническую форму и не убирай её за границы видимости (она скроется и через неё все формы будут синхронизироваться). Задай этой форме класс:
И добавь в эту форму 1 инпут с типом text comment
6. Укажи в генераторе id всех зеро-шагов твоего квиза через запятую. Если на каком-то из шагов тебе нужно показать 2 и более зеро, то возьми id этих блоков в квадратные скобки. Например:
7. Cгенерируй код со всеми нужными тебе параметрами и помести в блок т123 ниже зеро с формами
2. Для переключения вперед создай кнопки/шейпы и задай им вот этот класс:
3. Если тебе нужно чтобы кнопка вперед обязательно переключала квиз только на какой-то конкретый блок, то укажи его в ссылке для твоей кнопки вот так (где вместо цифр напиши id блока на который нужно переключать квиз):
4. Для переключения назад создай кнопки/шейпы и задай им класс:
5. Создай в одном из шагов квиза одну пустую техническую форму и не убирай её за границы видимости (она скроется и через неё все формы будут синхронизироваться). Задай этой форме класс:
И добавь в эту форму 1 инпут с типом text comment
6. Укажи в генераторе id всех зеро-шагов твоего квиза через запятую. Если на каком-то из шагов тебе нужно показать 2 и более зеро, то возьми id этих блоков в квадратные скобки. Например:
7. Cгенерируй код со всеми нужными тебе параметрами и помести в блок т123 ниже зеро с формами
Инструкция
Важно!
- ЕСЛИ ДЕЛАЕШЬ НЕСКОЛЬКО ТАКИХ ФОРМ, то не забудь отметить последний чекбокс "Включи если..."
- Не задавай в шагах в формах предустановленное значение по умолчанию!
- Заполняй поля в таком же формате, в каком полупрозрачным написаны ориентировочные значения в генераторе, ведь именно в таком виде он их ожидает получить
- Блоки будут показаны именно в таком порядке друг за другом, в каком их id указаны в генераторе. Если тебе нужно сделать исключения, то пользуйся вариантом ссылкой из п.3
- Не задавай в шагах в формах предустановленное значение по умолчанию!
- Заполняй поля в таком же формате, в каком полупрозрачным написаны ориентировочные значения в генераторе, ведь именно в таком виде он их ожидает получить
- Блоки будут показаны именно в таком порядке друг за другом, в каком их id указаны в генераторе. Если тебе нужно сделать исключения, то пользуйся вариантом ссылкой из п.3
(Развернуть)
Скопировать
vquiz
undefined
Скопировать
vqnext
Скопировать
#go123456789
Скопировать
vqprev
Скопировать
vfinal
Скопировать
12345678, [87654321, 1122334], 44332211
undefined
undefined
Либо для нескольких за раз
Скопировать
#go[123456789,87654321]
Скопировать код
Отчистить поля
Этот мод доступен в PRO тарифе
0
349
₽
₽
Voron Free
Voron Pro
всего за
/ 1 мес.
Доступ ко всем модификациям библиотеки
Просмотр используемых блоков и их настроек для любого сайта, сделанного на Tilda, в том числе step-by-step анимаций
Полный доступ ко всем функциям расширения для Тильды
Регулярные обновления модификаций и новые модификации включены в стоимость
Техническая поддержка в Telegram
Никаких автоплатежей
Только базовые функции
349 ₽
Доступ к 11 бесплатным модификациям
Бесплатный функционал расширения для Тильды
Темная тема для Tilda Publishing
Отображение всех используемых блоков в боковом меню
После создания они будут работать даже если PRO доступ закончится
123
Чтобы увидеть пример пошаговой формы, просто пролистай форму ниже
Пример работы модификации
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Какой тип кемпера вам нужен?
1 / 5
Пройдите опрос и получите подарок!
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Длительность путешествия?
2 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Нужно помочь?
3 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Почти у цели!
4 / 5
Пройдите опрос и получите подарок!
Получить подарок
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Мы сделали это!
5 / 5
Подарок был отправлен вам на указанную почту!
Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Опиши нужный функционал через эту форму и он будет добавлен!
Не хватает какой-то функции?
