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

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

Чому квіз-форма краща за звичайну в 2–5 разів?

Квіз залучає користувача: кожна відповідь підігріває інтерес до фінального результату. За нашими даними, конверсія квізів вища в 2–5 разів порівняно з плоскою формою. Крім того, квіз збирає якісну сегментацію аудиторії — можна одразу визначити потреби клієнта та передати в CRM правильний тег. За даними Wikipedia, інтерактивні форми підвищують коефіцієнт конверсії в середньому на 40%(джерело). Економія бюджету: вартість залученого ліда з квізу на 30–50% нижча, ніж при звичайній формі.

Як влаштована архітектура квізу?

Квіз — послідовність кроків. Кожен крок — запитання з одним або кількома варіантами відповіді. Дані структуровані в інфоблоці або HL-блоці.

Інфоблок quizzes та HL-блок b_hl_quiz_questions

Інфоблок 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-відправка

Після останнього запитання показуємо форму з контактними даними. Відправка — 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, валідація полів).
• Документація та навчання редакторів по керуванню квізами.

Терміни та вартість

Середня економія на залученні клієнтів після впровадження квізу становить до $5000 на місяць.

Чому обирають нас

Ми займаємося 1С-Бітрікс розробкою більше 5 років. Наші показники: 100+ реалізованих проектів, 50+ квізів для різних ніш (від нерухомості до онлайн-курсів), середня конверсія квізів — 12% (у 4 рази вище за звичайні форми). Гарантуємо стабільну роботу під високим навантаженням та прозору підтримку після запуску.

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