Loading...
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа

Как сделать квиз из ЗЕРО блоков в Tilda?

С помощью нашего скрипта ты можешь собрать пошаговую форму
в Zero Block Tilda, использовав различные поля и свои кнопки
Время настройки: 3 минуты
Инструкция (Развернуть↓)
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;
  • Если языки ошибок внутри форм не совпадает с языком сайта, проверь настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
  • Данная модификация не работает в связке с полем калькулятор и корзиной;
Введите id зеро блока
Введите id BF204N блока
Введите ссылку для кнопки
Введите приписку к названиям полей
Опросник врача-диетолога
Анкету рекомендуется заполнить
по возможности тщательно и подробно.
Вес в настоящий момент (кг)
Дата рождения
Почему Вы решили худеть?
Пол
готово
0
Опросник врача-диетолога
Возраст
Статус в браке
Есть ли у вас дети?
В последние 1,5 года вы стали больше или меньше времени уделять приготовлению пищи дома?
готово
0
Вы пользуетесь доставкой готовой еды?
Опросник врача-диетолога
Выберете удобный способ связи
Спасибо, за ответы. Пожалуйста, укажите свои контактные данные.
Имя
готово
0
Укажите телефон, по которому вам будет удобно ознакомиться
с результатами опроса
спасибо, за ответы
Данные успешно отправлены
готово
100%
name Cпасибо! Мы свяжемся с Вами
по указанному номеру phone
Email
Name
Phone
Comments
Код доступен только тем, кто оплатил подписку
Подписка стоит 400р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, чтобы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda