Quiz-лендинг на HTML: собираем заявки через интерактивный опрос

Классический лендинг с формой «оставьте заявку» даёт конверсию 2-5%. Квиз-лендинг — интерактивный опрос из 3-7 вопросов, в конце которого пользователь оставляет контакты для получения результата или расчёта — конверсию 10-25%. Магия — в вовлечении: человек, который ответил на несколько вопросов, психологически уже «инвестировал» и охотнее оставляет данные. В статье — как сделать quiz-лендинг на чистом HTML+JS без сервисов и плагинов, с полной отправкой ответов в Telegram или на email.

Содержание

1. Что такое quiz-лендинг
2. Когда квиз работает лучше формы
3. Структура хорошего квиза
4. Какие вопросы задавать
5. HTML-структура квиза
6. CSS-стили
7. JS-логика переходов
8. Сбор и отправка ответов
9. Страница результата
10. Частые ошибки
11. FAQ
12. Чек-лист

Что такое quiz-лендинг

Quiz-лендинг (или «квиз» — от англ. quiz) — лендинг, на котором посетителю задаются несколько вопросов по типу «тест» или «калькулятор», и в конце предлагается оставить контакты для получения индивидуального результата.

Примеры:

• «Подберите свой ремонт за 1 минуту» (студия дизайна интерьера);
• «Рассчитайте стоимость доставки» (логистика);
• «Определите идеальный кухонный гарнитур» (мебель);
• «Какой пакет туристической страховки вам нужен?»;
• «Получите план тренировок под ваши цели» (фитнес).

Цель — не реально подобрать идеальный вариант, а вовлечь человека и собрать контакт. Дальше менеджер связывается и продаёт.

Когда квиз работает лучше формы

• Сложные продукты с вариативностью. Ремонт, мебель, страховка, обучение, путешествия.
• Услуги с индивидуальным расчётом. «Цена зависит от...» — квиз собирает параметры.
• Аудитория ищет, что подойдёт именно ей. Не знает точно, что хочет.
• B2C-сегмент с эмоциональной покупкой. Свадьбы, праздники, подарки.

Не работает или хуже работает для:

• Простых готовых продуктов с одной ценой.
• B2B с длинным циклом сделки — там лучше прямой контакт.
• Аудитории, точно знающей что нужно — для них дополнительные вопросы раздражают.

Структура хорошего квиза

1. Заголовок и кнопка старта. «Подберите ремонт за 1 минуту. Ответьте на 5 вопросов».
2. Прогресс-бар. «Шаг 1 из 5», показывает, что недолго.
3. 3-7 вопросов. Не больше — иначе бросают.
4. Простые варианты ответов. Кнопки, картинки, иногда ползунки.
5. Финальный шаг — контакты. «Куда отправить результат?»
6. Страница спасибо. «Спасибо, мы свяжемся с вами в течение часа».

Какие вопросы задавать

• Сегментирующие. Что именно нужно: ремонт квартиры или офиса? Свадьба на 50 или 200 гостей?
• По бюджету. «Какой ориентировочный бюджет?» (несколько диапазонов).
• По срокам. «Когда планируете?» (срочно / в течение месяца / нет конкретных сроков).
• По дополнительным опциям. «Что важно?» (несколько чекбоксов).

Главное правило: каждый вопрос должен иметь ценность — либо для расчёта, либо для квалификации лида.

HTML-структура квиза

<div id="quiz">
  <!-- Прогресс -->
  <div class="quiz-progress">
    Шаг <span id="step-num">1</span> из 5
    <div class="progress-bar">
      <div class="progress-fill" id="progress-fill"></div>
    </div>
  </div>

  <!-- Шаг 1 -->
  <div class="quiz-step active" data-step="1">
    <h2>Какой тип ремонта вас интересует?</h2>
    <button class="quiz-option" data-value="квартира">Квартира</button>
    <button class="quiz-option" data-value="дом">Загородный дом</button>
    <button class="quiz-option" data-value="офис">Офис</button>
  </div>

  <!-- Шаг 2 -->
  <div class="quiz-step" data-step="2">
    <h2>Какая площадь?</h2>
    <button class="quiz-option" data-value="до 50">До 50 м²</button>
    <button class="quiz-option" data-value="50-100">50-100 м²</button>
    <button class="quiz-option" data-value="100+">Более 100 м²</button>
  </div>

  <!-- Финальный шаг -->
  <div class="quiz-step" data-step="final">
    <h2>Куда отправить результат?</h2>
    <form id="quiz-form">
      <input type="text" name="name" placeholder="Ваше имя" required>
      <input type="tel" name="phone" placeholder="Телефон" required>
      <button type="submit">Получить расчёт</button>
    </form>
  </div>
