Формы в блоках

Выберите инструмент для разработки с AI-агентом:

  • используйте Битрикс24 Вайбкод, чтобы создать приложение для Битрикс24 по описанию задачи без знания языков программирования. Агент напишет код и разместит приложение на сервере без ручной настройки хостинга
  • используйте MCP-сервер, чтобы разрабатывать интеграцию через REST API в своем проекте. Агент будет обращаться к официальной REST-документации

Блок с формой встраивает в страницу сайта CRM-форму Битрикс24: заявку, заказ обратного звонка или подписку. Данные из такой формы попадают в CRM, а не хранятся на странице.

Сценарий подходит, когда со страницы собирают обращения: лендинг акции, страница контактов, форма заявки в магазине. Если данные не должны попадать в CRM, используйте обычные ноды блока.

Встраивание включает subtype: form в секции block манифеста блока. Подтип подготавливает блок и добавляет в редактор настройки формы. Саму форму создают и настраивают в CRM — блок только выбирает готовую форму и задает ее оформление. Перейти к списку форм можно прямо из настроек блока в редакторе сайта.

Что нужно для работы блока

В манифесте блока укажите subtype: form, а в разметке добавьте ноду .bitrix24forms — другой селектор подтип не видит.

Минимальный пример:

'block' => [
    'subtype' => 'form',
],
'assets' => [
    'ext' => [
        'landing_form',
    ],
],

<div class="bitrix24forms" data-b24form-use-style="Y"></div>

В штатных блоках расширение landing_form указывают в манифесте. Если его нет, подтип добавит его автоматически.

Как работает подтип

Подтип отрабатывает в две фазы.

Сборка манифеста. Когда система собирает манифест блока, обработчик подтипа подключает расширение landing_form, добавляет для .bitrix24forms настройку стиля crm-form и описывает атрибуты формы. В редакторе из этих атрибутов появляются настройки блока: список доступных форм и ссылка на страницу с формами.

Добавление блока на страницу. В колбэке afterAdd система проверяет ноду .bitrix24forms:

  • если в разметке нет .bitrix24forms, автоматическая настройка не выполняется
  • если у блока уже выбрана форма, система сохраняет ее
  • если форма еще не выбрана, система подставляет готовую форму и при необходимости создает новую
  • выбранная форма записывается в атрибут data-b24form маркером вида #crmFormInline<ID>
  • содержимое ноды заменяется на прелоадер

Маркер и прелоадер остаются в контенте блока. На рабочий код встраивания система заменяет их при выводе страницы.

Префикс #crmFormInline означает, что форма встроена в страницу. Форму можно открыть и во всплывающем окне, но это уже не блок с формой, а ссылка: в атрибут ссылки кнопки записывают маркер вида #crmFormPopup<ID>.

Атрибуты формы

Атрибут

Значение

Что задает

data-b24form

Маркер вида #crmFormInline<ID>, где ID — идентификатор CRM-формы

Выбранную форму

data-b24form-use-style

Y или N

Использование оформления, заданного в блоке

data-b24form-design

JSON, состав ключей приведен ниже

Оформление формы

Еще два атрибута подтип проставляет сам, и в интерфейсе они не показываются: data-b24form-embed — признак встроенной формы, data-b24form-connector со значением Y — форма подключена без модуля CRM.

Ключи data-b24form-design:

Ключ

Тип

Что задает

dark

Логический

Темную тему формы

style

Строка

Стиль оформления, например classic

shadow

Логический

Тень вокруг формы

compact

Логический

Компактный режим полей

color

Объект

Цвета элементов формы

border

Объект с ключами top, bottom, left, right

Видимые стороны рамки

Пример значения:

{
    "dark": true,
    "style": "classic",
    "shadow": false,
    "compact": false,
    "color": {},
    "border": {
        "top": false,
        "bottom": false,
        "left": false,
        "right": false
    }
}

Элемент .landing-block-form-styles и атрибут data-b24form-show-header относятся к миграции старого формата и в новых блоках не нужны.

Как сменить форму через REST

  1. Получите манифест блока методом landing.block.getmanifest с параметром params.edit_mode = true и посмотрите, какие значения доступны для .bitrix24forms в ключе attrs. В список попадают формы, доступные в Битрикс24. Без edit_mode метод вернет только имя атрибута data-b24form, без списка форм.
  2. Запишите новое значение data-b24form методом landing.block.updateattrs.
  3. Проверьте результат методом landing.block.getcontent с параметром editMode = true — без него вернется опубликованная версия блока. Затем опубликуйте страницу методом landing.landing.publication.

Свой блок с формой регистрируют методом landing.repo.register, а манифест штатного блока для образца получают методом landing.block.getmanifestfile.

Примеры штатных блоков

  • 33.1.form_1_transparent_black_left_text
  • 33.10.form_2_light_left_text
  • 33.23.form_2_themecolor_no_text
  • 66.90.form_new_default

Права и ограничения

Scope: landing

Кто может выполнять метод: в зависимости от метода

Дополнительный scope для встраивания формы не нужен: блок работает со scope landing, а набор доступных форм определяется тем, какие CRM-формы есть в Битрикс24.

Ограничения:

  • блок встраивает готовую CRM-форму. Создать или изменить саму форму методами landing.block.* нельзя
  • подтип обрабатывает только ноду .bitrix24forms, другой селектор он не видит
  • список форм в настройках блока собирается из форм, доступных в Битрикс24. Если доступных форм нет, выбирать будет не из чего
  • если у блока несколько подтипов, манифест дополняют все, но колбэк afterAdd выполняется только у последнего в списке. В блоке с subtype: ['map', 'form'] автонастройка карты не сработает

Продолжите изучение

Предыдущая
Формы поиска
Следующая
Обзор блоков