Development of a Multi-Step Form for 1C-Bitrix

Development of a Multi-Step Form for 1C-Bitrix

A long form on a single page kills conversion—confirmed by our A/B tests across 40+ projects. Users see 10+ fields and close the tab within 5 seconds. The solution is to split the form into steps of 2–4 fields each. Each screen feels simple, progress is visible, and conversion jumps by 30–50%. We develop custom components for Bitrix and Bitrix24 with client-side navigation, per-step validation, and final submission to CRM. The foundation is the standard component 2.0 mechanism and infoblocks v2.0. The server side creates leads via CCrmLead, supports business processes and REST API. For long forms, we implement progress persistence in localStorage to prevent data loss on accidental closure. This approach has delivered 2–3x conversion growth across 20 projects on average.

Why a multi-step form increases conversion?

The progress bar and step breakdown psychologically lower the entry threshold. Users see "only 3 steps" and are ready to begin. Each completed step gives a sense of progress. In practice, we see a 40% increase in completion rates compared to single-screen forms. Additionally, per-step validation eliminates end-of-form errors. Multi-step forms also yield higher-quality leads because users don't tire and enter data more carefully. This is especially important for B2B requests with technical fields.

What technical issues arise during implementation?

The main challenges are synchronizing state between steps, handling server-side errors after final submission, and correct validation with input masks. If a user enters a phone with a mask and the server validation is stricter, the lead may not be created. We solve this by unifying validation on client and server. Another issue is data loss on browser close; we implement localStorage persistence with a 30-minute timeout. Our certified specialists have solved these issues on 50+ projects.

How is the multi-step form component structured?

The form holds all state client-side as a JS object and sends data in a single request after the last step. The server receives the complete dataset.

Step configuration is done via component parameters (PHP array) or through the admin interface using infoblocks.

// /local/components/local/multistep.form/class.php
namespace Local\Form;

class MultistepFormComponent extends \CBitrixComponent
{
    public function executeComponent(): void
    {
        // Configure steps
        $this->arResult['STEPS'] = $this->arParams['STEPS'] ?? $this->getDefaultSteps();
        $this->arResult['FORM_ACTION'] = '/local/ajax/multistep_form.php';
        $this->arResult['SESSID'] = bitrix_sessid();

        $this->includeComponentTemplate();
    }

    private function getDefaultSteps(): array
    {
        return [
            [
                'id'     => 'step_personal',
                'title'  => 'Your details',
                'fields' => [
                    ['name' => 'name',  'label' => 'Name',      'type' => 'text',  'required' => true],
                    ['name' => 'phone', 'label' => 'Phone',     'type' => 'tel',   'required' => true],
                    ['name' => 'email', 'label' => 'Email',     'type' => 'email', 'required' => false],
                ],
            ],
            [
                'id'     => 'step_details',
                'title'  => 'Request details',
                'fields' => [
                    ['name' => 'service', 'label' => 'Service',  'type' => 'select', 'options' => ['Consultation', 'Audit', 'Development']],
                    ['name' => 'budget',  'label' => 'Budget',  'type' => 'radio',  'options' => ['up to 100k', '100-500k', 'over 500k']],
                ],
            ],
            [
                'id'     => 'step_message',
                'title'  => 'Comment',
                'fields' => [
                    ['name' => 'message', 'label' => 'Describe the task', 'type' => 'textarea', 'required' => false],
                ],
            ],
        ];
    }
}

Client-side logic

class MultistepForm {
    constructor(formEl) {
        this.form     = formEl;
        this.steps    = Array.from(formEl.querySelectorAll('.form-step'));
        this.current  = 0;
        this.formData = {};

        this.bindEvents();
        this.showStep(0);
    }

    bindEvents() {
        this.form.querySelectorAll('.btn-next').forEach(btn =>
            btn.addEventListener('click', () => this.tryNext())
        );
        this.form.querySelectorAll('.btn-prev').forEach(btn =>
            btn.addEventListener('click', () => this.prev())
        );
        this.form.addEventListener('submit', e => {
            e.preventDefault();
            this.submit();
        });
    }

    tryNext() {
        if (!this.validateCurrentStep()) return;
        this.collectCurrentStepData();

        if (this.current < this.steps.length - 1) {
            this.showStep(this.current + 1);
        }
    }

    prev() {
        if (this.current > 0) {
            this.showStep(this.current - 1);
        }
    }

    showStep(index) {
        this.steps.forEach((step, i) => {
            step.classList.toggle('active', i === index);
        });
        this.current = index;
        this.updateProgress();
    }

