Встраивание CRM-формы на сайт

CRM-форма Битрикс24 создаётся в портале, а на сайт попадает через код встраивания. Практически всегда используют скрипт-загрузчик — он подтягивает актуальный дизайн и логику формы из портала; iframe и прямая ссылка нужны реже, но в некоторых ситуациях выручают.

Способы встраивания: скрипт, iframe и ссылка

Битрикс24 предлагает три принципиально разных способа вывести CRM-форму на внешнем сайте, и выбор между ними определяет и внешний вид, и надёжность передачи заявок:

• Скрипт-загрузчик — основной и рекомендованный вариант. На страницу вставляется небольшой <script>, который асинхронно подгружает форму с CDN Битрикс24. Форма встраивается «нативно», наследует стили и все настройки, а изменения в конструкторе применяются без правки кода на сайте.
• iframe — форма открывается как отдельная страница внутри рамки. Полезен, когда сайт запрещает выполнение сторонних скриптов или нужна жёсткая изоляция от вёрстки сайта.
• Прямая ссылка — публичная страница формы вида b24-xxxxxx.bitrix24.site. Её можно дать в письме, мессенджере, QR-коде или повесить на кнопку.

Код для всех вариантов находится в самой форме: раздел CRM → Ещё → CRM-формы, открыть нужную форму и перейти на вкладку «Встраивание на сайт» (в старом интерфейсе — «Ссылка и код»).

Скрипт-загрузчик: где взять и как вставить

На вкладке встраивания Битрикс24 генерирует готовый код. Он выглядит примерно так:

<script data-b24-form="inline/12/a1b2c3" data-skip-moving="true">(function(w,d,u){var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(window,document,'https://cdn-ru.bitrix24.ru/b12345678/crm/form/loader_12.js');</script>

Ключевые части кода:

• data-b24-form — тип показа и идентификатор формы (inline, click или auto, номер формы и хэш);
• loader_12.js — сам загрузчик; цифра совпадает с ID формы;
• data-skip-moving="true" — говорит скрипту не перемещать блок формы, а показать её ровно там, где стоит тег.

Форма появится в том месте DOM, где физически расположен <script>. Поэтому для встроенного режима код кладут прямо в контейнер, где должна быть форма, а не в общий подвал сайта.

Встраивание через iframe

iframe подходит, когда площадка не разрешает выполнять внешний JavaScript (жёсткий CSP, чужая CMS, отзыв на модерации) или когда форму нужно полностью отделить от стилей сайта. Для этого используют публичную страницу формы:

<iframe src="https://b24-xxxxxx.bitrix24.site/crm_form_a1b2c/" width="100%" height="700" frameborder="0"></iframe>

Адрес берётся из той же вкладки встраивания — это ссылка на отдельную страницу формы. Плюс подхода — предсказуемость: содержимое рамки изолировано и не конфликтует с версткой. Минусы тоже существенные:

• высоту рамки приходится задавать вручную, и при длинной форме или ошибках валидации содержимое обрезается либо появляется двойная прокрутка;
• iframe хуже адаптируется под мобильные экраны;
• ряд «умных» функций (автопоказ, поведение по прокрутке, всплывающее окно) в iframe недоступны — они работают только через скрипт.

Режимы показа: встроенная, кнопка, автопоказ

Тип встраивания задаётся в конструкторе формы и отражается в атрибуте data-b24-form. От него зависит, как посетитель увидит форму:

Правила автопоказа (задержка, процент прокрутки, выход курсора за пределы окна) настраиваются в самом конструкторе на вкладке встраивания — менять код руками не нужно. Для режима «по кнопке» Битрикс24 даёт отдельный сниппет кнопки либо можно повесить открытие формы на свой элемент через нужный класс/атрибут.

Куда вставлять код в разных CMS

Технически задача одна — разместить полученный код в HTML страницы. Отличается только место вставки:

• Обычный HTML/лендинг — код скрипта помещают в то место разметки, где должна появиться форма (для inline) либо перед закрывающим </body> (для кнопки и автопоказа).
• WordPress — блок «Произвольный HTML» в редакторе Gutenberg или шорткод; для глобального автопоказа удобнее вставить код в футер через тему или плагин вставки скриптов.
• Tilda — блок T123 (HTML) для встроенной формы или вставка в «Ещё → HTML-код в head/body».
• Конструкторы (Wix, Nethouse и т. п.) — виджет «Встроить код»/«HTML iframe». Если конструктор режет скрипты, используют iframe-вариант.

Проверка заявок и домены

После установки обязательно отправьте тестовую заявку и убедитесь, что она долетела до CRM: по умолчанию из формы создаётся лид (или сделка/контакт — в зависимости от настроек «Что создавать» в конструкторе). Проверьте, что заполнились нужные поля и сработала привязка к воронке.

• Домен и HTTPS. Загрузчик отдаётся с CDN Битрикс24 по HTTPS. Сайт тоже должен работать по HTTPS, иначе браузер заблокирует смешанный контент и форма не отрисуется.
• Кэш. После правок в конструкторе изменения появляются почти сразу, но агрессивный кэш сайта или CDN может отдавать старую страницу — сбросьте кэш при проверке.
• Согласие на обработку ПД. Форма должна содержать чекбокс согласия и ссылку на политику — это настраивается в самой форме до встраивания.
• UTM и источник. В скрипт-режиме метки и адрес страницы подставляются автоматически и попадают в карточку лида — это удобно для сквозной аналитики.

Типичные проблемы и их причины

Большинство обращений «форма не работает» сводится к нескольким повторяющимся ситуациям:

• Форма не появляется. Скопирован не весь код (обрезана функция-загрузчик) либо inline-скрипт стоит не в том контейнере. Проверьте целостность тега и наличие data-b24-form.
• Форма мигает и исчезает. Конфликт с другой библиотекой на странице или повторная вставка загрузчика. Оставьте одну копию функции-загрузчика.
• Заявки не приходят в CRM. Форма была снята с публикации, отключена или удалена в портале; либо тестировали в режиме предпросмотра, который не создаёт лид.
• Съезжает вёрстка. Тесный родительский блок с overflow: hidden обрезает форму — дайте контейнеру достаточную ширину или используйте iframe с фиксированной высотой.
• Не работает автопоказ. Он не запускается в режиме предпросмотра и не поддерживается в iframe — проверяйте на реальной опубликованной странице.

Итог

Встраивание CRM-формы Битрикс24 — это перенос сгенерированного портом кода на страницу сайта. В большинстве случаев выбирают скрипт-загрузчик: он даёт нативный вид, поддерживает все режимы показа, корректно передаёт UTM и источник. iframe и прямая ссылка остаются запасными вариантами для площадок с ограничениями на скрипты. После установки всегда отправляйте тестовую заявку и проверяйте, что лид создаётся в нужной воронке с заполненными полями.

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