Квиз для подбора квартиры в новостройке

<section class="vbkpk">
  <div class="vbkpk-wrap">
    <div class="vbkpk-side">
      <h2 class="vbkpk-h2">Подберём квартиру под ваш запрос</h2>
      <p class="vbkpk-lead">Четыре вопроса — и вы увидите, сколько подходящих вариантов есть в продаже прямо сейчас.</p>
      <ul class="vbkpk-facts">
        <li><b>340</b><span>квартир в продаже</span></li>
        <li><b>от 4,9 млн</b><span>цена входа</span></li>
      </ul>
    </div>

    <div class="vbkpk-box">
      <div class="vbkpk-bar"><i id="vbkpk-fill"></i></div>
      <span class="vbkpk-step" id="vbkpk-step"></span>
      <div class="vbkpk-stage" id="vbkpk-stage" aria-live="polite"></div>
      <button type="button" class="vbkpk-back" id="vbkpk-back" hidden>Назад</button>
    </div>
  </div>
</section>

<style>
.vbkpk, .vbkpk *, .vbkpk *::before, .vbkpk *::after { box-sizing: border-box; }
.vbkpk {
  --acc: #1f6f5c; --acc-dark: #175646; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkpk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.vbkpk-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.vbkpk-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
.vbkpk-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.vbkpk-facts b { display: block; font-family: var(--fh); font-size: 25px; font-weight: 700; color: var(--acc); }
.vbkpk-facts span { font-size: 13px; color: var(--muted); }

.vbkpk-box { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.8vw, 36px); min-height: 400px; display: flex; flex-direction: column; }
.vbkpk-bar { height: 4px; border-radius: 4px; background: #e8efec; overflow: hidden; margin-bottom: 14px; }
.vbkpk-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--acc); transition: width .35s cubic-bezier(.22,1,.36,1); }
.vbkpk-step { display: block; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.vbkpk-stage { flex: 1; }
.vbkpk-q { font-family: var(--fh); font-size: clamp(19px, 2vw, 25px); line-height: 1.28; font-weight: 600; margin: 0 0 20px; }
.vbkpk-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vbkpk-opt { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 14px; padding: 16px; text-align: left; transition: .18s ease; }
.vbkpk-opt:hover { border-color: var(--acc); background: #f4faf8 !important; }
.vbkpk-opt b { display: block; font-size: 15.5px; font-weight: 600; }
.vbkpk-opt i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.vbkpk-back { border: 0; margin: 18px 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; }
.vbkpk-back:hover { color: var(--acc) !important; }

.vbkpk-res__big { font-family: var(--fh); font-size: clamp(32px, 4vw, 48px); line-height: 1.05; font-weight: 700; color: var(--acc); margin: 0 0 8px; }
.vbkpk-res__sub { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.vbkpk-res__list { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.vbkpk-res__list li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--muted); }
.vbkpk-res__list b { color: var(--ink); font-weight: 600; text-align: right; }
.vbkpk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vbkpk-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: #fff; color: var(--ink); }
.vbkpk-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkpk-consent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 14px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbkpk-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbkpk-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #c2d0cb; border-radius: 5px; background: #fff; position: relative; }
.vbkpk-consent input:checked + .vbkpk-consent__box { background: var(--acc); border-color: var(--acc); }
.vbkpk-consent input:checked + .vbkpk-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbkpk-consent a, .vbkpk-consent a:link, .vbkpk-consent a:visited, .vbkpk-consent a:hover, .vbkpk-consent a:active, .vbkpk-consent a:focus { color: var(--ink) !important; text-decoration: underline !important; }
.vbkpk-submit { width: 100%; min-height: 54px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; border-radius: 10px; background: var(--acc) !important; color: #fff !important; transition: background .2s ease; }
.vbkpk-submit:hover { background: var(--acc-dark) !important; }
.vbkpk-done { text-align: center; padding: 40px 8px; }
.vbkpk-done b { display: block; font-family: var(--fh); font-size: 21px; margin-bottom: 8px; }
.vbkpk-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) { .vbkpk-wrap { grid-template-columns: minmax(0, 1fr); } .vbkpk-box { min-height: 0; } }
@media (max-width: 560px) { .vbkpk-opts { grid-template-columns: minmax(0, 1fr); } .vbkpk-two { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbkpk * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ВОПРОСЫ ── */
  var STEPS = [
    { q: 'Сколько комнат нужно?', name: 'Комнатность', key: 'rooms', opts: [
      { t: 'Студия', s: 'от 24 м²', v: 'st' }, { t: 'Однокомнатная', s: 'от 36 м²', v: '1' },
      { t: 'Двухкомнатная', s: 'от 54 м²', v: '2' }, { t: 'Три и больше', s: 'от 72 м²', v: '3' }
    ]},
    { q: 'На какой бюджет рассчитываете?', name: 'Бюджет', key: 'budget', opts: [
      { t: 'До 6 млн', s: 'с учётом ипотеки', v: 'low' }, { t: '6–9 млн', s: 'средний сегмент', v: 'mid' },
      { t: '9–14 млн', s: 'просторные планировки', v: 'high' }, { t: 'Больше 14 млн', s: 'видовые квартиры', v: 'top' }
    ]},
    { q: 'Какой этаж предпочтительнее?', name: 'Этаж', key: 'floor', opts: [
      { t: 'Первые этажи', s: 'удобно с коляской', v: 'low' }, { t: 'Средние', s: 'золотая середина', v: 'mid' },
      { t: 'Высокие', s: 'вид на пруд', v: 'high' }, { t: 'Не принципиально', s: 'смотрю всё', v: 'any' }
    ]},
    { q: 'Когда планируете заселяться?', name: 'Заселение', key: 'when', opts: [
      { t: 'Сразу', s: 'дом сдан', v: 'now' }, { t: 'В течение года', s: 'скорая сдача', v: 'soon' },
      { t: 'Готов подождать', s: 'выгоднее на котловане', v: 'later' }
    ]}
  ];

  /* ── НАЛИЧИЕ: сколько квартир каждого типа в продаже ── */
  var STOCK = {
    st: { low: 22, mid: 6, high: 0, top: 0 },
    '1': { low: 41, mid: 34, high: 4, top: 0 },
    '2': { low: 8, mid: 56, high: 38, top: 5 },
    '3': { low: 0, mid: 12, high: 44, top: 27 }
  };

  var roots = document.querySelectorAll('.vbkpk');
  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('#vbkpk-stage'), fill = root.querySelector('#vbkpk-fill');
    var step = root.querySelector('#vbkpk-step'), back = root.querySelector('#vbkpk-back');

    function word(n) { var m = n % 100, k = n % 10; return m > 10 && m < 20 ? 'вариантов' : k === 1 ? 'вариант' : k > 1 && k < 5 ? 'варианта' : 'вариантов'; }

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

    function count() {
      var rooms = (ans.filter(function (a) { return a.key === 'rooms'; })[0] || {}).v || '1';
      var budget = (ans.filter(function (a) { return a.key === 'budget'; })[0] || {}).v || 'mid';
      var n = (STOCK[rooms] || {})[budget] || 0;
      var floor = (ans.filter(function (a) { return a.key === 'floor'; })[0] || {}).v;
      if (floor && floor !== 'any') n = Math.round(n * 0.55);
      if (n < 1) n = Math.max(2, Math.round(((STOCK[rooms] || {}).mid || 8) * 0.3));
      return n;
    }

    function drawResult() {
      fill.style.width = '100%';
      step.textContent = 'Готово';
      back.hidden = false;
      var n = count();
      stage.innerHTML =
        '<p class="vbkpk-res__big">' + n + ' ' + word(n) + '<\/p>' +
        '<p class="vbkpk-res__sub">подходит под ваш запрос. Пришлём подборку с планировками, ценами и видом из окна.<\/p>' +
        '<ul class="vbkpk-res__list">' + ans.map(function (a) {
          return '<li><span>' + a.name + '<\/span><b>' + a.value + '<\/b><\/li>';
        }).join('') + '<\/ul>' +
        '<form class="vbkpk-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="vbkpkSuccess" data-inputbox=".vbkpk-inp, .vbkpk-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="Zapros" value="' + ans.map(function (a) { return a.name + ': ' + a.value; }).join('; ') + '">' +
        '<div class="vbkpk-two">' +
        '<input type="text" name="Name" class="vbkpk-inp js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder="Ваше имя">' +
        '<input type="tel" name="Phone" class="vbkpk-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="vbkpk-consent"><input type="checkbox" name="Privacy" value="Da" class="vbkpk-consent-inp js-tilda-rule" data-tilda-req="1">' +
        '<span class="vbkpk-consent__box"><\/span><span>Согласен с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности<\/a><\/span><\/label>' +
        '<button type="submit" class="vbkpk-submit t-submit">Получить подборку<\/button><\/form>';
      var form = root.querySelector('.vbkpk-form');
      if (form && !form.__b) {
        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.vbkpkSuccess) {
      window.vbkpkSuccess = function (f) {
        try { f.innerHTML = '<div class="vbkpk-done"><b>Подборка готовится<\/b><span>Менеджер пришлёт планировки и цены в мессенджер в течение часа.<\/span><\/div>'; } catch (e) {}
      };
    }
    drawStep();
  }
})();
</script>

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