12 · Маркетинг

Умный квиз с ветвлением в Tilda
готовый код.

Показывает разные вопросы в зависимости от ответа, оценивает заявку и передаёт результат в форму Tilda.

Забрать код ↓
Технология
HTML + CSS + JS
Установка
20 минут
Куда вставлять
Блок T123
Обновлено
08.09.2026

Сначала посмотрите,
как это работает.

Live demoКвиз с ветвлением
Вопрос 1 из 30%

Какая главная задача сайта?

Скопируйте.
Вставьте. Опубликуйте.

Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.

Готовый код
<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>

Четыре шага.

  1. 01

    Добавьте T123 перед обычной формой Tilda и вставьте код целиком.

  2. 02

    Отредактируйте QUESTIONS: тексты, варианты и условия show. Идентификаторы id не должны повторяться.

  3. 03

    При необходимости ограничьте передачу ответов одной формой через FORM_SELECTOR, например '#rec123456789 form'.

  4. 04

    Пройдите каждую ветку и отправьте тестовую заявку: проверьте quiz_result, quiz_score и quiz_answers.

Подстройте под себя.

Ветвление
Функция show у вопроса. Она возвращает true только для нужного предыдущего ответа.
Оценка лида
Переменная score в finish(). Порог и формулировки результата можно заменить.
Целевая форма
FORM_SELECTOR. По умолчанию ответы попадут во все формы страницы.

Не нашли нужное?
Соберём под ваш сайт.

Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.

Обсудить в Telegram ↗