Разработка пошаговой формы заявки на 1С-Битрикс

Разработка пошаговой формы заявки на 1С-Битрикс

Длинная форма на одной странице убивает конверсию. Когда пользователь видит 10+ полей сразу — закрывает вкладку. Разбивка на шаги решает это: на каждом экране 2–4 поля, кажется проще, прогресс виден. Пошаговая форма на 1С-Битрикс — это кастомный компонент с клиентской навигацией между шагами, валидацией на каждом шаге и финальной отправкой на сервер.

Архитектура компонента

Форма хранит состояние целиком на клиенте (JS-объект), отправляет данные единым запросом после последнего шага. Сервер получает полный набор данных.

Конфигурация шагов — в параметрах компонента (PHP-массив) или в административном интерфейсе через инфоблок.

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

class MultistepFormComponent extends \CBitrixComponent
{
    public function executeComponent(): void
    {
        // Конфигурация шагов
        $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'  => 'Ваши данные',
                'fields' => [
                    ['name' => 'name',  'label' => 'Имя',      'type' => 'text',  'required' => true],
                    ['name' => 'phone', 'label' => 'Телефон',   'type' => 'tel',   'required' => true],
                    ['name' => 'email', 'label' => 'Email',     'type' => 'email', 'required' => false],
                ],
            ],
            [
                'id'     => 'step_details',
                'title'  => 'Детали заявки',
                'fields' => [
                    ['name' => 'service', 'label' => 'Услуга',  'type' => 'select', 'options' => ['Консультация', 'Аудит', 'Разработка']],
                    ['name' => 'budget',  'label' => 'Бюджет',  'type' => 'radio',  'options' => ['до 100к', '100–500к', 'от 500к']],
                ],
            ],
            [
                'id'     => 'step_message',
                'title'  => 'Комментарий',
                'fields' => [
                    ['name' => 'message', 'label' => 'Опишите задачу', 'type' => 'textarea', 'required' => false],
                ],
            ],
        ];
    }
}

Клиентская логика

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 = 'Это поле обязательно';
            } else {
                field.classList.remove('error');
                if (error) error.textContent = '';
            }
        });

        // Валидация телефона
        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 = `Шаг ${this.current + 1} из ${this.steps.length}`;
    }

    async submit() {
        this.collectCurrentStepData();

        const submitBtn = this.form.querySelector('[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = 'Отправляем...';

        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 || 'Ошибка отправки');
                submitBtn.disabled = false;
                submitBtn.textContent = 'Отправить';
            }
        } catch (e) {
            this.showError('Ошибка соединения. Попробуйте позже.');
            submitBtn.disabled = false;
        }
    }

    showSuccessScreen() {
        this.form.innerHTML = `
            <div class="form-success">
                <h3>Спасибо! Мы свяжемся с вами в течение часа.</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));

Серверный обработчик

// /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' => 'Не заполнены обязательные поля']);
    exit;
}

$comments = implode("\n", array_filter([
    $service ? "Услуга: {$service}" : '',
    $budget  ? "Бюджет: {$budget}"  : '',
    $message ? "Комментарий: {$message}" : '',
]));

$lead = new \CCrmLead(false);
$leadId = $lead->Add([
    'TITLE'   => 'Заявка с сайта — ' . $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]);

Сохранение прогресса

Для длинных форм (5+ шагов) — сохранять заполненные данные в localStorage, чтобы не потерять при случайном закрытии:

// После каждого шага
localStorage.setItem('form_progress', JSON.stringify({
    step: this.current,
    data: this.formData,
    savedAt: Date.now(),
}));

// При инициализации — восстановить, если не старше 30 минут
const saved = JSON.parse(localStorage.getItem('form_progress') || 'null');
if (saved && Date.now() - saved.savedAt < 1800000) {
    this.formData = saved.data;
    this.showStep(saved.step);
}

Сроки разработки