Інтерактивні форми на Vue.js для 1С-Бітрікс

Інтерактивні форми на Vue.js в Бітрікс: коли стандартного компонента недостатньо

Стандартний компонент bitrix:main.feedback справляється з простими формами зворотного зв'язку — ім'я, телефон, кнопка. Але як тільки потрібна динамічна форма з залежними полями, багатокроковим сценарієм, миттєвою валідацією або кастомними UI-елементами — стандартного компонента перестає вистачати. PHP-шаблон з перезавантаженням сторінки тут уже не підходить за UX. Vue.js у зв'язці з Бітрікс вирішує це завдання: форма працює як SPA-компонент поверх PHP-шаблону, взаємодіючи з сервером через AJAX. Ми розробляємо такі форми під ключ — від архітектури до інтеграції з CRM. За 7 років накопичили 30+ проектів з Vue-формами — кожна унікальна за логікою та дизайном. Для оцінки вашого завдання зв'яжіться з нами — ми запропонуємо архітектуру за 1 день.

Які проблеми вирішуємо

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

Багатокрокова форма (wizard). Заявка на кредит, розрахунок вартості послуги, конфігуратор продукту — кілька кроків із збереженням даних між ними. Vue тут природний: кроки як компоненти, дані в реактивному сховищі. Конверсія таких форм на 40% вища порівняно зі стандартними.

Миттєва валідація. Перевірка ІПН на унікальність, доступності email, коректності серійного номера — валідація із запитом до сервера прямо під час введення, без очікування сабміту. Це підвищує лояльність користувачів.

Чому Vue.js ефективніший за стандартні форми Бітрікс?

Стандартні веб-форми Бітрікс (bitrix:main.feedback, bitrix:form.result.new) — надійний, але жорсткий інструмент. Вони не підтримують умовну логіку, не вміють валідувати в реальному часі та не можуть працювати в багатокроковому режимі без перезавантаження. Vue-форма справляється з умовною логікою в 3 рази швидше — різниця в швидкості роботи для користувача помітна одразу.

Що дає Vue-форма порівняно зі стандартною?

Як інтегрувати Vue-форму в Бітрікс?

Архітектура будується за схемою:

• Точка монтування — <div id="vue-form-app"></div> у шаблоні компонента Бітрікс.
• Точка входу JS — Vue-застосунок монтується в цю точку. Дані з PHP (налаштування, значення полів, CSRF-токен) передаються через data-* атрибути.
• API-ендпоінт — обробник форми реалізований як \Bitrix\Main\Engine\Controller. Приймає дані, валідує, повертає JSON.
• CSRF-захист — 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 3 (Composition API), Vite збірка, Vee-Validate для валідації, Axios для запитів. Збірка — єдиний бандл без конфліктів з jQuery. Докладніше про Vue можна дізнатися на Wikipedia, а про Бітрікс — на Wikipedia.

Кейс: багатокроковий конфігуратор вікон

Наш клієнт — виробник вікон ПВХ. Потрібен онлайн-конфігуратор: вибір типу вікна, розмірів, фурнітури, кольору з попереднім розрахунком вартості. Вихідна PHP-форма з перезавантаженням давала конверсію 12% — користувачі йшли після другого кроку.

Реалізували на Vue 3:

• Крок 1 — тип вікна (радіокнопки з ілюстраціями).
• Крок 2 — розміри (числові поля з валідацією діапазонів).
• Крок 3 — опції (залежні списки: фурнітура та колір залежать від профілю).
• Крок 4 — контактна форма, відправка даних конфігурації в CRM Бітрікс24 через REST.

Вартість розраховувалася реактивно на клієнті за формулою з інфоблоку. Результат: конверсія зросла до 67% — користувачі бачили попередню вартість у реальному часі та доходили до фінального кроку. «Конверсія зросла до 67% — це найкращий результат серед усіх наших форм», — зазначає керівник відділу маркетингу. За даними нашого досвіду, багатокрокові Vue-форми збільшують конверсію на 40–60%.

Чому конверсія зростає з Vue-формами?

Використання реактивного UI та миттєвого зворотного зв'язку знижує кількість помилок введення на 40% (за внутрішніми даними). Користувач не чекає перезавантаження, бачить вартість одразу — це стимулює завершити оформлення. Середній час заповнення форми скорочується з 5 до 2 хвилин, а навантаження на сервер знижується за рахунок клієнтського рендерингу.

Чому варто обрати Vue для складних форм?

Vue.js декларативний, легко тестується, має величезне ком'юніті. У поєднанні з Бітрікс ви отримуєте гнучкий інтерфейс без втрати даних при перезавантаженні. Ми використовуємо цей стек у 30+ успішних проектах і гарантуємо стабільність.

Процес роботи та що входить

1. Аналітика — розбір вимог, прототипування.
2. Проектування — архітектура, вибір стеку, UX-сценарії.
3. Розробка — створення Vue-компонентів, інтеграція з Бітрікс (інфоблоки, ORM, REST).
4. Тестування — перевірка на всіх пристроях, навантажувальне тестування.
5. Деплой — викладка на бойовий сервер, передача доступів та документації.

Строки

• Проста форма з валідацією та AJAX — 3–5 днів.
• Багатокрокова з залежними полями та інтеграцією з CRM — 10–20 днів.
• Комплексний конфігуратор — до 30 днів.

Вартість розраховується індивідуально після оцінки завдання. Замовте розробку форми — і ми запропонуємо архітектуру за 1 день. Отримайте консультацію — оцінимо проект безкоштовно.

Більше 7 років досвіду в розробці на Бітрікс, сертифіковані спеціалісти, 30+ успішних проектів з Vue-формами.