Разработка интерактивных форм на Vue.js для 1С-Битрикс

Разработка интерактивных форм на Vue.js для 1С-Битрикс

Стандартный компонент bitrix:main.feedback справляется с простыми формами обратной связи — имя, телефон, кнопка. Но как только нужна динамическая форма с зависимыми полями, многошаговым сценарием, мгновенной валидацией или кастомными UI-элементами — стандартного компонента перестаёт хватать. PHP-шаблон с перезагрузкой страницы здесь уже не подходит по UX.

Vue.js в связке с Битриксом решает эту задачу: форма работает как SPA-компонент поверх PHP-шаблона, взаимодействуя с сервером через AJAX.

Архитектура Vue-формы в Битриксе

Vue.js-форма на Битрикс-сайте строится по следующей схеме:

1. Точка монтирования — <div id="vue-form-app"></div> в шаблоне компонента Битрикса.
2. Точка входа JS — Vue-приложение монтируется в эту точку. Данные из PHP (настройки компонента, значения полей, CSRF-токен) передаются через data-* атрибуты или через глобальный JS-объект, генерируемый PHP.
3. API-эндпоинт — обработчик формы реализован как PHP-скрипт или как REST-обработчик Битрикса (\Bitrix\Main\Engine\Controller). Принимает данные формы, валидирует на сервере, возвращает JSON.
4. CSRF-защита — bitrix_sessid() передаётся в форму и проверяется на сервере через check_bitrix_sessid().

Передача данных из PHP в Vue-компонент:

// В шаблоне компонента Битрикса
$APPLICATION->AddHeadScript('/local/js/dist/contact-form.js');
?>
<div id="contact-form-app"
     data-form-action="<?= htmlspecialchars($arResult['FORM_ACTION']) ?>"
     data-sessid="<?= bitrix_sessid() ?>"
     data-departments='<?= json_encode($arResult['DEPARTMENTS']) ?>'
></div>

// Vue-компонент читает данные при монтировании
const appEl = document.getElementById('contact-form-app');
const app = createApp(ContactForm, {
    formAction: appEl.dataset.formAction,
    sessid: appEl.dataset.sessid,
    departments: JSON.parse(appEl.dataset.departments),
});
app.mount(appEl);

Когда Vue-форма оправдана

Vue для формы — это затраты на разработку выше, чем стандартный подход. Оправдано в следующих случаях:

Зависимые поля. «Выберите регион → выберите город → выберите пункт самовывоза» — три зависимых поля, загружающих данные динамически. На PHP с перезагрузкой страницы — плохой UX.

Многошаговая форма (wizard). Заявка на кредит, расчёт стоимости услуги, конфигуратор продукта — несколько шагов с сохранением данных между ними. Vue здесь естественен: шаги как компоненты, данные в реактивном хранилище.

Мгновенная валидация. Проверка ИНН на уникальность, доступности email, корректности серийного номера — валидация с запросом к серверу прямо при вводе, без ожидания сабмита.

Калькулятор. Форма-расчётчик, где результат меняется реактивно при изменении параметров — стоимость доставки, стоимость материалов, срок кредита.

Стек и интеграция со сборкой

Для Битрикс-проектов оптимальный стек Vue-форм:

• Vue 3 (Composition API) + vite для сборки.
• Vee-Validate или кастомная валидация — проверка полей до отправки.
• Axios или нативный fetch — запросы к бэкенду.
• Сборка в один bundle.js + bundle.css — подключение через $APPLICATION->AddHeadScript() в шаблоне Битрикса.

Интеграция с системой сборки: для Битрикс-проектов Vue-компоненты форм обычно собираются отдельно от основного JS-шаблона через Vite с build.lib конфигурацией — независимый бандл, который не конфликтует с jQuery и другими скриптами страницы.

Серверная часть: обработчик формы

Обработчик формы в Битриксе реализуется двумя способами:

