A user opens a form with 15 fields and closes it after 10 seconds — conversion drops. A multi-step calculator splits the survey into screens of 2–3 questions with a progress bar. We implement such solutions on 1C-Bitrix: we design scenarios with branching, implement AJAX calculation, and integrate with CRM. The result — lead conversion grows by 30–50% compared to single-page forms. According to Nielsen Norman Group, multi-step interfaces increase usability by 30%. In our A/B tests, a multi-step form converts 1.5 times better than a regular one for the same target audience.
Problems we solve
- High abandonment on long forms. When a user sees 15 fields, they leave. Our calculator shows 1–3 questions per step — cognitive load decreases, and completion rate increases. Budget savings on lead generation reach 40%.
- Complex scenarios with skips. Services depend on choices: if a client selects "delivery", we hide the "self-pickup" step. We implement conditional transitions via JSON configuration. ROI — less than 3 months.
- Data loss. If you close the tab — progress vanishes. We embed saving in localStorage with automatic restoration within 24 hours.
How to implement step branching?
Calculator steps aren't just pages. They're a graph: some steps are skipped depending on previous answers. For example, if on step 2 the user selects "individual" — step 3 with company details is skipped.
Storage of step configuration — JSON or HL-block CalculatorSteps:
{
"steps": [
{
"id": "service_type",
"title": "What are you interested in?",
"type": "single_choice",
"options": [
{ "value": "moving", "label": "Moving" },
{ "value": "storage", "label": "Storage" },
{ "value": "both", "label": "Moving + Storage" }
]
},
{
"id": "area",
"title": "Room area",
"type": "range_slider",
"min": 20, "max": 500, "step": 10, "default": 60,
"unit": "m²",
"condition": { "field": "service_type", "operator": "in", "value": ["moving", "both"] }
},
{
"id": "contacts",
"title": "Where to send the estimate?",
"type": "contact_form",
"fields": ["name", "phone", "email"]
}
]
}
Frontend: managing steps with 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 = `Step ${this.currentStepIndex + 1} of ${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);
}
}
Why does a multi-step calculator increase conversion?
According to A/B tests, multi-step forms convert on average 30–50% better than single-page alternatives. The reason is psychological: each step is small, and it's harder to quit halfway through than to abandon one big form. The progress bar motivates completion, and branching makes the scenario personalized. For the company "Pereezd Servis", we implemented an 8-step calculator with branching on service type — conversion increased from 2.5% to 5.8% in one month.
Server-side calculation: from answers to results
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('Invalid data'));
return [];
}
$required = ['service_type', 'area'];
foreach ($required as $field) {
if (!isset($answers[$field])) {
$this->addError(new \Bitrix\Main\Error("Field not filled: {$field}"));
return [];
}
}
$calcResult = \MyProject\Services\MovingCalculator::calculate($answers);
$leadId = \MyProject\Services\CrmService::createLeadFromCalculator(
$answers['name'] ?? 'Not specified',
$answers['phone'] ?? '',
$answers,
$calcResult
);
return [
'result' => $calcResult,
'lead_id' => $leadId,
];
}
}
Progress saving and analytics
Auto-saving to localStorage with staleness protection:
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();
}
Every step transition is recorded in analytics — the funnel shows where users drop off. If 70% quit at step 3 — it's too complex or irrelevant.
Process and timelines
- Requirements analysis — identify logic and branching conditions.
- Scenario design — draw a graph of steps with transitions.
- Layout and frontend — create responsive templates for each question type.
- Backend and calculation — write PHP controllers with validation and integration.
- Integration — connect CRM (Bitrix24, amoCRM), 1C, payment gateways.
- Testing — verify all branches and calculation correctness.
- Deployment and documentation — deploy to server, write instructions.
| Calculator type | Timeline |
|---|---|
| Linear, 3–5 steps | 1–2 weeks |
| With branching and AJAX | 3–5 weeks |
| Complex configurator (10+ steps) | 6–10 weeks |
Comparison of multi-step and regular form
| Criterion | Regular form | Multi-step calculator |
|---|---|---|
| Fields per screen | 10–15 | 2–3 |
| Progress bar | No | Yes |
| Branching | No | Yes |
| Conversion | Baseline | +30–50% |
What's included
- Business logic analysis and step graph creation
- Design and responsive layout for all states
- Backend on PHP (Bitrix ORM, components 2.0)
- CRM integration (Bitrix24, amoCRM) and 1C via CommerceML
- Payment system integration (YooKassa, Sber) and delivery services (CDEK, Russian Post)
- Progress saving in localStorage
- Analytics (Yandex.Metrica, Google Analytics)
- Testing of all scenarios and branches
- Documentation and staff training
- 1 month warranty support
Why work with us
Over 10 years of development experience on 1C-Bitrix, more than 300 successful projects. Certified specialists. Result guarantee — we fix conversion metrics in the contract. ROI on a multi-step calculator often less than 3 months due to conversion growth.
A multi-step calculator is the most effective format for complex services. It reduces cognitive load, increases engagement, and gives marketers data about each decision stage — what exactly prevents the user from reaching a lead.
Order a custom multi-step calculator development — get conversion up to 50% higher than regular forms. Leave a request for an estimate. Contact us to discuss details and get a personalized timeline and cost. Multi-step calculator turnkey with conversion growth guarantee.







