Разработка квиз-формы на 1С-Битрикс под ключ

Представьте: на сайте висит обычная форма обратной связи — конверсия 2–3%. Вы вкладываете в трафик, но лиды не растут. Квиз-форма меняет механику: пользователь отвечает на 3–5 вопросов, вкладывает время и с большей вероятностью оставляет контакт, чтобы получить результат. На 1С-Битрикс мы реализуем такие опросники с нуля — от прототипа до интеграции с CRM и аналитикой.

Почему квиз-форма лучше обычной формы?

Квиз вовлекает пользователя: каждый ответ подогревает интерес к финальному результату. По нашим данным, конверсия квизов выше в 2–5 раз по сравнению с плоской формой. Кроме того, квиз собирает качественную сегментацию аудитории — можно сразу определить потребности клиента и передать в CRM правильный тег.

Как устроена архитектура квиза?

Квиз — последовательность шагов. Каждый шаг — вопрос с одним или несколькими вариантами ответа. Данные структурированы в инфоблоке или HL-блоке:

Инфоблок quizzes — квизы (один элемент = один квиз):

HL-блок b_hl_quiz_questions — вопросы:

class QuizQuestionTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_quiz_questions'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new IntegerField('QUIZ_ID'), new IntegerField('SORT'), new StringField('TEXT'), // Текст вопроса new StringField('TYPE'), // single | multiple | image_choice new TextField('OPTIONS_JSON'), // JSON: [{id, text, image?, weight?}] new BooleanField('IS_REQUIRED', ['values' => [false, true]]), new StringField('HINT'), // Подсказка к вопросу (опционально) ]; } } 

PHP-компонент квиза

// /local/components/local/quiz/class.php namespace Local\Quiz; class QuizComponent extends \CBitrixComponent { public function executeComponent(): void { $quizId = (int)$this->arParams['QUIZ_ID']; // Загрузить квиз и вопросы $quiz = \CIBlockElement::GetByID($quizId)->GetNext(); $questions = QuizQuestionTable::getList([ 'filter' => ['QUIZ_ID' => $quizId], 'order' => ['SORT' => 'ASC'], ])->fetchAll(); foreach ($questions as &$q) { $q['OPTIONS'] = json_decode($q['OPTIONS_JSON'], true) ?? []; } $this->arResult = [ 'QUIZ' => $quiz, 'QUESTIONS' => $questions, 'TOTAL' => count($questions), ]; $this->includeComponentTemplate(); } } 

Фронтенд: состояние и навигация

Квиз — SPA-подобный UI на одной странице. Состояние хранится в JS-объекте:

