Представьте: на сайте висит обычная форма обратной связи — конверсия 2–3%. Вы вкладываете в трафик, но лиды не растут. Квиз-форма меняет механику: пользователь отвечает на 3–5 вопросов, вкладывает время и с большей вероятностью оставляет контакт, чтобы получить результат. На 1С-Битрикс мы реализуем такие опросники с нуля — от прототипа до интеграции с CRM и аналитикой.
Почему квиз-форма лучше обычной формы?
Квиз вовлекает пользователя: каждый ответ подогревает интерес к финальному результату. По нашим данным, конверсия квизов выше в 2–5 раз по сравнению с плоской формой. Кроме того, квиз собирает качественную сегментацию аудитории — можно сразу определить потребности клиента и передать в CRM правильный тег.
Как устроена архитектура квиза?
Квиз — последовательность шагов. Каждый шаг — вопрос с одним или несколькими вариантами ответа. Данные структурированы в инфоблоке или HL-блоке:
Инфоблок quizzes — квизы (один элемент = один квиз):
| Свойство | Код | Тип |
|---|---|---|
| Заголовок результата | RESULT_TITLE |
Строка |
| Текст CTA на форме | CTA_TEXT |
Строка |
| Получатель заявок | NOTIFY_EMAIL |
Строка |
| Тег лида в CRM | CRM_TAG |
Строка |
| Изображение обложки | COVER_IMAGE |
Файл |
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, валидация полей).
- Документация и обучение редакторов по управлению квизами.
Сроки разработки
| Вариант | Состав | Срок |
|---|---|---|
| Один квиз (статичный) | Компонент, вопросы в коде, лид в CRM | 3–5 дней |
| Квиз с управлением | Инфоблок/HL-блок, управление вопросами через админку | 5–8 дней |
| Полноценный конструктор | Несколько квизов, ветвление, аналитика, A/B | 12–18 дней |
Почему выбирают нас
Мы занимаемся 1С-Битрикс разработкой более 5 лет. В нашем портфолио — десятки квизов для разных ниш: от недвижимости до онлайн-курсов. Гарантируем стабильную работу под высокой нагрузкой и прозрачную поддержку после запуска.
Готовы обсудить ваш проект? Напишите нам — мы оценим задачу и предложим оптимальное решение с учётом ваших целей и бюджета. Закажите разработку квиза и получите консультацию бесплатно.