Developing a step-by-step application form for 1C-Bitrix

Step-by-Step Application Form Development on 1C-Bitrix

A long form on a single page kills conversion. When a user sees 10+ fields at once — they close the tab. Breaking it into steps solves this: 2–4 fields per screen, it feels simpler, progress is visible. A step-by-step form on 1C-Bitrix is a custom component with client-side navigation between steps, validation at each step, and a final server submission.

Component Architecture

The form stores its entire state on the client side (JS object) and sends the data in a single request after the last step. The server receives the complete dataset.

Step configuration is defined in the component parameters (PHP array) or in the admin interface via an infoblock.

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

class MultistepFormComponent extends \CBitrixComponent
{
    public function executeComponent(): void
    {
        // Step configuration
        $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'  => 'Application details',
                'fields' => [
                    ['name' => 'service', 'label' => 'Service', 'type' => 'select', 'options' => ['Consultation', 'Audit', 'Development']],
                    ['name' => 'budget',  'label' => 'Budget',  'type' => 'radio',  'options' => ['under 100k', '100–500k', 'over 500k']],
                ],
            ],
            [
                'id'     => 'step_message',
                'title'  => 'Comment',
                'fields' => [
                    ['name' => 'message', 'label' => 'Describe your 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 = 'Submit';
            }
        } 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 will 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 application — ' . $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 Saving

For long forms (5+ steps) — save filled data to localStorage to avoid losing it on accidental tab close:

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

// On initialization — 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);
}

Development Timeline