Розробка інтерактивних форм на 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: Bitrix 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 робочих днів.