Как сделать пошаговую форму из зеро (квиз)?
Этот скрипт позволит тебе сделать любой квиз или пошаговую форму из твоих зероблоков. Можно показывать два и более зеро за шаг и привязывать показ с данным. Пример работы модификации внизу cтраницы
Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓
!
1-5 мин.
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]
Скопировать код
Отчистить поля
Этот мод доступен по подписке
0
299
₽
₽
Voron Free
Voron Pro
всего за
/ мес.
Доступны все модификации за пару кликов
Просмотр используемых блоков и их настроек на любом сайте на Tilda, в том числе step-by-step анимаций
CSS Helper – возможность генерировать CSS без знания кода
Удобная подсветка кода + перенос строк в блоках т123 для удобства редактирования кода
Техническая поддержка в Telegram
Никаких автоплатежей
Только базовые функции
299 ₽
Доступ к 11 бесплатным модификациям
Сетка и колонки для всего проекта (zero, стандартные блоки)
Темная тема для Tilda Publishing
Отображение всех используемых блоков в боковом меню
123
Чтобы увидеть пример пошаговой формы, просто пролистай форму ниже
Пример работы модификации
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Какой тип кемпера вам нужен?
1 / 5
Пройдите опрос и получите подарок!
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Длительность путешествия?
2 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Нужно помочь?
3 / 5
Пройдите опрос и получите подарок!
Назад
Далее
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Почти у цели!
4 / 5
Пройдите опрос и получите подарок!
Получить подарок
Наведи курсор на этот блок, чтобы увидеть эффект следа из уменьшающихся картинок
Мы сделали это!
5 / 5
Подарок был отправлен вам на указанную почту!
Опиши нужный функционал через эту форму и он будет добавлен!
Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Не хватает какой-то функции?