Интерактивный квиз-калькулятор на чистом JavaScript для сайта

Большинство сайтов для сбора первичных заявок используют либо стандартные формы из двух полей, либо подключают сторонние SaaS-конструкторы квизов с ежемесячной подпиской. В этой статье разбирается инженерная архитектура легковесного квиза-калькулятора на чистом JavaScript: пошаговый расчет сметы на клиенте, валидация данных, прямая отправка полного опросного листа в Telegram или CRM со сквозной UTM-атрибуцией заявок и фильтрация нецелевых обращений.

Чем кастомный квиз на чистом JS отличается от сторонних SaaS-конструкторов?

Квиз на чистом JavaScript встраивается напрямую в код темы сайта без внешних iframe и сторонних библиотек. Он не требует ежемесячной абонентской платы за виджет, не замедляет загрузку страницы Core Web Vitals (критично для SEO-продвижения) и передает данные напрямую на ваш сервер без передачи персональных данных третьим лицам.

Популярные облачные платформы квизов (Marquiz, Envybox и аналоги) работают через подключение внешнего скрипта. Этот скрипт загружает тяжёлый внешний бандл, создаёт сторонние DNS-запросы и может блокировать основной поток браузера при первом рендере страницы.

Кроме того, при использовании сторонних сервисов бизнес платит регулярную абонентскую плату за каждый собранный контакт, а в случае блокировки или сбоя на стороне платформы форма на сайте перестает работать. Собственный скрипт на чистом JS весит на порядок меньше — обычно единицы килобайт, — функционирует автономно и принадлежит владельцу сайта навсегда.

Как устроена пошаговая архитектура и расчет сметы на стороне клиента?

Архитектура квиза строится на массиве объектов шагов (State Object), где каждый шаг содержит заголовок, варианты выбора, числовые коэффициенты стоимости и условия перехода. Чистая функция на JavaScript пересчитывает сумму при каждом клике и переключает активный экран.

Пример структуры данных конфигурации квиза для расчета стоимости отделочных работ:

// 1. Конфигурация шагов и коэффициентов
const quizConfig = {
  steps: [
    {
      id: "type",
      question: "Какой тип балкона требуется обшить?",
      options: [
        { label: "Лоджия (прямая)", price: 400 },
        { label: "Балкон с выносом (Г-образный)", price: 650 },
        { label: "Панорамный (французский)", price: 850 }
      ]
    },
    {
      id: "insulation",
      question: "Требуется ли утепление стен и пола?",
      options: [
        { label: "Без утепления (холодный контур)", price: 0 },
        { label: "Пеноплекс 30 мм (стандарт)", price: 250 },
        { label: "Комплексный теплый пол + термос", price: 500 }
      ]
    }
  ]
};

// 2. Движок пересчета стоимости
let currentStep = 0;
let selectedAnswers = {};

function calculateTotal() {
  return Object.values(selectedAnswers).reduce((sum, item) => sum + (item.price || 0), 0);
}

Такой подход позволяет моментально показывать пользователю ориентировочный диапазон стоимости работ без перезагрузки страницы и задержек сетевого стека.

Как настроить валидацию полей и отправку ответов в Telegram или CRM?

Отправка результатов выполняется через асинхронный AJAX-запрос (fetch) на серверный эндпоинт темы WordPress. Скрипт форматирует выбранные ответы в структурированный текст, валидирует телефон через регулярное выражение и передает payload в Telegram Bot API или CRM.

Для защиты от спам-ботов в форму внедряется скрытое поле-ловушка (honeypot). Реальные пользователи его не видят и оставляют пустым, тогда как автоматические спам-скрипты заполняют все поля подряд, что позволяет серверу мгновенно отклонять невалидные запросы без подключения тяжелой капчи.

// Клиентский обработчик отправки формы
async function submitQuiz(event) {
  event.preventDefault();
  
  const phone = document.getElementById('quiz-phone').value;
  const honeypot = document.getElementById('quiz-website').value;
  
  if (honeypot) return; // Отсекаем спам-бота
  if (!/^+375d{9}$/.test(phone.replace(/D/g, ''))) {
    alert('Пожалуйста, введите корректный номер телефона');
    return;
  }

  const payload = {
    phone: phone,
    totalEstimate: calculateTotal(),
    answers: selectedAnswers
  };

  const response = await fetch('/wp-json/fastup/v1/quiz-submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  if (response.ok) {
    document.getElementById('quiz-container').innerHTML = '<p>Спасибо! Расчет отправлен мастеру.</p>';
  }
}

Как формулировать вопросы квиза, чтобы отсекать нецелевые обращения до звонка?

Квалификация лидов через вопросы квиза достигается добавлением конкретных фильтрующих параметров: типа объекта, примерного метража, диапазона готовности к началу работ и ориентировочного бюджета. Это позволяет менеджеру видеть контекст задачи еще до набора номера.

Типичная ошибка при проектировании квиза — задавать слишком много абстрактных вопросов («Какой ваш любимый цвет?»), которые утомляют посетителя. Эффективный опросник для услуг состоит из 3–4 предметных шагов:

• Шаг 1 (Объем задачи): выбор базовой модификации услуги (например: ремонт подвески, замена ГРМ, полное ТО).
• Шаг 2 (Технические параметры): площадь в м², марка автомобиля или материал стен.
• Шаг 3 (Срочность): «Нужно срочно на этой неделе» / «Планирую в течение месяца» / «Сравниваю цены».
• Шаг 4 (Контакт): ввод телефона для отправки детализированной сметы.

Практический пример: внедрение квиза и виджета связи на сайте kubdecor.by

В клиентском проекте отделки балконов kubdecor.by интерактивный квиз-опросник и виджет быстрого вызова были реализованы на чистом коде кастомной темы WordPress без сторонних конструкторов. Инструмент собрал 68 входящих обращений за 6 месяцев работы без затрат на абонентскую плату за плагины.

Заказчику требовалось решение с прозрачной сметой под разные типы остекления и отделки. Вместо подключения тяжелого внешнего сервиса команда FastUp интегрировала нативный опросник на чистом JS прямо в модульную структуру страницы.

Решение работает без внешних зависимостей, сохраняет высокую скорость мобильного отклика сайта и отправляет детализацию выбранных клиентом опций напрямую в рабочий чат мастера.

Сколько стоит разработка сайта со встроенным интерактивным квизом-калькулятором?

Стоимость разработки сайта на чистом коде: посадочный сайт (лендинг) с интерактивным квизом или калькулятором — от 1 100 BYN (срок от 2 дней), многостраничный корпоративный сайт — от 1 800 BYN. Точечная интеграция калькулятора в существующую чистую тему — от 10 BYN за правку.

Мы собираем интерактивные модули на нативном JavaScript без скрытых ежемесячных платежей за конструкторы. Ознакомьтесь с условиями на странице Разработка сайтов на WordPress в Беларуси или изучите технический Кейс kubdecor.by: разработка мультилендинга и чистый код.