Через \Bitrix\Main\Engine\Controller (предпочтительный способ для D7-проектов):

class ContactFormController extends \Bitrix\Main\Engine\Controller {
    public function submitAction(array $data): array {
        if (!\check_bitrix_sessid()) {
            return ['error' => 'Ошибка безопасности'];
        }
        // валидация и сохранение
        return ['success' => true, 'message' => 'Заявка отправлена'];
    }
}

URL-маршрут настраивается через routes.php или через ajax параметр компонента.

Через отдельный AJAX-обработчик — простой PHP-файл в /local/ajax/ с проверкой $_SERVER['HTTP_X_REQUESTED_WITH']. Менее интегрированный способ, но проще для быстрой реализации.

Кейс: многошаговый конфигуратор окна

Клиент — производитель окон ПВХ. Задача: онлайн-конфигуратор, позволяющий пользователю выбрать тип окна, размеры, фурнитуру, цвет и получить предварительный расчёт стоимости прямо на странице.

Исходная версия: PHP-форма с перезагрузкой на каждом шаге. Конверсия — низкая, пользователи уходили после второго шага.

Реализация на Vue 3:

• Шаг 1 — Тип окна: радиокнопки с иллюстрациями. При выборе реактивно меняется превью конфигурации.
• Шаг 2 — Размеры: числовые поля с валидацией диапазонов (мин/макс для каждого типа окна). Подсказки «нестандартный размер» при выходе за пределы типовых.
• Шаг 3 — Опции: зависимые списки: фурнитура и цвет зависят от выбранного профиля. Данные загружаются с сервера при смене профиля.
• Шаг 4 — Контактная форма: телефон, email, способ связи. Отправка данных конфигурации + контактов в CRM Битрикс24 через REST API.

Стоимость рассчитывалась реактивно на клиенте по формуле, параметры которой передавались из PHP при инициализации страницы (цены из инфоблока Битрикса).

Результат: конверсия выросла — пользователи доходили до финального шага значительно чаще, видя предварительную стоимость в реальном времени.

Сроки

Простая Vue-форма с валидацией и AJAX-отправкой — 3–5 дней. Многошаговая форма с зависимыми полями и интеграцией с CRM — 10–20 дней в зависимости от количества шагов, сложности валидации и требований к серверной части.

Стандартные веб-формы Битрикса (bitrix:main.feedback, bitrix:form.result.new) — надёжный, но жёсткий инструмент. Они не поддерживают условную логику: показать поле B только если выбрано значение A в поле C. Не умеют валидировать в реальном времени до отправки. Не могут работать в многошаговом режиме без перезагрузки страницы. Для простых форм это нормально. Для форм с бизнес-логикой — нет.

Vue.js здесь — не дань моде, а решение конкретных задач.

Архитектурные подходы интеграции Vue.js с Битриксом

Интеграция Vue.js в Битрикс-проект возможна несколькими способами:

Встраивание Vue-компонента в шаблон компонента Битрикса. Наиболее распространённый вариант. Создаётся пользовательский шаблон компонента, в котором инициализируется Vue-приложение. Данные для формы (списки значений, настройки) передаются через PHP в JS через json_encode и глобальные переменные или через data-* атрибуты.

// В шаблоне компонента Битрикса:
<div id="vue-form-app" 
     data-regions="<?= htmlspecialchars(json_encode($arResult['REGIONS'])) ?>"
     data-form-action="/local/ajax/form-handler.php">
</div>
<script src="/local/js/vue-form.js"></script>

Инициализация через Bitrix JS API. Битрикс имеет собственный механизм загрузки JS (\Bitrix\Main\Page\Asset::getInstance()->addJs()). Vue-компонент регистрируется как расширение и загружается через этот механизм — это правильнее с точки зрения кеширования и порядка загрузки скриптов.

