Квиз подбора формата услуги для кадрового агентства

<section class="vbkfp">
  <div class="vbkfp-wrap">
    <div class="vbkfp-head">
      <h2 class="vbkfp-h2">Какой формат подбора закроет вашу задачу</h2>
      <p class="vbkfp-lead">Четыре вопроса об объёме, уровне позиции и сроке. В ответе формат работы, срок и схема оплаты.</p>
    </div>

    <div class="vbkfp-box">
      <ol class="vbkfp-steps" id="vbkfp-steps"></ol>
      <div class="vbkfp-stage" id="vbkfp-stage" aria-live="polite"></div>
      <div class="vbkfp-foot">
        <button type="button" class="vbkfp-back" id="vbkfp-back" hidden>Шаг назад</button>
        <span class="vbkfp-num" id="vbkfp-num"></span>
      </div>
    </div>
  </div>
</section>

<style>
.vbkfp, .vbkfp *, .vbkfp *::before, .vbkfp *::after { box-sizing: border-box; }
.vbkfp {
  --acc: #2f9e73; --acc-dark: #24805d; --ink: #16221d; --muted: #5d7169; --line: #dde7e2; --soft: #f2f7f5;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkfp-wrap { max-width: 980px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkfp-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbkfp-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 12px; }
.vbkfp-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkfp-box { border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 3vw, 40px); }
.vbkfp-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.vbkfp-steps li { font-size: 12px; line-height: 1.35; color: var(--muted); padding-top: 10px; border-top: 3px solid var(--line); transition: .3s; }
.vbkfp-steps li.vbkfp-on { color: var(--acc); border-top-color: var(--acc); font-weight: 600; }

