Как мы строим кастомный конструктор форм на 1С-Битрикс для гибкой CRM-интеграции
Представьте: менеджер просит форму обратной связи. Вы делаете, а через неделю нужно добавить поле «Дата рождения» и привязать к CRM. И так каждый раз. Типовой модуль «Веб-формы» в 1С-Битрикс морально устарел — интерфейс не адаптивен, интеграция с внешними системами через костыли, а менять поля без разработчика нельзя. В результате на доработки уходит до 40% времени команды, а бизнес теряет лиды из-за медленных изменений.
Мы строим кастомный конструктор форм, где менеджер сам создаёт поля, настраивает валидацию, перенаправления и интеграцию с Битрикс24 — всё через веб-интерфейс. Никаких правок в коде после релиза. Это сокращает время внедрения новых форм с недель до часов и экономит до 30% бюджета на сопровождение. Наш опыт — 9+ лет разработки на Битрикс и более 50 проектов по кастомизации форм. Эти данные подтверждены внутренними проектами компании.
Почему стандартные веб-формы не подходят для сложных проектов?
Модуль form в Битрикс — это как запчасти: есть, но не для гонок. Проблемы:
- Интерфейс не перестраивается под мобильные устройства.
- Валидация ограничена стандартными правилами — без кастомных regex или зависимостей полей.
- Сохранение данных — только в таблицу модуля, без прямой записи в HL-блоки или сторонние сервисы.
- CRM-интеграция требует написания обработчика на событие
onFormResultAdd— для каждой формы свой.
Кастомный конструктор решает всё это одной архитектурой: метаданные формы → HL-блок → универсальный рендерер → единый обработчик сабмита с CRM-хуком. В 90% случаев этого достаточно, чтобы покрыть любые бизнес-требования без дополнительных доработок.
Как устроено хранение метаданных в 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 |
| CRM-интеграция | Через обработчик события | Встроенная, маппинг полей |
| Хранение данных | Только стандартные таблицы | HL-блоки, любая схема |
| Изменение полей | Через код | Через админку |
| Время на новую форму | 1-2 дня | 15-30 минут |
Что входит в работу
- Методика: анализ бизнес-процессов, прототипирование полей, согласование валидации.
- Разработка: создание HL-блоков, админ-интерфейса, компонента рендера и обработчика.
- Интеграция: настройка отправки писем, привязка к CRM (Битрикс24), экспорт в Excel.
- Документация: описание структуры таблиц, инструкция для менеджеров.
- Поддержка: исправление ошибок, доработки в течение месяца после релиза.
Процесс работы
- Аналитика — выявляем типы полей, правила валидации, сценарии интеграции.
- Проектирование — архитектура HL-блоков, схема данных, макет интерфейса.
- Реализация — код конструктора, рендерера, обработчика, CRM-хука.
- Тестирование — проверка на 10+ сценариях: сабмит, ошибки, XSS, нагрузка.
- Деплой и обучение — заливка на продакшен, передача менеджерам.
Сроки разработки
| Вариант | Состав | Срок |
|---|---|---|
| Базовый конструктор | Управление полями, сохранение, рендер | 8–12 дней |
| С CRM-интеграцией | + Лиды, маппинг полей, уведомления | 12–18 дней |
| Drag-and-drop + аналитика | + Визуальный редактор, статистика форм | 18–28 дней |
Почему выбирают нас
- 9+ лет опыта с Битрикс и Битрикс24.
- 50+ успешных проектов по кастомизации форм.
- Индивидуальный подход: фиксируем требования, сроки и стоимость до старта.
- Гарантия на код, поддержка после сдачи.
Хотите такой же конструктор? Свяжитесь с нами — оценим проект бесплатно за 1 день. Получите консультацию прямо сейчас.