Розробка багатокрокового калькулятора на 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% (до 50 000 рублів на місяць).
- Складні сценарії з пропусками. Послуги залежать від вибору: якщо клієнт вказав «доставка», приховуємо крок «самовивіз». Реалізуємо умовні переходи через 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 — він занадто складний або недоречний.
Процес роботи та терміни
- Аналіз вимог — виявляємо логіку та умови розгалужень.
- Проектування сценарію — малюємо граф кроків з переходами.
- Верстка та frontend — створюємо адаптивні шаблони під кожен тип питання.
- Backend та розрахунок — пишемо PHP-контролери з валідацією та інтеграцією.
- Інтеграція — підключаємо CRM (Бітрікс24, amoCRM), 1С, платіжні шлюзи.
- Тестування — перевіряємо всі розгалуження та коректність розрахунку.
- Деплой та документація — розміщуємо на сервері, пишемо інструкцію.
| Тип калькулятора | Терміни |
|---|---|
| Лінійний, 3–5 кроків | 1–2 тижні |
| З розгалуженнями та AJAX | 3–5 тижнів |
| Складний конфігуратор (10+ кроків) | 6–10 тижнів |
Порівняння багатокрокової та звичайної форми
| Критерій | Звичайна форма | Багатокроковий калькулятор |
|---|---|---|
| Кількість полів на екрані | 10–15 | 2–3 |
| Прогрес-бар | Немає | Є |
| Розгалуження | Немає | Так |
| Конверсія | Базова | +30–50% |
Що входить у роботу
- Аналіз бізнес-логіки та створення графа кроків
- Дизайн та адаптивна верстка всіх станів
- Backend на PHP (Bitrix ORM, компоненти 2.0)
- Інтеграція з CRM (Бітрікс24, amoCRM) та 1С через CommerceML
- Підключення платіжних систем (ЮKassa, Сбер) та сервісів доставки (СДЕК, Пошта Росії)
- Збереження прогресу в localStorage
- Аналітика (Яндекс.Метрика, Google Analytics)
- Тестування всіх сценаріїв та розгалужень
- Документація та навчання співробітників
- Гарантійна підтримка 1 місяць
Чому з нами варто працювати
Більше 10 років досвіду розробки на 1С-Бітрікс, понад 300 успішних проектів. Сертифіковані спеціалісти. Гарантія результату — фіксуємо в договорі конверсійні метрики. Окупність інвестицій у багатокроковий калькулятор часто становить менше 3 місяців за рахунок зростання конверсії.
Багатокроковий калькулятор — найефективніший формат для складних послуг. Він знижує когнітивне навантаження, підвищує залученість і дає маркетологу дані про кожен етап прийняття рішення — що саме заважає користувачеві дійти до заявки.
Замовте розробку кастомного багатокрокового калькулятора — отримайте конверсію до 50% вище звичайних форм. Залиште заявку на розрахунок. Зв'яжіться, щоб обговорити деталі та отримати індивідуальний розрахунок термінів і вартості. Багатокроковий калькулятор під ключ з гарантією конверсійного приросту.