const quizState = { currentStep: 0, // Текущий вопрос (0-indexed) answers: {}, // {questionId: [selectedOptionIds]} contactData: null, // Данные из финальной формы startTime: Date.now(), }; function goToStep(step) { document.querySelectorAll('.quiz-step').forEach(el => el.classList.remove('active')); document.querySelector(`.quiz-step[data-step="${step}"]`)?.classList.add('active'); quizState.currentStep = step; updateProgressBar(); } function selectOption(questionId, optionId, isMultiple) { if (!quizState.answers[questionId]) { quizState.answers[questionId] = []; } if (isMultiple) { const idx = quizState.answers[questionId].indexOf(optionId); if (idx === -1) { quizState.answers[questionId].push(optionId); } else { quizState.answers[questionId].splice(idx, 1); } } else { quizState.answers[questionId] = [optionId]; // Автоматически переходим к следующему вопросу setTimeout(() => nextStep(), 300); } } function updateProgressBar() { const total = parseInt(document.getElementById('quiz-total').value); const progress = ((quizState.currentStep) / total) * 100; document.getElementById('quiz-progress-fill').style.width = progress + '%'; } 

Финальная форма и отправка

После последнего вопроса показываем форму с контактными данными. Отправка — AJAX:

async function submitQuiz(formData) { const payload = { quiz_id: document.getElementById('quiz-id').value, answers: quizState.answers, name: formData.get('name'), phone: formData.get('phone'), email: formData.get('email'), time_spent: Math.round((Date.now() - quizState.startTime) / 1000), sessid: BX.bitrix_sessid(), }; const response = await fetch('/local/ajax/quiz_submit.php', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload), }); const result = await response.json(); if (result.success) { goToStep('result'); // Показать страницу результата } } 

Обработчик на сервере

// /local/ajax/quiz_submit.php $data = json_decode(file_get_contents('php://input'), true); $quizId = (int)($data['quiz_id'] ?? 0); $name = htmlspecialchars($data['name'] ?? ''); $phone = htmlspecialchars($data['phone'] ?? ''); // Сохранить ответы в HL-блок QuizResponseTable::add([ 'QUIZ_ID' => $quizId, 'USER_IP' => $_SERVER['REMOTE_ADDR'], 'ANSWERS' => json_encode($data['answers']), 'TIME_SPENT' => (int)($data['time_spent'] ?? 0), 'NAME' => $name, 'PHONE' => $phone, 'CREATED_AT' => new \Bitrix\Main\Type\DateTime(), ]); // Создать лид в CRM if (\Bitrix\Main\Loader::includeModule('crm')) { $quiz = \CIBlockElement::GetByID($quizId)->GetNext(); $lead = new \CCrmLead(false); $lead->Add([ 'TITLE' => 'Квиз: ' . $quiz['NAME'] . ' — ' . $name, 'NAME' => $name, 'PHONE' => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']], 'SOURCE_ID' => 'WEB', 'SOURCE_DESCRIPTION' => 'Квиз: ' . $quiz['NAME'], 'COMMENTS' => 'Ответы: ' . json_encode($data['answers'], JSON_UNESCAPED_UNICODE), ]); } echo json_encode(['success' => true]); 

Безопасность и валидация данных

При разработке квиза критична защита от спама и атак. Применяем CSRF-токены через BX.bitrix_sessid(), валидацию номера телефона (проверка на корректный формат), rate-limiting (максимум 5 отправок в минуту с одного IP). Email-поле проверяется через filter_var(). Все текстовые поля санитизируются функцией htmlspecialchars() перед сохранением в базу. Ответы хранятся в JSON-формате с проверкой на соответствие списку допустимых вариантов — это предотвращает инъекции. Результаты квиза логируются (IP, время, ответы) для анализа и обнаружения аномалий. При необходимости можно добавить двухфакторную проверку по SMS перед финальной отправкой.

Варианты использования квизов в B2B и B2C

Квизы эффективны в разных сценариях. В B2B: квиз-оценка (например, «Оцените уровень цифровизации вашей компании в 5 вопросах») выявляет потребность, собирает квалифицированные лиды. В B2C: выбор товара через квиз (цвет, размер, цена) замечает неопределённых покупателей. В консультировании: диагностический квиз определяет уровень знаний потенциального клиента и предлагает подходящую услугу. На практике квизы увеличивают среднюю стоимость заявки на 20–40%, так как клиенты уже самосегментировались по интересам и потребностям.

Аналитика и оптимизация

HL-блок b_hl_quiz_stats хранит агрегированную статистику:

• Сколько пользователей начали квиз.
• На каком шаге бросают (позволяет улучшить слабые вопросы).
• Конверсия: начали → завершили → оставили контакт.
• Среднее время на вопрос (выявляет непонятные формулировки).
• Распределение ответов (какие варианты выбирают чаще).

// Зафиксировать начало квиза QuizStatsTable::add([ 'QUIZ_ID' => $quizId, 'SESSION_ID' => session_id(), 'STEP' => 0, 'EVENT' => 'start', 'CREATED_AT' => new \Bitrix\Main\Type\DateTime(), ]); 

Что входит в разработку квиза (deliverables)

• Прототипирование логики вопросов и ветвлений, определение flow пользователя.
• Разработка кастомного компонента с адаптивным шаблоном для мобильных и десктопных устройств.
• Настройка хранения данных (инфоблоки/HL-блоки) с правильной структурой и индексами.
• Интеграция с CRM Битрикс24 (создание лида с тегом, привязка к проекту или воронке).
• Установка аналитики (счётчики завершений, точки отсева, конверсия по шагам).
• Защита от спама (CSRF-токены, rate-limiting, валидация полей).
• Документация и обучение редакторов по управлению квизами.

Сроки разработки

Почему выбирают нас

Мы занимаемся 1С-Битрикс разработкой более 5 лет. В нашем портфолио — десятки квизов для разных ниш: от недвижимости до онлайн-курсов. Гарантируем стабильную работу под высокой нагрузкой и прозрачную поддержку после запуска.

Готовы обсудить ваш проект? Напишите нам — мы оценим задачу и предложим оптимальное решение с учётом ваших целей и бюджета. Закажите разработку квиза и получите консультацию бесплатно.