12 · Маркетинг
Умный квиз с ветвлением в Tilda
готовый код.
Показывает разные вопросы в зависимости от ответа, оценивает заявку и передаёт результат в форму Tilda.
Забрать код ↓- Технология
- HTML + CSS + JS
- Установка
- 20 минут
- Куда вставлять
- Блок T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
Какая главная задача сайта?
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
<section class="tselno-quiz" data-smart-quiz>
<div class="tselno-quiz__top">
<span data-quiz-step>Вопрос 1</span>
<span data-quiz-percent>0%</span>
</div>
<div class="tselno-quiz__progress"><i data-quiz-progress></i></div>
<div class="tselno-quiz__body" data-quiz-body></div>
</section>
<style>
.tselno-quiz {
--quiz-bg: #f2f0e9;
--quiz-text: #10110f;
--quiz-accent: #d9ff43;
max-width: 920px;
min-height: 520px;
margin: 0 auto;
padding: clamp(24px, 5vw, 60px);
border: 1px solid var(--quiz-text);
background: var(--quiz-bg);
color: var(--quiz-text);
font-family: Arial, sans-serif;
}
.tselno-quiz__top { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; text-transform: uppercase; }
.tselno-quiz__progress { height: 6px; margin-top: 16px; overflow: hidden; background: rgba(16,17,15,.14); }
.tselno-quiz__progress i { width: 0; height: 100%; display: block; background: var(--quiz-accent); transition: width .3s ease; }
.tselno-quiz__body h3 { max-width: 760px; margin: 64px 0 32px; font-size: clamp(32px, 5vw, 58px); line-height: .98; }
.tselno-quiz__answers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tselno-quiz__answers button { min-height: 70px; padding: 16px; border: 1px solid var(--quiz-text); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tselno-quiz__answers button:hover, .tselno-quiz__answers button:focus-visible { background: var(--quiz-accent); }
.tselno-quiz__result { margin-top: 64px; }
.tselno-quiz__result strong { display: block; font-size: clamp(38px, 7vw, 78px); line-height: .95; }
.tselno-quiz__result p { max-width: 620px; margin: 24px 0 0; font-size: 17px; line-height: 1.5; }
@media (max-width: 640px) { .tselno-quiz__answers { grid-template-columns: 1fr; } }
</style>
<script>
(function () {
var FORM_SELECTOR = 'form';
var root = document.querySelector('[data-smart-quiz]');
if (!root) return;
var QUESTIONS = [
{ id: 'goal', title: 'Какая главная задача сайта?', options: [
{ value: 'leads', label: 'Получать заявки' },
{ value: 'store', label: 'Продавать товары' },
{ value: 'image', label: 'Усилить образ бренда' }
]},
{ id: 'traffic', title: 'Откуда планируете привлекать клиентов?', show: function (a) { return a.goal === 'leads'; }, options: [
{ value: 'direct', label: 'Яндекс Директ' },
{ value: 'seo', label: 'SEO' },
{ value: 'mixed', label: 'Несколько каналов' }
]},
{ id: 'catalog', title: 'Какой объём каталога?', show: function (a) { return a.goal === 'store'; }, options: [
{ value: 'small', label: 'До 50 товаров' },
{ value: 'medium', label: '50–500 товаров' },
{ value: 'large', label: 'Более 500 товаров' }
]},
{ id: 'style', title: 'Что уже есть у бренда?', show: function (a) { return a.goal === 'image'; }, options: [
{ value: 'logo', label: 'Только логотип' },
{ value: 'identity', label: 'Фирменный стиль' },
{ value: 'nothing', label: 'Начинаем с нуля' }
]},
{ id: 'budget', title: 'Какой бюджет рассматриваете?', options: [
{ value: '50', label: 'До 100 000 ₽', score: 20 },
{ value: '150', label: '100–250 000 ₽', score: 50 },
{ value: '300', label: 'Более 250 000 ₽', score: 80 }
]}
];
var answers = {};
var index = 0;
var body = root.querySelector('[data-quiz-body]');
var step = root.querySelector('[data-quiz-step]');
var percent = root.querySelector('[data-quiz-percent]');
var progress = root.querySelector('[data-quiz-progress]');
function activeQuestions() {
return QUESTIONS.filter(function (question) { return !question.show || question.show(answers); });
}
function addHidden(form, name, value) {
var field = form.querySelector('input[name="' + name + '"]');
if (!field) {
field = document.createElement('input');
field.type = 'hidden';
field.name = name;
form.appendChild(field);
}
field.value = value;
}
function finish() {
var budget = answers.budget || '50';
var score = budget === '300' ? 90 : budget === '150' ? 65 : 35;
var result = score >= 80 ? 'Приоритетная заявка' : score >= 60 ? 'Подходит для консультации' : 'Нужна первичная оценка';
var details = activeQuestions().map(function (question) {
var option = question.options.find(function (item) { return item.value === answers[question.id]; });
return question.title + ': ' + (option ? option.label : '—');
}).join(' | ');
document.querySelectorAll(FORM_SELECTOR).forEach(function (form) {
addHidden(form, 'quiz_result', result);
addHidden(form, 'quiz_score', String(score));
addHidden(form, 'quiz_answers', details);
});
step.textContent = 'Готово';
percent.textContent = '100%';
progress.style.width = '100%';
body.innerHTML = '<div class="tselno-quiz__result"><strong>' + result + '</strong><p>Ответы уже добавлены в скрытые поля формы. Оставьте контакты — менеджер увидит контекст заявки.</p></div>';
}
function render() {
var questions = activeQuestions();
if (index >= questions.length) return finish();
var question = questions[index];
var currentPercent = Math.round(index / questions.length * 100);
step.textContent = 'Вопрос ' + (index + 1) + ' из ' + questions.length;
percent.textContent = currentPercent + '%';
progress.style.width = currentPercent + '%';
body.innerHTML = '<h3>' + question.title + '</h3><div class="tselno-quiz__answers"></div>';
var answersRoot = body.querySelector('.tselno-quiz__answers');
question.options.forEach(function (option) {
var button = document.createElement('button');
button.type = 'button';
button.textContent = option.label;
button.addEventListener('click', function () {
answers[question.id] = option.value;
index += 1;
render();
});
answersRoot.appendChild(button);
});
}
render();
})();
</script>/ Установка
Четыре шага.
- 01
Добавьте T123 перед обычной формой Tilda и вставьте код целиком.
- 02
Отредактируйте QUESTIONS: тексты, варианты и условия show. Идентификаторы id не должны повторяться.
- 03
При необходимости ограничьте передачу ответов одной формой через FORM_SELECTOR, например '#rec123456789 form'.
- 04
Пройдите каждую ветку и отправьте тестовую заявку: проверьте quiz_result, quiz_score и quiz_answers.
/ Настройки
Подстройте под себя.
- Ветвление
- Функция show у вопроса. Она возвращает true только для нужного предыдущего ответа.
- Оценка лида
- Переменная score в finish(). Порог и формулировки результата можно заменить.
- Целевая форма
- FORM_SELECTOR. По умолчанию ответы попадут во все формы страницы.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