Как устроен квиз на Tilda
Квиз отличается от обычной формы тем, что вопросы открываются последовательно. Посетитель не видит перед собой длинную анкету с десятком полей, а проходит её по шагам: выбирает вариант ответа, переходит дальше и в конце оставляет контактные данные или получает результат. Такой формат подходит для предварительного расчёта, подбора услуги, сбора вводных перед консультацией, брифа, опроса или заявки, в которой компании требуется получить больше информации, чем имя и телефон.
В Tilda для этого предусмотрены специальные блоки QZ101 и их вариации, расположенные в категории «Форма». В них можно добавлять обложку, вопросы с обычными и графическими вариантами ответа, оценочную шкалу, контактные поля, промежуточные экраны и итоговый результат. Для отдельных ответов настраиваются условия видимости, благодаря которым посетителю показываются только относящиеся к его выбору следующие шаги. Квиз можно оставить непосредственно на странице, растянуть на экран или открывать во всплывающем окне.
Такого решения достаточно, когда квиз является частью конкретного сайта на Tilda, его структура относительно стабильна, а полученные данные удобно передавать через уже подключённые к проекту сервисы приёма заявок.
Как сделать квиз средствами Tilda
Для создания встроенного квиза нужно открыть библиотеку блоков, перейти в раздел с формами и выбрать QZ101 либо подходящую вариацию этого блока. Дальнейшая работа ведётся через раздел «Шаги квиз-формы», где последовательно добавляются вопросы, варианты ответов, контактные поля и финальный экран. Tilda позволяет управлять оформлением, индикатором прогресса, расположением элементов и условиями показа отдельных шагов.
Перед сборкой лучше заранее определить последовательность вопросов и результат, к которому должен прийти посетитель. Квиз для расчёта стоимости и тест с итоговым результатом устроены по-разному: в первом случае ответы нужны специалисту для последующей обработки заявки, во втором сама форма должна привести человека к определённому результату. От этого зависят количество шагов, ветвление и содержание последнего экрана.
Встроенный инструмент особенно удобен, когда не требуется выводить квиз за пределы конкретного проекта. Все основные изменения можно вносить непосредственно в редакторе Tilda, а внешний вид настраивать теми же средствами, которые используются для других блоков страницы.
Когда удобнее использовать готовый квиз
У встроенного решения есть очевидное преимущество: оно находится в том же интерфейсе, что и остальные страницы сайта. Однако это не означает, что любой квиз обязательно нужно собирать непосредственно в Tilda. Если форма используется на нескольких сайтах, часто меняется, требует отдельной системы обработки заявок или должна управляться сотрудником, который не работает с самим сайтом, внешний конструктор может оказаться практичнее.
В этом случае квиз создаётся отдельно, а на Tilda устанавливается уже готовый виджет. Сайт отвечает за страницу, контент и дизайн вокруг формы, тогда как вопросы, переходы между ними, оформление самого квиза и работа с полученными ответами остаются во внешнем сервисе. При изменении текста вопроса или порядка шагов не приходится заново собирать соответствующий раздел страницы.
Tilda поддерживает вставку стороннего HTML и JavaScript через блок T123 «HTML-код». Код также можно разместить отдельным HTML-элементом внутри Zero Block; после публикации страницы подключённый виджет начинает работать в предусмотренном для него месте.
Как добавить квиз на Tilda через QForm
Один из способов вынести создание квиза за пределы редактора сайта заключается в использовании конструктора. С его помощью можно собрать многостраничную форму, добавить разные типы полей, изображения к вариантам выбора, настроить порядок вопросов и логику переходов, после чего получить код для размещения готового квиза на сайте. QForm, как один из вариантов конструкторов, при этом отвечает за работу формы и поступающие заявки, а Tilda используется как площадка, на которой она отображается.
Порядок работы можно выстроить следующим образом:
- Создать квиз в QForm и добавить необходимые вопросы.
- Разделить длинную анкету на последовательные шаги и настроить переходы между ними.
- Добавить контактные поля там, где посетителю уже понятно, зачем компании нужны его данные.
- Настроить оформление и проверить, как форма выглядит до публикации.
- Открыть раздел с кодом вставки и скопировать подготовленные QForm элементы подключения.
- В Tilda добавить блок T123 «HTML-код» либо HTML-элемент в Zero Block и вставить полученный код.
- Опубликовать страницу и проверить работу квиза на компьютере и смартфоне.
QForm действительно использует такой способ публикации: на вкладке «Код вставки» сервис предлагает скопировать DIV для формы и скрипт её вызова, после чего код размещается на сайте. Tilda, со своей стороны, допускает подключение стороннего кода через T123 и HTML-элемент Zero Block, поэтому отдельная разработка собственного квиз-компонента для такой установки не требуется.
Преимущество этого подхода заметнее, когда форма продолжает меняться уже после запуска. Вопросы, варианты ответов и оформление редактируются в конструкторе QForm, тогда как сама страница Tilda остаётся собранной и не требует постоянной перестройки. Заявки сохраняются в системе обработки QForm, а данные можно передавать через доступные интеграции и уведомления.
Как добавить квиз в Zero Block
Zero Block нужен не для того, чтобы заново собирать механику внешнего квиза вручную, а когда важно точнее контролировать его положение относительно других элементов страницы. В редактор можно добавить HTML-элемент, открыть его настройки и вставить код стороннего виджета; сама Tilda указывает, что принцип его работы практически не отличается от использования отдельного блока T123.
Такой вариант имеет смысл, если вокруг квиза предусмотрена нестандартная композиция с собственным фоном, иллюстрациями, заголовками или декоративными элементами. При этом форму лучше оставлять самостоятельным функциональным элементом, а не пытаться вручную воспроизвести каждый её экран средствами Zero Block: чем сложнее логика вопросов, тем труднее поддерживать такую конструкцию после запуска.
После вставки необходимо проверить адаптивность на разных разрешениях. Особенно важно убедиться, что контейнер не обрезает содержимое, кнопки остаются доступными, а элементы страницы не накладываются на форму. В редакторе сторонний код может отображаться не так, как на опубликованной странице, поэтому итоговую проверку нужно проводить уже после публикации.
Что выбрать для сайта на Tilda
Встроенный квиз Tilda подходит для проекта, где форма тесно связана с одной страницей и её удобно поддерживать вместе с остальным сайтом. Платформа уже предоставляет пошаговую структуру, ветвление, несколько типов вопросов, финальные экраны и подключение сервисов приёма данных, поэтому для многих задач дополнительный инструмент действительно не требуется.
Внешний конструктор имеет смысл, когда квиз рассматривается как самостоятельный рабочий инструмент: его нужно использовать на разных страницах или сайтах, регулярно менять без доступа к редактору Tilda, отдельно работать с поступившими заявками либо передавать управление формой другому сотруднику. В QForm квиз создаётся независимо от CMS и затем подключается к странице готовым кодом, поэтому сайт и сама форма могут изменяться отдельно друг от друга.
Независимо от выбранного способа, начинать лучше не с оформления, а со структуры вопросов. Короткий квиз с понятной последовательностью и только необходимыми полями обычно проще пройти, чем многоступенчатую анкету, в которую попытались собрать всю возможную информацию о потенциальном клиенте. После этого уже можно решать, удобнее ли реализовать такую форму средствами самой Tilda или собрать её в QForm и встроить на готовую страницу.
