Кастомний конструктор форм 1С-Бітрікс: гнучка CRM-інтеграція

Ефективний спосіб інтеграції форм з CRM

Уявіть: менеджер просить форму зворотного зв'язку. Ви робите, а через тиждень потрібно додати поле «Дата народження» і прив'язати до CRM. І так щоразу. Типовий модуль «Веб-форми» в 1С-Бітрікс морально застарів — інтерфейс не адаптивний, інтеграція із зовнішніми системами через костилі, а змінювати поля без розробника не можна. В результаті на доробки йде до 40% часу команди, а бізнес втрачає ліди через повільні зміни.

Ми будуємо кастомний конструктор форм, де менеджер сам створює поля, налаштовує валідацію, перенаправлення та інтеграцію з Бітрікс24 — все через веб-інтерфейс. Жодних правок у коді після релізу. Це скорочує час впровадження нових форм із тижнів до годин і економить до 30% бюджету на супровід. Наш досвід — 9+ років розробки на Бітрікс та понад 50 проєктів з кастомізації форм. Вартість базового конструктора — від $500, з CRM-інтеграцією — від $800. Ці дані підтверджені внутрішніми проєктами компанії.

Чому стандартні веб-форми не підходять для складних проєктів?

Модуль form у Бітрікс — це як запчастини: є, але не для гонок. Проблеми:

• Інтерфейс не перебудовується під мобільні пристрої.
• Валідація обмежена стандартними правилами — без кастомних regex або залежностей полів.
• Збереження даних — тільки в таблицю модуля, без прямого запису в HL-блоки або сторонні сервіси.
• CRM-інтеграція потребує написання обробника на подію onFormResultAdd — для кожної форми свій.

Кастомний конструктор вирішує все це однією архітектурою: метадані форми → HL-блок → універсальний рендерер → єдиний обробник сабміту з CRM-хуком. У 90% випадків цього достатньо, щоб покрити будь-які бізнес-вимоги без додаткових доробок. Причому наш конструктор працює в 3 рази швидше за стандартний модуль завдяки оптимізованому рендерингу та асинхронним запитам.

Як влаштоване зберігання метаданих у HL-блоках?

Вся конфігурація форми лежить у двох записах HL-блоку. Перша — опис полів (JSON), друга — налаштування поведінки (JSON). Результати сабмітів — в окремій таблиці. Схема перевірена на 50+ проєктах і витримує навантаження до 1000 сабмітів на день. Документація: HL-блоки ORM.

// Таблиця форм b_hl_form_builder class FormBuilderTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_form_builder'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new StringField('TITLE'), new StringField('SLUG'), new TextField('FIELDS_JSON'), new TextField('SETTINGS_JSON'), new BooleanField('IS_ACTIVE', ['values' => [false, true]]), new IntegerField('SUBMISSIONS_COUNT'), new DatetimeField('CREATED_AT'), ]; } } // Таблиця результатів b_hl_form_submissions class FormSubmissionTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_form_submissions'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new IntegerField('FORM_ID'), new TextField('DATA_JSON'), new StringField('USER_IP'), new StringField('USER_AGENT'), new IntegerField('USER_ID'), new IntegerField('CRM_ENTITY_ID'), new DatetimeField('CREATED_AT'), ]; } } 

FIELDS_JSON — масив об'єктів полів. Кожен містить id, тип, мітку, обов'язковість, атрибути на кшталт маски телефону або опцій селекту.

[ { "id": "field_name", "type": "text", "label": "Ваше ім'я", "placeholder": "Іван Іванов", "required": true, "width": "half" }, { "id": "field_phone", "type": "tel", "label": "Телефон", "required": true, "mask": "+7 (000) 000-00-00", "width": "half" }, { "id": "field_service", "type": "select", "label": "Послуга", "options": ["Розробка", "Аудит", "Підтримка"], "required": true }, { "id": "field_message", "type": "textarea", "label": "Повідомлення", "rows": 4, "required": false } ] 

SETTINGS_JSON — керує поведінкою: текст кнопки, повідомлення про успіх, email для сповіщень, налаштування CRM.

{ "submit_text": "Надіслати заявку", "success_message": "Дякуємо! Ми зв'яжемося з вами.", "redirect_url": null, "send_email": "[email protected]", "crm_integration": { "enabled": true, "entity_type": "LEAD", "source_id": "WEB", "responsible_id": 5 }, "notification_template": "FORM_SUBMIT" } 

Як налаштувати інтеграцію з CRM Бітрікс24?

Після сабміту створюється лід через CCrmLead::Add. Поля name, phone, email маппяться за типом поля. Можна налаштувати відповідального та джерело. Нижче — універсальний обробник, який приймає POST-запит від будь-якої форми, перевіряє обов'язкові поля, зберігає дані та створює лід.

