Top.Mail.Ru
Loading...
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Академия
Расширение
Техподдержка
Модификации
Профиль
Подписка
Партнерка
Новости +13
Шаблоны
Идеи
Услуги
....
NLM080 • Время настройки: 3 минуты

Квиз из Зеро блоков

С помощью нашего скрипта ты можешь собрать пошаговую форму
в Зеро блоке Tilda, использовав различные поля и свои кнопки.

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Опросник врача-диетолога
Анкету рекомендуется заполнить
по возможности тщательно и подробно.
Вес в настоящий момент (кг)
Пол
Дата рождения
Почему Вы решили худеть?
готово
0
Опросник врача-диетолога
Возраст
В последние 1,5 года вы стали больше или меньше времени уделять приготовлению пищи дома?
Статус в браке
Есть ли у вас дети?
Вы пользуетесь доставкой готовой еды?
готово
0
Опросник врача-диетолога
Выберете удобный способ связи
Спасибо, за ответы. Пожалуйста, укажите свои контактные данные.
Имя
Укажите телефон, по которому вам будет удобно ознакомиться
с результатами опроса
готово
0
спасибо, за ответы
Данные успешно отправлены
name Cпасибо! Мы свяжемся с Вами
по указанному номеру phone
готово
100%

Смотрите, как быстро установить модификацию

Инструкция
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 и т. д.;
  • Если после отправки формы выбрано действие «Показать блок», поле «id блока после отправки формы» обязательно для заполнения;
  • Если после отправки формы выбрано действие «Перенаправить на страницу», поле «Ссылка на страницу» обязательно для заполнения;
  • Вписывать в модификацию нужно оба класса, даже если кнопка «Назад» не предусмотрена логикой квиза;
  • Что бы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
  • Не нужно подключать приемщики данных к каждому полю внутри Зеро-блока. Их нужно подключать к стандартной форме BF204N;
  • Если кнопка отправки формы не срабатывает, отключи в профиле Tilda опцию "Участвовать в тестировании новых функций";
  • Если языки ошибок внутри форм не совпадает с языком сайта, проверь настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
  • Данная модификация не работает в связке с полем калькулятор и корзиной;
  • Если на устройствах с iOS форма при заполнении приближается и это мешает восприятию контента, в head сайта добавь код:
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

Сгенерируйте код для своего сайта

Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.