Ефективний спосіб інтеграції форм з 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 кастомний конструктор
| Критерій | Стандартний модуль | Кастомний конструктор |
|---|---|---|
| Адаптивність | Ні | Так, CSS-фреймворк |
| Кастомні типи полів | Тільки задані | Будь-які через JSON (20+ типів) |
| CRM-інтеграція | Через обробник події | Вбудована, маппінг полів |
| Збереження даних | Тільки стандартні таблиці | HL-блоки, будь-яка схема |
| Зміна полів | Через код | Через адмінку |
| Час на нову форму | 1-2 дні | 15-30 хвилин |
Що входить у роботу
- Методика: аналіз бізнес-процесів, прототипування полів, узгодження валідації.
- Розробка: створення HL-блоків, адмін-інтерфейсу, компонента рендера та обробника з використанням інкапсуляції та Dependency Injection.
- Інтеграція: налаштування надсилання листів, прив'язка до CRM (Бітрікс24), експорт в Excel.
- Документація: опис структури таблиць, інструкція для менеджерів.
- Підтримка: виправлення помилок, доробки протягом місяця після релізу.
Процес роботи
- Аналітика — виявляємо типи полів, правила валідації, сценарії інтеграції.
- Проєктування — архітектура HL-блоків, схема даних, макет інтерфейсу.
- Реалізація — код конструктора, рендерера, обробника, CRM-хука.
- Тестування — перевірка на 10+ сценаріях: сабміт, помилки, XSS, навантаження.
- Деплой і навчання — заливка на продакшн, передача менеджерам.
Терміни розробки та вартість
| Варіант | Склад | Термін | Вартість |
|---|---|---|---|
| Базовий конструктор | Керування полями, збереження, рендер | 8–12 днів | від $500 |
| З CRM-інтеграцією | + Ліди, маппінг полів, сповіщення | 12–18 днів | від $800 |
| Drag-and-drop + аналітика | + Візуальний редактор, статистика форм | 18–28 днів | від $1200 |
Чому обирають нас
- 9+ років досвіду з Бітрікс та Бітрікс24.
- 50+ успішних проєктів з кастомізації форм.
- Індивідуальний підхід: фіксуємо вимоги, терміни та вартість до старту.
- Гарантія на код, підтримка після здачі.
- Економія до 30% бюджету на супроводі завдяки автоматизації.
Хочете такий самий конструктор? Зв'яжіться з нами — оцінимо проєкт безкоштовно за 1 день. Отримайте консультацію прямо зараз.