Разработка кастомного конструктора форм на 1С-Битрикс

Как мы строим кастомный конструктор форм на 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 кастомный конструктор

Что входит в работу

• Методика: анализ бизнес-процессов, прототипирование полей, согласование валидации.
• Разработка: создание HL-блоков, админ-интерфейса, компонента рендера и обработчика.
• Интеграция: настройка отправки писем, привязка к CRM (Битрикс24), экспорт в Excel.
• Документация: описание структуры таблиц, инструкция для менеджеров.
• Поддержка: исправление ошибок, доработки в течение месяца после релиза.

Процесс работы

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

Сроки разработки

Почему выбирают нас

• 9+ лет опыта с Битрикс и Битрикс24.
• 50+ успешных проектов по кастомизации форм.
• Индивидуальный подход: фиксируем требования, сроки и стоимость до старта.
• Гарантия на код, поддержка после сдачи.

Хотите такой же конструктор? Свяжитесь с нами — оценим проект бесплатно за 1 день. Получите консультацию прямо сейчас.