// /local/ajax/form_builder_submit.php $data = json_decode(file_get_contents('php://input'), true); $formId = (int)($data['form_id'] ?? 0); $form = FormBuilderTable::getByPrimary($formId)->fetch(); if (!$form || !$form['IS_ACTIVE']) { echo json_encode(['error' => 'Form not found']); exit; } $fields = json_decode($form['FIELDS_JSON'], true) ?? []; $settings = json_decode($form['SETTINGS_JSON'], true) ?? []; // Валідація обов'язкових полів $errors = []; foreach ($fields as $field) { if ($field['required'] && empty($data[$field['id']])) { $errors[$field['id']] = 'Поле є обов\'язковим'; } } if ($errors) { echo json_encode(['errors' => $errors]); exit; } // Зібрати дані для збереження $submissionData = []; foreach ($fields as $field) { $submissionData[$field['label']] = htmlspecialchars($data[$field['id']] ?? ''); } // Зберегти результат $subId = FormSubmissionTable::add([ 'FORM_ID' => $formId, 'DATA_JSON' => json_encode($submissionData, JSON_UNESCAPED_UNICODE), 'USER_IP' => $_SERVER['REMOTE_ADDR'], 'CREATED_AT' => new \Bitrix\Main\Type\DateTime(), ])->getId(); // CRM-інтеграція if ($settings['crm_integration']['enabled'] ?? false) { \Bitrix\Main\Loader::includeModule('crm'); $nameField = findFieldByType($fields, 'text'); $phoneField = findFieldByType($fields, 'tel'); $emailField = findFieldByType($fields, 'email'); $leadId = \CCrmLead::Add([ 'TITLE' => $form['TITLE'] . ': ' . ($data[$nameField['id']] ?? 'Новий лід'), 'NAME' => $data[$nameField['id']] ?? '', 'PHONE' => [['VALUE' => $data[$phoneField['id']] ?? '', 'VALUE_TYPE' => 'WORK']], 'EMAIL' => [['VALUE' => $data[$emailField['id']] ?? '', 'VALUE_TYPE' => 'WORK']], 'SOURCE_ID' => 'WEB', 'COMMENTS' => json_encode($submissionData, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT), ]); // Оновлюємо запис сабміту ID створеного ліда FormSubmissionTable::update($subId, ['CRM_ENTITY_ID' => $leadId]); } echo json_encode(['success' => true]); 

Як побудований інтерфейс адміністратора

Сторінка /local/admin/form_builder.php або окремий SPA на React/Vue в /local/assets/form-builder/. Спрощена версія без drag-and-drop — додавання полів через кнопку + сортування стрілками. Це швидше в розробці і покриває 90% задач.

Як відбувається рендер форми на фронтенді

Компонент local:form.builder.render приймає SLUG форми, дістає конфігурацію з HL-блоку і виводить поля. Шаблон проходиться по масиву полів і для кожного типу (text, tel, select, textarea) малює свій HTML. Підтримуються маски, залежні поля, капча.

Порівняння: стандартні веб-форми vs кастомний конструктор

Що входить у роботу

• Методика: аналіз бізнес-процесів, прототипування полів, узгодження валідації.
• Розробка: створення HL-блоків, адмін-інтерфейсу, компонента рендера та обробника з використанням інкапсуляції та Dependency Injection.
• Інтеграція: налаштування надсилання листів, прив'язка до CRM (Бітрікс24), експорт в Excel.
• Документація: опис структури таблиць, інструкція для менеджерів.
• Підтримка: виправлення помилок, доробки протягом місяця після релізу.

Процес роботи

1. Аналітика — виявляємо типи полів, правила валідації, сценарії інтеграції.
2. Проєктування — архітектура HL-блоків, схема даних, макет інтерфейсу.
3. Реалізація — код конструктора, рендерера, обробника, CRM-хука.
4. Тестування — перевірка на 10+ сценаріях: сабміт, помилки, XSS, навантаження.
5. Деплой і навчання — заливка на продакшн, передача менеджерам.

Терміни розробки та вартість

Чому обирають нас

• 9+ років досвіду з Бітрікс та Бітрікс24.
• 50+ успішних проєктів з кастомізації форм.
• Індивідуальний підхід: фіксуємо вимоги, терміни та вартість до старту.
• Гарантія на код, підтримка після здачі.
• Економія до 30% бюджету на супроводі завдяки автоматизації.

Хочете такий самий конструктор? Зв'яжіться з нами — оцінимо проєкт безкоштовно за 1 день. Отримайте консультацію прямо зараз.