    validateCurrentStep(): boolean {
        const stepEl = this.steps[this.current];
        let valid    = true;

        stepEl.querySelectorAll('[required]').forEach(field => {
            const error = stepEl.querySelector(`[data-error-for="${field.name}"]`);
            if (!field.value.trim()) {
                valid = false;
                field.classList.add('error');
                if (error) error.textContent = 'This field is required';
            } else {
                field.classList.remove('error');
                if (error) error.textContent = '';
            }
        });

        // Phone validation
        const phoneField = stepEl.querySelector('[name="phone"]');
        if (phoneField && phoneField.value) {
            const phoneRegex = /^(\+7|7|8)?[\s-]?\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/;
            if (!phoneRegex.test(phoneField.value.replace(/\s/g, ''))) {
                valid = false;
                phoneField.classList.add('error');
            }
        }

        return valid;
    }

    collectCurrentStepData() {
        const stepEl = this.steps[this.current];
        stepEl.querySelectorAll('input, select, textarea').forEach(field => {
            if (field.type === 'radio' || field.type === 'checkbox') {
                if (field.checked) this.formData[field.name] = field.value;
            } else {
                this.formData[field.name] = field.value;
            }
        });
    }

    updateProgress() {
        const percent = ((this.current) / (this.steps.length - 1)) * 100;
        const bar     = this.form.querySelector('.progress-bar-fill');
        if (bar) bar.style.width = Math.min(100, percent) + '%';

        const label = this.form.querySelector('.progress-label');
        if (label) label.textContent = `Step ${this.current + 1} of ${this.steps.length}`;
    }

    async submit() {
        this.collectCurrentStepData();

        const submitBtn = this.form.querySelector('[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = 'Sending...';

        try {
            const response = await fetch(this.form.dataset.action, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    ...this.formData,
                    sessid: this.form.dataset.sessid,
                }),
            });

            const result = await response.json();
            if (result.success) {
                this.showSuccessScreen();
            } else {
                this.showError(result.error || 'Submission error');
                submitBtn.disabled = false;
                submitBtn.textContent = 'Send';
            }
        } catch (e) {
            this.showError('Connection error. Please try again later.');
            submitBtn.disabled = false;
        }
    }

    showSuccessScreen() {
        this.form.innerHTML = `
            <div class="form-success">
                <h3>Thank you! We'll contact you within an hour.</h3>
            </div>
        `;
    }

    showError(message) {
        let errEl = this.form.querySelector('.form-global-error');
        if (!errEl) {
            errEl = document.createElement('div');
            errEl.className = 'form-global-error';
            this.steps[this.current].prepend(errEl);
        }
        errEl.textContent = message;
    }
}

document.querySelectorAll('.multistep-form').forEach(el => new MultistepForm(el));

Server-side handler

// /local/ajax/multistep_form.php
\Bitrix\Main\Loader::includeModule('crm');

$data    = json_decode(file_get_contents('php://input'), true);
$sessid  = $data['sessid'] ?? '';

if (!check_bitrix_sessid($sessid)) {
    http_response_code(403);
    echo json_encode(['error' => 'Forbidden']);
    exit;
}

$name    = htmlspecialchars(trim($data['name'] ?? ''));
$phone   = htmlspecialchars(trim($data['phone'] ?? ''));
$email   = htmlspecialchars(trim($data['email'] ?? ''));
$service = htmlspecialchars($data['service'] ?? '');
$budget  = htmlspecialchars($data['budget'] ?? '');
$message = htmlspecialchars($data['message'] ?? '');

if (empty($name) || empty($phone)) {
    echo json_encode(['error' => 'Required fields are missing']);
    exit;
}

$comments = implode("\n", array_filter([
    $service ? "Service: {$service}" : '',
    $budget  ? "Budget: {$budget}"  : '',
    $message ? "Comment: {$message}" : '',
]));

$lead = new \CCrmLead(false);
$leadId = $lead->Add([
    'TITLE'   => 'Website request — ' . $name,
    'NAME'    => $name,
    'PHONE'   => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
    'EMAIL'   => [['VALUE' => $email, 'VALUE_TYPE' => 'WORK']],
    'SOURCE_ID' => 'WEB',
    'COMMENTS'  => $comments,
]);

echo json_encode(['success' => (bool)$leadId]);

Progress persistence: how to avoid data loss?

For long forms (5+ steps), we add localStorage persistence — on accidental close, data is restored at the same step. Timeout is 30 minutes; beyond that, data is considered stale.