REST API + Vue SPA. Для полностью отдельных форм (квизы, многошаговые анкеты) — Vue-приложение работает как самостоятельный SPA, обменивается с Битриксом через REST API или кастомные AJAX-обработчики.

Обработка данных формы на стороне сервера

Vue-форма отправляет данные на сервер — кто их принимает?

Вариант 1: AJAX-обработчик через bitrix:main.ajax. Создаём PHP-скрипт, который принимает POST-запрос, валидирует данные и работает с API Битрикса:

// /local/ajax/form-handler.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    // Сохраняем в веб-форму Битрикса:
    $eventFields = ['NAME' => $data['name'], 'EMAIL' => $data['email']];
    CFormResult::Add($formId, $eventFields);
    // или отправляем почтовое событие:
    CEvent::Send('NEW_FORM_REQUEST', 's1', $eventFields);
}

Вариант 2: Битрикс REST API. Для Битрикс24 — стандартный REST. Для коробочного Битрикса — кастомный обработчик или модуль с REST-контроллером (\Bitrix\Main\Engine\Controller).

Реализация условной логики

Главное преимущество Vue-форм — реактивная условная логика:

// Vue 3 Composition API
const formData = reactive({
  serviceType: '',
  budget: '',
  region: ''
})

const showBudgetField = computed(() => 
  ['premium', 'enterprise'].includes(formData.serviceType)
)

const availableRegions = computed(() => 
  formData.serviceType === 'local' ? localRegions : allRegions
)

Такая логика в стандартном PHP-шаблоне Битрикса нереализуема без значительных усилий. Vue делает это декларативно.

Валидация и UX

Для валидации используем vee-validate или написанную вручную валидацию с Composition API. Принципы:

• Inline-валидация — ошибка показывается сразу при потере фокуса полем, не нужно ждать отправки.
• Серверная валидация — после отправки сервер может вернуть ошибки, которые отображаются в нужных полях.
• Disabled-состояние кнопки — пока форма невалидна, кнопка отправки заблокирована визуально.

Кейс: многошаговый квиз для подбора услуги

Клиент — веб-студия. На лендинге нужен квиз: 5 шагов с вопросами, каждый следующий шаг зависит от ответа на предыдущий. В конце — персонализированный результат и форма контактных данных. Итог — заявка в CRM Битрикс24 через REST.

Стандартными средствами Битрикса это не реализовать. Сторонние SaaS-квизы — не вариант (нужна интеграция с CRM и кастомный дизайн).

Решение: Vue 3 SPA, встроенный в шаблон лендинга.

Структура компонента:

• QuizStep.vue — переиспользуемый компонент шага с разными типами вопросов (одиночный выбор, множественный, слайдер)
• QuizResult.vue — персонализированный результат на основе ответов
• ContactForm.vue — финальная форма с валидацией

Логика маршрутизации шагов — computed property на основе ответов. Данные квиза сохранялись в localStorage — пользователь мог обновить страницу и продолжить с того же шага.

После заполнения — POST в REST API Битрикс24 с созданием лида (crm.lead.add) с полями из ответов квиза. Ответственный назначался автоматически через бизнес-процесс.

Конверсия квиза (начал → дошёл до формы контактов) — 67%. Конверсия простой формы на той же странице до внедрения — 12%.

Сборка и деплой

Vue-компоненты для Битрикс-проектов собираются через Vite или Webpack. Собранный бандл (form.js, form.css) размещается в /local/js/ или /local/css/ и подключается через шаблон или через \Bitrix\Main\Page\Asset.

В vite.config.js — build.lib или build.rollupOptions.output для генерации бандла без разбивки на чанки, если компонент встраивается в страницу Битрикса (не SPA).

Сроки

Разработка одной интерактивной формы с условной логикой и интеграцией с Битриксом (CRM или веб-форма) — 5–10 рабочих дней. Многошаговый квиз с персонализированным результатом и REST-интеграцией — 10–20 рабочих дней.