Квиз для подбора автомобиля под задачи и бюджет

<section class="vbkpa">
  <div class="vbkpa-wrap">
    <div class="vbkpa-box">
      <div class="vbkpa-top">
        <h2 class="vbkpa-h2">Подберём машину под ваши задачи</h2>
        <span class="vbkpa-step" id="vbkpa-step"></span>
      </div>
      <div class="vbkpa-bar"><i id="vbkpa-fill"></i></div>
      <div class="vbkpa-stage" id="vbkpa-stage" aria-live="polite"></div>
      <button type="button" class="vbkpa-back" id="vbkpa-back" hidden>Назад</button>
    </div>
  </div>
</section>

<style>
.vbkpa, .vbkpa *, .vbkpa *::before, .vbkpa *::after { box-sizing: border-box; }
.vbkpa {
  --acc: #ff8a1f; --acc-dark: #e8760f; --bg: #16181b; --panel: #1e2126; --ink: #f0f1f3; --muted: #98a0aa; --line: #2b2f36;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkpa-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkpa-box { background: var(--panel); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 3vw, 42px); }
.vbkpa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.vbkpa-h2 { font-family: var(--fh); font-size: clamp(23px, 3vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.vbkpa-step { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vbkpa-bar { height: 4px; border-radius: 4px; background: #2b2f36; overflow: hidden; margin-bottom: 28px; }
.vbkpa-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--acc); transition: width .35s cubic-bezier(.22,1,.36,1); }

.vbkpa-q { font-family: var(--fh); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.3; font-weight: 600; margin: 0 0 18px; }
.vbkpa-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.vbkpa-opt { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: transparent !important; color: var(--ink) !important; border-radius: 14px; padding: 16px 18px; text-align: left; transition: .18s ease; }
.vbkpa-opt:hover { border-color: var(--acc); background: rgba(255,138,31,.06) !important; }
.vbkpa-opt b { display: block; font-size: 15.5px; font-weight: 600; }
.vbkpa-opt i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.vbkpa-back { border: 0; margin: 20px 0 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--muted) !important; text-decoration: underline; }
.vbkpa-back:hover { color: var(--acc) !important; }

.vbkpa-res__ttl { font-family: var(--fh); font-size: clamp(19px, 2vw, 25px); font-weight: 700; margin: 0 0 6px; }
.vbkpa-res__sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.vbkpa-cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 24px; }
.vbkpa-car { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.vbkpa-car svg { display: block; width: 100%; height: auto; background: #24272d; }
.vbkpa-car__b { padding: 14px 16px 16px; }
.vbkpa-car__n { display: block; font-family: var(--fh); font-size: 16px; font-weight: 700; }
.vbkpa-car__d { display: block; font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; }
.vbkpa-car__p { display: block; font-size: 15px; font-weight: 600; color: var(--acc); }
.vbkpa-hint { font-size: 13px; color: var(--muted); margin: 0 0 18px; }

.vbkpa-form { display: grid; gap: 8px; }
.vbkpa-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vbkpa-inp { width: 100%; height: 52px; padding: 0 15px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--ink); }
.vbkpa-inp::placeholder { color: #6f7681; }
.vbkpa-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkpa-consent { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbkpa-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbkpa-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #3c424b; border-radius: 5px; position: relative; }
.vbkpa-consent input:checked + .vbkpa-consent__box { background: var(--acc); border-color: var(--acc); }
.vbkpa-consent input:checked + .vbkpa-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #16181b; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbkpa-consent a, .vbkpa-consent a:link, .vbkpa-consent a:visited, .vbkpa-consent a:hover, .vbkpa-consent a:active, .vbkpa-consent a:focus { color: var(--ink) !important; text-decoration: underline !important; }
.vbkpa-submit { min-height: 54px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 700; cursor: pointer; border-radius: 10px; background: var(--acc) !important; color: #16181b !important; transition: background .2s ease; }
.vbkpa-submit:hover { background: var(--acc-dark) !important; }
.vbkpa-done { text-align: center; padding: 30px 6px; }
.vbkpa-done b { display: block; font-family: var(--fh); font-size: 20px; margin-bottom: 6px; }
.vbkpa-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 560px) { .vbkpa-opts { grid-template-columns: minmax(0, 1fr); } .vbkpa-two { grid-template-columns: minmax(0, 1fr); } .vbkpa-top { flex-direction: column; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .vbkpa * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ВОПРОСЫ ── */
  var STEPS = [
    { q: 'Какой бюджет рассматриваете?', key: 'budget', opts: [
      { t: 'До 1,5 млн', s: 'первая машина', v: 1500000 },
      { t: '1,5–2,5 млн', s: 'семейный вариант', v: 2500000 },
      { t: '2,5–4 млн', s: 'комфорт-класс', v: 4000000 },
      { t: 'Больше 4 млн', s: 'без ограничений', v: 9000000 }
    ]},
    { q: 'Какой кузов нужен?', key: 'body', opts: [
      { t: 'Кроссовер', s: 'клиренс и багажник', v: 'suv' },
      { t: 'Седан', s: 'город и трасса', v: 'sedan' },
      { t: 'Хэтчбек', s: 'компактно парковаться', v: 'hatch' },
      { t: 'Не важно', s: 'смотрю варианты', v: 'any' }
    ]},
    { q: 'Как будете ездить?', key: 'use', opts: [
      { t: 'Город каждый день', s: 'пробки, короткие поездки', v: 'city' },
      { t: 'Дальние поездки', s: 'трасса, отпуск', v: 'road' },
      { t: 'Дача и грунтовки', s: 'нужен клиренс', v: 'offroad' },
      { t: 'Семья с детьми', s: 'кресла, багажник', v: 'family' }
    ]},
    { q: 'Коробка передач?', key: 'gear', opts: [
      { t: 'Автомат', s: 'классический или вариатор', v: 'auto' },
      { t: 'Механика', s: 'дешевле в обслуживании', v: 'manual' },
      { t: 'Без разницы', s: 'решает цена', v: 'any' }
    ]}
  ];

  /* ── МОДЕЛИ: img — адрес фото, если пусто, рисуется SVG-силуэт ── */
  var CARS = [
    { name: 'Kia Seltos', body: 'suv', price: 2450000, use: ['city', 'family', 'offroad'], gear: ['auto', 'manual'], d: 'Кроссовер, 1.6, клиренс 190 мм', img: '' },
    { name: 'Haval Jolion', body: 'suv', price: 2190000, use: ['city', 'family'], gear: ['auto'], d: 'Кроссовер, 1.5 турбо, робот', img: '' },
    { name: 'Lada Vesta', body: 'sedan', price: 1390000, use: ['city', 'road'], gear: ['manual', 'auto'], d: 'Седан, 1.6, вариатор или МКПП', img: '' },
    { name: 'Kia Rio', body: 'sedan', price: 1590000, use: ['city'], gear: ['auto', 'manual'], d: 'Седан, 1.6, автомат', img: '' },
    { name: 'Skoda Octavia', body: 'hatch', price: 2890000, use: ['road', 'family'], gear: ['auto'], d: 'Лифтбек, 1.4 TSI, DSG', img: '' },
    { name: 'Toyota RAV4', body: 'suv', price: 3990000, use: ['road', 'family', 'offroad'], gear: ['auto'], d: 'Кроссовер, 2.0, полный привод', img: '' },
    { name: 'Chery Tiggo 7', body: 'suv', price: 2590000, use: ['city', 'family'], gear: ['auto'], d: 'Кроссовер, 1.6 турбо', img: '' },
    { name: 'BMW X3', body: 'suv', price: 5900000, use: ['road', 'family'], gear: ['auto'], d: 'Кроссовер, 2.0, xDrive', img: '' },
    { name: 'Volkswagen Polo', body: 'hatch', price: 1790000, use: ['city'], gear: ['auto', 'manual'], d: 'Лифтбек, 1.6, автомат', img: '' }
  ];

  var roots = document.querySelectorAll('.vbkpa');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, ans = {};
    var stage = root.querySelector('#vbkpa-stage'), fill = root.querySelector('#vbkpa-fill');
    var step = root.querySelector('#vbkpa-step'), back = root.querySelector('#vbkpa-back');
    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    function silhouette(body) {
      var d = body === 'sedan'
        ? 'M18 74h164M34 74c0-9 7-16 16-16s16 7 16 16M134 74c0-9 7-16 16-16s16 7 16 16M22 74l6-20 24-16h96l22 16 8 20'
        : body === 'hatch'
          ? 'M18 74h164M34 74c0-9 7-16 16-16s16 7 16 16M134 74c0-9 7-16 16-16s16 7 16 16M22 74l6-22 26-18h84l30 22 10 18'
          : 'M14 74h172M36 74c0-9 7-16 16-16s16 7 16 16M132 74c0-9 7-16 16-16s16 7 16 16M18 74l4-26 28-20h100l26 20 6 26';
      return '<svg viewBox="0 0 200 100" role="img" aria-label="Силуэт автомобиля" focusable="false">' +
        '<path d="' + d + '" fill="none" stroke="#ff8a1f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" opacity=".85"/><\/svg>';
    }

    function drawStep() {
      var s = STEPS[idx];
      step.textContent = 'Шаг ' + (idx + 1) + ' из ' + STEPS.length;
      fill.style.width = (idx / STEPS.length * 100) + '%';
      back.hidden = idx === 0;
      stage.innerHTML = '<h3 class="vbkpa-q">' + s.q + '<\/h3><div class="vbkpa-opts">' +
        s.opts.map(function (o, i) { return '<button type="button" class="vbkpa-opt" data-i="' + i + '"><b>' + o.t + '<\/b><i>' + o.s + '<\/i><\/button>'; }).join('') +
        '<\/div>';
      stage.querySelectorAll('.vbkpa-opt').forEach(function (b) {
        b.addEventListener('click', function () {
          ans[s.key] = s.opts[+b.dataset.i].v;
          idx++;
          if (idx < STEPS.length) drawStep(); else drawResult();
        });
      });
    }

    function pick() {
      var pool = CARS.filter(function (c) { return c.price <= ans.budget; });
      if (!pool.length) pool = CARS.slice();
      var strict = pool.filter(function (c) {
        return (ans.body === 'any' || c.body === ans.body) &&
          c.use.indexOf(ans.use) !== -1 &&
          (ans.gear === 'any' || c.gear.indexOf(ans.gear) !== -1);
      });
      if (strict.length >= 3) return { list: strict.slice(0, 3), exact: true };
      var soft = pool.filter(function (c) { return ans.body === 'any' || c.body === ans.body; });
      if (soft.length >= 3) return { list: soft.slice(0, 3), exact: false };
      return { list: pool.slice(0, 3), exact: false };
    }

    function drawResult() {
      step.textContent = 'Готово';
      fill.style.width = '100%';
      back.hidden = false;
      var r = pick();
      stage.innerHTML =
        '<p class="vbkpa-res__ttl">Подходящие варианты<\/p>' +
        '<p class="vbkpa-res__sub">Из наличия и под заказ. Тест-драйв бесплатный, машину подгоняем к удобному вам времени.<\/p>' +
        '<div class="vbkpa-cars">' + r.list.map(function (c) {
          return '<article class="vbkpa-car">' + (c.img ? '<img src="' + c.img + '" alt="' + c.name + '">' : silhouette(c.body)) +
            '<div class="vbkpa-car__b"><b class="vbkpa-car__n">' + c.name + '<\/b>' +
            '<span class="vbkpa-car__d">' + c.d + '<\/span>' +
            '<span class="vbkpa-car__p">от ' + fmt(c.price) + ' ₽<\/span><\/div><\/article>';
        }).join('') + '<\/div>' +
        (r.exact ? '' : '<p class="vbkpa-hint">Под все условия сразу подходит меньше трёх машин — показали ближайшие по бюджету и кузову.<\/p>') +
        '<form class="vbkpa-form t-form js-form-proccess" role="form" action="#" method="POST" ' +
        'data-vibeblock-form="true" data-formactiontype="2" data-error-popup="y" data-success-popup="y" ' +
        'data-success-callback="vbkpaSuccess" data-inputbox=".vbkpa-inp, .vbkpa-consent-inp" novalidate>' +
        '<input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">' +
        '<input type="hidden" name="form_source" value="Квиз — подбор автомобиля">' +
        '<input type="hidden" name="Podbor" value="' + r.list.map(function (c) { return c.name; }).join(', ') + '">' +
        '<div class="vbkpa-two">' +
        '<input type="text" name="Name" class="vbkpa-inp js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder="Ваше имя">' +
        '<input type="tel" name="Phone" class="vbkpa-inp js-tilda-rule js-tilda-mask" data-tilda-req="1" data-tilda-rule="phone" ' +
        'data-tilda-mask="+7 (999) 999-99-99" inputmode="tel" placeholder="+7 (___) ___-__-__"><\/div>' +
        '<label class="vbkpa-consent"><input type="checkbox" name="Privacy" value="Da" class="vbkpa-consent-inp js-tilda-rule" data-tilda-req="1">' +
        '<span class="vbkpa-consent__box"><\/span><span>Согласен с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности<\/a><\/span><\/label>' +
        '<button type="submit" class="vbkpa-submit t-submit">Записаться на тест-драйв<\/button><\/form>';
      bindForm();
    }

    function bindForm() {
      var form = root.querySelector('.vbkpa-form');
      if (!form || form.__b) return;
      form.__b = 1;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button[type="submit"], .t-submit');
        if (btn && typeof window.t_forms__initBtnClick === 'function') {
          try { window.t_forms__initBtnClick({ target: btn, srcElement: btn, preventDefault: function () {} }); } catch (_) {}
        }
      });
    }

    back.addEventListener('click', function () { if (idx > 0) { idx--; drawStep(); } });

    if (!window.vbkpaSuccess) {
      window.vbkpaSuccess = function (f) {
        try { f.innerHTML = '<div class="vbkpa-done"><b>Заявка у менеджера<\/b><span>Перезвоним и согласуем время тест-драйва по выбранным моделям.<\/span><\/div>'; } catch (e) {}
      };
    }
    drawStep();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно. В форме замените HASH_EMAIL на хеш приёмника из Tilda → Site Settings → Forms.