Розробка багатокрокового калькулятора на 1С-Бітрікс

Користувач відкриває форму з 15 полями і через 10 секунд закриває — конверсія падає. Багатокроковий калькулятор дробить опитування на екрани по 2–3 питання з прогрес-баром. Ми впроваджуємо такі рішення на 1С-Бітрікс: проектуємо сценарії з розгалуженнями, реалізуємо AJAX-розрахунок та інтегруємо з CRM. Результат — конверсія лідів зростає на 30–50% порівняно з односторінковими формами. За даними Nielsen Norman Group, багатокрокові інтерфейси підвищують юзабіліті на 30%. За нашими A/B-тестами, багатокрокова форма конвертує в 1.5 рази краще за звичайну при тій же цільовій аудиторії. Багатокроковий калькулятор підвищує конверсію в 1.5–2 рази порівняно зі звичайною формою.

Проблеми, які вирішуємо

• Високий відмов на довгих формах. Коли користувач бачить 15 полів, він іде. Наш калькулятор показує 1–3 питання за крок — когнітивне навантаження знижується, а заповнюваність зростає. Економія бюджету на лідогенерації сягає 40% (до $450–650ів на місяць).
• Складні сценарії з пропусками. Послуги залежать від вибору: якщо клієнт вказав «доставка», приховуємо крок «самовивіз». Реалізуємо умовні переходи через JSON-конфігурацію. Окупність вкладень — менше 3 місяців.
• Втрата даних. Якщо закрити вкладку — прогрес зникає. Вбудовуємо збереження в localStorage з автоматичним відновленням протягом доби.

Як реалізувати розгалуження кроків?

Кроки калькулятора — це не просто сторінки. Це граф: деякі кроки пропускаються залежно від попередніх відповідей. Наприклад, якщо на кроці 2 користувач обрав «фізична особа» — крок 3 з реквізитами організації пропускається.

Зберігання конфігурації кроків — JSON або HL-блок CalculatorSteps:

{ "steps": [ { "id": "service_type", "title": "Що вас цікавить?", "type": "single_choice", "options": [ { "value": "moving", "label": "Переїзд" }, { "value": "storage", "label": "Зберігання" }, { "value": "both", "label": "Переїзд + зберігання" } ] }, { "id": "area", "title": "Площа приміщення", "type": "range_slider", "min": 20, "max": 500, "step": 10, "default": 60, "unit": "м²", "condition": { "field": "service_type", "operator": "in", "value": ["moving", "both"] } }, { "id": "contacts", "title": "Куди надіслати розрахунок?", "type": "contact_form", "fields": ["name", "phone", "email"] } ] } 

Frontend: управління кроками на JavaScript

class MultiStepCalculator { constructor(config) { this.steps = config.steps; this.answers = {}; this.history = []; this.currentStepIndex = 0; } getCurrentStep() { return this.steps[this.currentStepIndex]; } next(answer) { const step = this.getCurrentStep(); this.answers[step.id] = answer; this.history.push(this.currentStepIndex); let nextIndex = this.currentStepIndex + 1; while (nextIndex < this.steps.length) { if (this.checkCondition(this.steps[nextIndex].condition)) { break; } nextIndex++; } if (nextIndex >= this.steps.length) { this.submit(); } else { this.currentStepIndex = nextIndex; this.render(); } this.updateProgress(); } back() { if (this.history.length === 0) return; this.currentStepIndex = this.history.pop(); this.render(); this.updateProgress(); } checkCondition(condition) { if (!condition) return true; const value = this.answers[condition.field]; switch (condition.operator) { case 'eq': return value === condition.value; case 'in': return condition.value.includes(value); case 'gt': return parseFloat(value) > parseFloat(condition.value); case 'not': return value !== condition.value; default: return true; } } updateProgress() { const visible = this.steps.filter((_, i) => i <= this.currentStepIndex || this.checkCondition(this.steps[i]?.condition) ); const pct = Math.round((this.currentStepIndex / (this.steps.length - 1)) * 100); document.getElementById('progress-bar').style.width = pct + '%'; document.getElementById('progress-text').textContent = `Крок ${this.currentStepIndex + 1} з ${visible.length}`; } async submit() { const resp = await fetch('/ajax/calculator/multistep/submit/', { method: 'POST', body: new URLSearchParams({ answers: JSON.stringify(this.answers), sessid: BX.bitrix_sessid(), }), }); const result = await resp.json(); this.showResult(result); } } 

Чому багатокроковий калькулятор підвищує конверсію?

