Кейс. Как я создал кастомный квиз на Tilda, который лучше, чем Markquiz

18 декабря 2024
Наверное, все слышали про квизы и их пользу в сборе лидов. Но что делать, если готовые решения вроде Markquiz неудобны, а стандартные квизы на Tilda совсем унылы? Ответ простой — сделать кастомный квиз самостоятельно.
Меня зовут Егор, я старший дизайнер в Яндексе. Отвечаю за коммуникационный дизайн, спецпроекты и иногда делаю сайты на Tilda. Люблю решать сложные задачи и писать код, даже если это не основная часть моей работы. Сейчас расскажу, как реализовал нестандартный проект для клиента.

Задача

Создать сайт с удобным и стильным квизом, который можно редактировать без разработчика. Все должно быть функционально, анимационно и работать на Tilda.

Почему стандартные решения не подошли?

  • Markquiz: минимальные настройки дизайна, выглядит слишком шаблонно.
  • Tilda: стандартные блоки квизов устарели и сильно ограничены.
Поэтому я взял стандартные возможности Zero Block на Tilda и сделал кастомное решение с использованием JavaScript и SBS-анимации.

Как это работает?

  • Квиз на Zero Block:
Мы создали индивидуальные слайды с анимацией. При нажатии на кнопку открывается следующий слайд, что позволяет настроить абсолютно любую логику.
  • Гибкость логики:
На JS можно настроить сложное дерево ответов, чтобы в зависимости от выбора пользователя открывались разные блоки. Это дает неограниченные возможности для квиза.
  • Отправка данных в заявку:
Главный вызов — интеграция данных из квиза с формой Tilda. Поскольку форма не понимает, что происходит внутри квиза, пришлось «ломать» стандартные механизмы:

  1. Собираем ответы в консоль.
  2. Преобразуем их в текст вроде: «Пользователь выбрал байк на неделю и оплату наличными».
  3. Передаем этот текст в заголовок формы через скрипт, чтобы заявка пришла с нужной информацией.

Результат

На разработку квиза ушло 2 недели и около 400 строк кода. Клиент доволен: квиз удобный, стильный и редактируемый без помощи программиста.

Почему это решение лучше готовых квизов?

  • Полный контроль над дизайном и анимацией.
  • Возможность настройки сложных сценариев и логики.
  • Кастомизация под нужды клиента без ограничений.

Сколько стоит кастомный квиз?

Цена зависит от сложности. Базовый квиз без учета сайта — от 30 тысяч рублей. Более сложные проекты, включая индивидуальную логику, обойдутся в 60 тысяч и выше.
Заценить проект можно тут.