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

18 декабря 2024

Наверное, все слышали про квизы и их пользу в сборе лидов. Но что делать, если готовые решения вроде Markquiz неудобны, а стандартные квизы на Tilda совсем унылы? Ответ простой — сделать кастомный квиз самостоятельно.

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

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

Поэтому я взял стандартные возможности Zero Block на Tilda и сделал кастомное решение с использованием JavaScript и SBS-анимации.

Мы создали индивидуальные слайды с анимацией. При нажатии на кнопку открывается следующий слайд, что позволяет настроить абсолютно любую логику.

На JS можно настроить сложное дерево ответов, чтобы в зависимости от выбора пользователя открывались разные блоки. Это дает неограниченные возможности для квиза.

Главный вызов — интеграция данных из квиза с формой Tilda. Поскольку форма не понимает, что происходит внутри квиза, пришлось «ломать» стандартные механизмы:

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

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

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