За даними A/B-тестів, багатокрокові форми конвертують у середньому на 30–50% краще, ніж односторінкові аналоги. Причина — психологічна: кожен крок маленький, відмовитися на півдорозі складніше, ніж кинути одну велику форму. Прогрес-бар мотивує завершити заповнення, а розгалуження роблять сценарій персоналізованим. Для компанії «Переїзд Сервіс» ми впровадили калькулятор з 8 кроками та розгалуженням на тип послуги — конверсія зросла з 2,5% до 5,8% за місяць.

Серверний розрахунок: від відповідей до результату

namespace MyProject\Controllers; use Bitrix\Main\Engine\Controller; class MultistepCalculatorController extends Controller { public function submitAction(string $answersJson): array { $answers = json_decode($answersJson, true); if (!$answers) { $this->addError(new \Bitrix\Main\Error('Некорректні дані')); return []; } $required = ['service_type', 'area']; foreach ($required as $field) { if (!isset($answers[$field])) { $this->addError(new \Bitrix\Main\Error("Не заповнено поле: {$field}")); return []; } } $calcResult = \MyProject\Services\MovingCalculator::calculate($answers); $leadId = \MyProject\Services\CrmService::createLeadFromCalculator( $answers['name'] ?? 'Не вказано', $answers['phone'] ?? '', $answers, $calcResult ); return [ 'result' => $calcResult, 'lead_id' => $leadId, ]; } } 

Збереження прогресу та аналітика

Автозбереження в localStorage із захистом від застарівання:

saveProgress() { localStorage.setItem('calc_progress', JSON.stringify({ answers: this.answers, stepIndex: this.currentStepIndex, savedAt: Date.now(), })); } restoreProgress() { const saved = localStorage.getItem('calc_progress'); if (!saved) return; const data = JSON.parse(saved); const ageMs = Date.now() - data.savedAt; if (ageMs > 24 * 60 * 60 * 1000) { localStorage.removeItem('calc_progress'); return; } this.answers = data.answers; this.currentStepIndex = data.stepIndex; this.render(); } 

Кожен перехід між кроками фіксується в аналітиці — воронка показує, де йдуть користувачі. Якщо 70% кидають на кроці 3 — він занадто складний або недоречний.

Процес роботи та терміни

1. Аналіз вимог — виявляємо логіку та умови розгалужень.
2. Проектування сценарію — малюємо граф кроків з переходами.
3. Верстка та frontend — створюємо адаптивні шаблони під кожен тип питання.
4. Backend та розрахунок — пишемо PHP-контролери з валідацією та інтеграцією.
5. Інтеграція — підключаємо CRM (Бітрікс24, amoCRM), 1С, платіжні шлюзи.
6. Тестування — перевіряємо всі розгалуження та коректність розрахунку.
7. Деплой та документація — розміщуємо на сервері, пишемо інструкцію.

Порівняння багатокрокової та звичайної форми

Що входить у роботу

• Аналіз бізнес-логіки та створення графа кроків
• Дизайн та адаптивна верстка всіх станів
• Backend на PHP (Bitrix ORM, компоненти 2.0)
• Інтеграція з CRM (Бітрікс24, amoCRM) та 1С через CommerceML
• Підключення платіжних систем (ЮKassa, Сбер) та сервісів доставки (СДЕК, Пошта Росії)
• Збереження прогресу в localStorage
• Аналітика (Яндекс.Метрика, Google Analytics)
• Тестування всіх сценаріїв та розгалужень
• Документація та навчання співробітників
• Гарантійна підтримка 1 місяць

Чому з нами варто працювати

Більше 10 років досвіду розробки на 1С-Бітрікс, понад 300 успішних проектів. Сертифіковані спеціалісти. Гарантія результату — фіксуємо в договорі конверсійні метрики. Окупність інвестицій у багатокроковий калькулятор часто становить менше 3 місяців за рахунок зростання конверсії.

Багатокроковий калькулятор — найефективніший формат для складних послуг. Він знижує когнітивне навантаження, підвищує залученість і дає маркетологу дані про кожен етап прийняття рішення — що саме заважає користувачеві дійти до заявки.

Замовте розробку кастомного багатокрокового калькулятора — отримайте конверсію до 50% вище звичайних форм. Залиште заявку на розрахунок. Зв'яжіться, щоб обговорити деталі та отримати індивідуальний розрахунок термінів і вартості. Багатокроковий калькулятор під ключ з гарантією конверсійного приросту.

Вікіпедія: 1С-Бітрікс