.vbkfp-q { font-family: var(--fh); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.28; font-weight: 700; margin: 0 0 8px; }
.vbkfp-hint { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.vbkfp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.vbkfp-opt { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; text-align: left;
  background: #fff !important; color: var(--ink) !important; border-radius: 16px; padding: 18px 20px; transition: .18s ease; }
.vbkfp-opt:hover { border-color: var(--acc); background: var(--soft) !important; }
.vbkfp-opt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.vbkfp-opt span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }

.vbkfp-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vbkfp-back { border: 0; margin: 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; }
.vbkfp-back:hover { color: var(--acc) !important; }
.vbkfp-num { margin-left: auto; font-size: 13px; color: var(--muted); }

.vbkfp-res__tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--acc); background: var(--soft); border-radius: 999px; padding: 7px 15px; margin-bottom: 14px; }
.vbkfp-res__ttl { font-family: var(--fh); font-size: clamp(23px, 2.9vw, 33px); line-height: 1.14; font-weight: 700; margin: 0 0 12px; }
.vbkfp-res__txt { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 22px; max-width: 40em; }
.vbkfp-res__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 24px; }
.vbkfp-res__grid div { background: var(--soft); border-radius: 16px; padding: 16px 18px; }
.vbkfp-res__grid b { display: block; font-family: var(--fh); font-size: 19px; font-weight: 700; line-height: 1.2; }
.vbkfp-res__grid span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.vbkfp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbkfp-cta, .vbkfp-cta:link, .vbkfp-cta:visited, .vbkfp-cta:active, .vbkfp-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkfp-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkfp-again { min-height: 54px; padding: 0 24px; border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; cursor: pointer; border-radius: 12px; background: #fff !important; color: var(--ink) !important; }

@media (prefers-reduced-motion: reduce) { .vbkfp * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ВОПРОСЫ: p, очки форматам подбора ── */
  var STEPS = [
    { s: 'Объём', q: 'Сколько человек нужно вывести на работу?', h: 'Считаем позиции на ближайшие три месяца.', opts: [
      { t: 'Одна позиция', d: 'Замена одному сотруднику', p: { mass: 0, spot: 3, exec: 2, staff: 0 } },
      { t: 'От двух до четырёх', d: 'Небольшое расширение отдела', p: { mass: 1, spot: 3, exec: 1, staff: 1 } },
      { t: 'От пяти до пятнадцати', d: 'Новая смена, склад, торговая точка', p: { mass: 3, spot: 1, exec: 0, staff: 2 } },
      { t: 'Больше пятнадцати', d: 'Открытие объекта или сезон', p: { mass: 3, spot: 0, exec: 0, staff: 3 } }
    ]},
    { s: 'Уровень', q: 'Какого уровня позиция?', h: 'От уровня зависят глубина проверки и срок.', opts: [
      { t: 'Линейный персонал', d: 'Продавцы, грузчики, курьеры, операторы', p: { mass: 3, spot: 0, exec: 0, staff: 3 } },
      { t: 'Специалист', d: 'Бухгалтер, инженер, менеджер по продажам', p: { mass: 0, spot: 3, exec: 1, staff: 0 } },
      { t: 'Руководитель', d: 'Директор направления, главный инженер', p: { mass: 0, spot: 1, exec: 4, staff: 0 } },
      { t: 'Редкий профиль', d: 'Узкая специализация, кандидатов мало', p: { mass: 0, spot: 2, exec: 3, staff: 0 } }
    ]},
    { s: 'Срок', q: 'Когда человек должен приступить?', h: 'Срок влияет на схему работы и стоимость.', opts: [
      { t: 'На этой неделе', d: 'Работа стоит, люди нужны сразу', p: { mass: 2, spot: 0, exec: 0, staff: 4 } },
      { t: 'В течение месяца', d: 'Есть время на воронку', p: { mass: 2, spot: 3, exec: 1, staff: 0 } },
      { t: 'За два или три месяца', d: 'Плановая замена или проект', p: { mass: 0, spot: 2, exec: 3, staff: 0 } },
      { t: 'Собираем резерв', d: 'Кандидаты нужны про запас', p: { mass: 2, spot: 1, exec: 2, staff: 1 } }
    ]},
    { s: 'Ресурс', q: 'Кто занимается подбором внутри компании?', h: 'Поймём, какую часть работы взять на себя.', opts: [
      { t: 'Никто', d: 'Вакансии ведёт руководитель', p: { mass: 2, spot: 2, exec: 1, staff: 3 } },
      { t: 'Кадровик по совместительству', d: 'Оформление есть, поиска нет', p: { mass: 2, spot: 2, exec: 1, staff: 2 } },
      { t: 'Есть рекрутер, рук не хватает', d: 'Вакансий больше, чем ресурса', p: { mass: 3, spot: 2, exec: 0, staff: 1 } },
      { t: 'Отдел есть, нужен редкий поиск', d: 'Своими силами кандидата не нашли', p: { mass: 0, spot: 2, exec: 4, staff: 0 } }
    ]}
  ];

  /* ── ФОРМАТЫ УСЛУГИ ── */
  var PLANS = {
    mass: { ttl: 'Массовый подбор', href: '#raschet',
      txt: 'Объявления, обзвон базы и групповые собеседования на линейные позиции. Ведём группу вакансий сразу, поэтому первые люди выходят раньше, чем закрыт весь объём.',
      facts: [['7 дней', 'до первых выходов'], ['За вышедшего', 'схема оплаты'], ['30 дней', 'бесплатная замена']] },
    spot: { ttl: 'Точечный поиск специалиста', href: '#raschet',
      txt: 'Снимаем профиль должности с руководителем, ищем по базам и откликам, проверяем опыт и собираем рекомендации. В итоге список финалистов с заключением.',
      facts: [['14 дней', 'до трёх финалистов'], ['После выхода', 'схема оплаты'], ['90 дней', 'бесплатная замена']] },
    exec: { ttl: 'Прямой поиск руководителя', href: '#raschet',
      txt: 'Составляем карту рынка по отрасли, выходим на действующих руководителей и ведём переговоры до предложения о работе. Поиск идёт адресно.',
      facts: [['35 дней', 'до выхода кандидата'], ['Три платежа', 'схема оплаты'], ['180 дней', 'бесплатная замена']] },
    staff: { ttl: 'Аутстаффинг персонала', href: '#raschet',
      txt: 'Люди работают на вашей площадке и числятся в штате агентства. Документы, выплаты и замена заболевшего на нашей стороне, вы платите по часам.',
      facts: [['3 дня', 'до выхода смены'], ['По часам', 'схема оплаты'], ['В тот же день', 'замена сотрудника']] }
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, score = { mass: 0, spot: 0, exec: 0, staff: 0 }, trail = [];
    var stage = root.querySelector('#vbkfp-stage'), rail = root.querySelector('#vbkfp-steps');
    var back = root.querySelector('#vbkfp-back'), num = root.querySelector('#vbkfp-num');

    rail.innerHTML = STEPS.map(function (s, i) { return '<li>' + (i + 1) + '. ' + s.s + '<\/li>'; }).join('') + '<li>5. Формат<\/li>';

    function mark(active) {
      var items = rail.children;
      for (var i = 0; i < items.length; i++) {
        items[i].className = i === active ? 'vbkfp-on' : '';
      }
    }

    function drawStep() {
      var s = STEPS[idx];
      mark(idx);
      num.textContent = 'Вопрос ' + (idx + 1) + ' из ' + STEPS.length;
      back.hidden = idx === 0;
      stage.innerHTML = '<h3 class="vbkfp-q">' + s.q + '<\/h3><p class="vbkfp-hint">' + s.h + '<\/p><div class="vbkfp-opts">' +
        s.opts.map(function (o, i) {
          return '<button type="button" class="vbkfp-opt" data-i="' + i + '"><b>' + o.t + '<\/b><span>' + o.d + '<\/span><\/button>';
        }).join('') + '<\/div>';
      var bs = stage.querySelectorAll('.vbkfp-opt');
      for (var j = 0; j < bs.length; j++) bind(bs[j], s);
    }

    function bind(b, s) {
      b.addEventListener('click', function () {
        var o = s.opts[+b.getAttribute('data-i')];
        trail.push(o.p);
        for (var k in o.p) if (o.p.hasOwnProperty(k)) score[k] += o.p[k];
        idx++;
        if (idx < STEPS.length) drawStep(); else drawResult();
      });
    }

    function drawResult() {
      mark(STEPS.length);
      num.textContent = 'Готово';
      back.hidden = false;
      var keys = ['mass', 'spot', 'exec', 'staff'], win = keys[0];
      for (var i = 1; i < keys.length; i++) if (score[keys[i]] > score[win]) win = keys[i];
      var p = PLANS[win];
      stage.innerHTML = '<span class="vbkfp-res__tag">Подходящий формат<\/span>' +
        '<h3 class="vbkfp-res__ttl">' + p.ttl + '<\/h3>' +
        '<p class="vbkfp-res__txt">' + p.txt + '<\/p><div class="vbkfp-res__grid">' +
        p.facts.map(function (f) { return '<div><b>' + f[0] + '<\/b><span>' + f[1] + '<\/span><\/div>'; }).join('') +
        '<\/div><div class="vbkfp-acts"><a class="vbkfp-cta" href="' + p.href + '">Рассчитать стоимость<\/a>' +
        '<button type="button" class="vbkfp-again">Ответить заново<\/button><\/div>';
      var again = stage.querySelector('.vbkfp-again');
      if (again) again.addEventListener('click', function () {
        idx = 0; score = { mass: 0, spot: 0, exec: 0, staff: 0 }; trail = []; drawStep();
      });
    }

    back.addEventListener('click', function () {
      if (idx === 0) return;
      if (idx >= STEPS.length) idx = STEPS.length;
      idx--;
      var p = trail.pop();
      if (p) for (var k in p) if (p.hasOwnProperty(k)) score[k] -= p[k];
      drawStep();
    });

    drawStep();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.