</div>

CSS-стили

.quiz-step { display: none; }
.quiz-step.active { display: block; }

.quiz-progress {
  margin-bottom: 2rem;
  text-align: center;
}
.progress-bar {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  margin-top: 0.5rem;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #4a5cf5;
  width: 0;
  transition: width 0.3s;
}

.quiz-option {
  display: block;
  width: 100%;
  padding: 1.5rem;
  margin: 0.5rem 0;
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-option:hover {
  border-color: #4a5cf5;
  background: #f5f6ff;
}

#quiz-form input {
  width: 100%;
  padding: 1rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: 6px;
}
#quiz-form button {
  width: 100%;
  padding: 1rem;
  background: #4a5cf5;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

JS-логика переходов

const answers = {};
let currentStep = 1;
const totalSteps = 5;

function showStep(step) {
  document.querySelectorAll('.quiz-step').forEach(el => el.classList.remove('active'));
  document.querySelector(`[data-step="${step}"]`).classList.add('active');
  document.getElementById('step-num').textContent = step === 'final' ? totalSteps : step;
  const progress = step === 'final' ? 100 : (step / totalSteps) * 100;
  document.getElementById('progress-fill').style.width = progress + '%';
}

document.querySelectorAll('.quiz-option').forEach(btn => {
  btn.addEventListener('click', () => {
    const step = btn.closest('.quiz-step').dataset.step;
    answers[`step_${step}`] = btn.dataset.value;
    if (currentStep < totalSteps) {
      currentStep++;
      showStep(currentStep);
    } else {
      showStep('final');
    }
  });
});

Сбор и отправка ответов

document.getElementById('quiz-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  answers.name = formData.get('name');
  answers.phone = formData.get('phone');

  // Формируем текст для отправки в Telegram
  const text = `🎯 Новая заявка с квиза
Имя: ${answers.name}
Телефон: ${answers.phone}

Ответы:
${Object.entries(answers)
  .filter(([k]) => k.startsWith('step_'))
  .map(([k, v]) => `${k}: ${v}`)
  .join('\n')}`;

  const TOKEN = 'ваш_токен';
  const CHAT_ID = 'ваш_chat_id';
  await fetch(`https://api.telegram.org/bot${TOKEN}/sendMessage`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ chat_id: CHAT_ID, text })
  });

  // Цель в Метрике
  ym(СЧЁТЧИК, 'reachGoal', 'quiz_complete');

  // Переход на спасибо
  window.location.href = '/thank-you.html';
});

Страница результата

На thank-you.html:

• «Спасибо! Мы свяжемся с вами в течение часа.»
• Дополнительная ценность: бесплатный чек-лист, полезная статья;
• Кнопки соцсетей — «Подпишитесь, чтобы не пропустить новости»;
• Цель в Метрике — для отслеживания финальной конверсии.

Частые ошибки

1. Слишком много вопросов. 10+ шагов — бросают на середине. Оптимум — 3-5.
2. Сложные вопросы. «Какой коэффициент отражения нужен?» — посетитель не знает.
3. Нет прогресса. Пользователь не понимает, сколько ещё. Прогресс-бар обязателен.
4. Форма контактов до результата. Хорошо вовлёкся → пугается формы. Делайте только в конце.
5. Нет ценности взамен. «Получите расчёт» — слабо. «Получите 3 варианта планировки и точный бюджет» — сильно.
6. Длинные текстовые ответы. Кнопки с короткими опциями работают лучше.
7. Нет аналитики. Не знаете, где пользователи отваливаются.

FAQ

Чек-лист квиза

• ☐ Сформулирован оффер на старте квиза
• ☐ Заданы 3-5 вопросов с понятными вариантами
• ☐ Прогресс-бар показывает, сколько осталось
• ☐ Финальный шаг — форма контактов с обещанием ценности
• ☐ Ответы отправляются в Telegram/CRM/email
• ☐ Настроена страница «Спасибо»
• ☐ Установлена аналитика на каждый шаг
• ☐ Квиз адаптивен под мобильные
• ☐ Защита от спама (honeypot)
• ☐ Менеджеры готовы обрабатывать заявки

Заключение

Quiz-лендинг — простой способ кратно повысить конверсию в заявку. Несколько часов настройки на чистом HTML+JS, и вы получаете инструмент, который вовлекает посетителя в диалог. Работает особенно хорошо в нишах с индивидуальным расчётом стоимости: ремонт, мебель, услуги.

Подобрать готовый HTML-шаблон под лендинг или квиз можно в подборке Zettabyte — некоторые шаблоны уже идут со встроенными многошаговыми формами. А под размещение лендинга подойдёт самый недорогой тариф из подборщика хостингов.