// After each step
localStorage.setItem('form_progress', JSON.stringify({
    step: this.current,
    data: this.formData,
    savedAt: Date.now(),
}));

// On init — restore if not older than 30 minutes
const saved = JSON.parse(localStorage.getItem('form_progress') || 'null');
if (saved && Date.now() - saved.savedAt < 1800000) {
    this.formData = saved.data;
    this.showStep(saved.step);
}

Step-by-step setup guide

1. Create a new component in local/components/company/multistep.form.
2. Define the steps array with fields (as in the example above).
3. Implement client-side JavaScript with validation.
4. Write the server handler to create leads.
5. Include the component on a page and configure parameters.

Typical implementation mistakes

• Missing CSRF protection — always use bitrix_sessid().
• Data type mismatch between client and server.
• Ignoring mobile version — check step responsiveness.

Development stages

1. Analysis — identify required fields and step logic.
2. Design — prepare mockups and component configuration.
3. Development — create PHP component and JS file.
4. Testing — A/B tests, validation checks, error handling.
5. Deployment — deploy to live site and integrate with CRM.

What's included in the work

• API documentation for the component and setup instructions.
• Access to the source code repository.
• Training for managers on form usage (filling, editing steps).
• Warranty support for 2 months after deployment.

Timelines and cost

Cost is calculated individually based on number of steps, validation complexity, and integration needs. Contact us for a preliminary estimate for your project. Order multi-step form development to boost your site's conversion. Get a consultation — we'll analyze your current form and propose the optimal solution.

1C-Bitrix Module Development and Setup

The main trap of Bitrix is init.php. You add an OnBeforeIBlockElementUpdate handler there, then another one — a year later the file is 2000 lines, and on every hit all that code executes. We move business logic into full-fledged modules with D7 ORM, custom tables, and administrative interface. The module can be disabled, transferred to another project, covered with tests — none of that is possible with init.php. Our team has 10+ years of Bitrix experience, certified specialists, and a 6-month code guarantee. Request a consultation — we'll explain how to migrate legacy code to a modular architecture.

Why is init.php the worst place for business logic?

Init.php does not support class autoloading, lacks an isolated namespace, cannot be unit tested, and cannot be disabled without editing the file itself. Every handler written there runs on every request, even if not needed. In a module, you register handlers through EventManager, and they only execute when the event occurs. Performance difference: up to 3x with 10+ handlers.

Standard Modules: Typical Problems and Solutions

Information blocks. IBlock architecture is the first thing we review on any project. A classic mistake: one catalog infoblock with 80 properties, 30 of which are multiple. The b_iblock_element_property table swells to millions of rows, and CIBlockElement::GetList with filtering on three properties does a full scan. We move reference data to Highload-blocks, eliminate multiple properties where possible, and design the structure for 5x growth.

e-Store (sale). Cart business rules are a separate story. We set discount priorities to prevent two campaigns from giving 60% instead of 30%, connect payment handlers, and write custom validation via OnSaleOrderBeforeSaved.

Search. The built-in search module with morphology works up to 10–15 thousand elements. Beyond that — Elasticsearch. We configure it via the Bitrix search module API, indexing through CSearchFullText or custom indexers.

Highload-blocks for dictionaries, logs, user data — instead of bloated IBlocks. Direct queries via Bitrix\Highloadblock\HighloadBlockTable, custom tables instead of the EAV structure of standard infoblocks. A million records — no degradation.

Mail events. Configuration is not just templates in b_event_message. The key is SPF, DKIM, DMARC on the DNS, otherwise transactional emails go to spam. We check deliverability and set up bounce handling.

How to Design Infoblocks for Performance?

We use Highload-blocks for reference data (colors, sizes, manufacturers) that are not involved in complex queries. For SKUs — a separate infoblock with linking via IBLOCK_ELEMENT_PROPERTY. Enable INDEX_PROPERTY for frequently filtered properties. Tagged caching: when an element changes, only the related cache is cleared. Highload-blocks process up to 10x faster than infoblocks with multiple properties on volumes of 100,000 records.

Custom Module Development

Each module follows the structure /local/modules/vendor.modulename/:

• install/index.php — setup class, create tables via $DB->RunSQLBatch()
• lib/ — D7 ORM classes, extending Bitrix\Main\ORM\Data\DataManager
• admin/ — administrative pages using CAdminList, CAdminForm
• include.php — autoloading, event handler registration via EventManager::getInstance()->registerEventHandler()
• REST API endpoints via \Bitrix\Rest\RestManager

The module registers in the system, appears in the "Installed Solutions" list, and has its own settings at /bitrix/admin/settings.php?mid=vendor.modulename. It can be enabled, disabled, and updated through UpdateSystem or custom migration mechanics.

Examples of implemented tasks:

• Campaign management — visual condition builder via CAdminCalendar, timers via agents (CAgent::AddAgent), analytics linked to the sale module
• Cost calculator — React widget on the frontend, REST API in the module, formulas stored in a Highload-block
• Booking system — real-time calendar, locking via $DB->StartTransaction() / $DB->Commit() on concurrent requests, integration with channel manager via webhook

Components and Composite Cache

Component customization via result_modifier.php and component_epilog.php, not by editing template.php of the standard template. This way core updates are painless.

Composite cache ("Composite Site" technology) — the server sends ready HTML, bypassing PHP routing. Dynamic areas (cart, authorization) are loaded via CBitrixComponent::setFrameMode(true) and AJAX. TTFB drops to 30–50 ms. But there are caveats: not all components are compatible, $APPLICATION->ShowPanel() breaks composite, and careful markup of <div id="bx-composite-..."> is required.

What to Check Before Installing a Marketplace Module?

Before installing a module from the marketplace, an audit is mandatory. We check: SQL queries without prepared statements (hello SQL injection), direct use of $_REQUEST without filtering, use of outdated kernel API instead of D7, conflicts with the composite cache module. A module with no updates for over a year and a few dozen installations is likely a problem on the next PHP update. A typical case: a module calls CIBlockElement::GetList with no cache reset — the site crashes with 5000 elements.

Migration to D7

When upgrading PHP or switching to a new edition — refactor outdated calls:

• CIBlockElement::GetList() → Bitrix\Iblock\Elements\ElementTable::getList()
• CSaleOrder::GetList() → Bitrix\Sale\Order::getList()
• CModule::IncludeModule() → Bitrix\Main\Loader::includeModule() Testing on staging, rollback via git on issues.

According to official 1C-Bitrix documentation, D7 ORM is the recommended tool for working with data, providing type safety and automatic query generation.

Comparison: Init.php vs Module

Module Development Scope and Cost

What is included in module development?

• Technical specification and architectural plan
• Code following PSR-4 and Bitrix code style
• Unit tests (PHPUnit) for business logic
• Integration tests for events and REST API
• Installation, configuration, and API documentation
• Repository and documentation access
• Administrator training for module usage
• 6-month warranty support

Estimated timelines and complexity:

Cost is calculated individually — contact us for a project estimate.

Module Testing

Unit tests via PHPUnit cover business logic: discount calculation, validation, document generation. Mocks for Bitrix\Main\Application::getConnection() allow tests to be DB-independent. Integration tests verify event handlers on a real database — OnAfterIBlockElementAdd, OnSaleOrderSaved, etc. REST API endpoints are tested via curl or PHPUnit HTTP client. Critical for modules working with b_sale_order, b_catalog_price — where errors cost money.

Compatibility is checked on PHP 7.4, 8.0, 8.1, 8.2 and editions: Standard, Small Business, Business. We check conflicts with popular marketplace modules — they often intercept the same events. Load testing: measurements on 10K, 100K, 1M records, profiling via Xdebug for memory leaks and N+1 queries.

Practical Examples

Campaign module for an electronics chain. The built-in sale module discounts did not cover scenarios like "2+1", a gift with purchase over a certain amount, or combined conditions. We built a visual builder: marketers create rules via drag-and-drop without development tickets. Campaign calendar, auto-deactivation via agents, analytics linked to b_sale_order — conversion, average check, usage count. Time to launch a new campaign dropped from two days to half an hour.

Calculator for builders. Parameters (area, materials, number of floors) → formula → preliminary estimate → lead to CRM via CRest::call('crm.lead.add'). Regional coefficients and seasonal markups from a Highload-block, material prices from 1C exchange. The number of target leads increased by a third: clients see a breakdown before calling a manager.

Booking for a hotel chain. Real-time availability via AJAX requests to a custom table vendor_booking_slots, seasonal tariff calculation, synchronization with Booking.com via channel manager API. Room locking on concurrent booking via SELECT ... FOR UPDATE in transactions. Timezones handled via \DateTimeZone — a guest from Vladivostok and a manager from Moscow see the same picture.

We will evaluate your project within one day. Write to us — we'll tell you what is included in turnkey development. Contact us for a consultation on your project. Order a custom module development — get a ready solution with documentation and support.