Создание веб-форм на сайте 1С-Битрикс: Руководство для программистов

Битрикс

16 апреля 2025 г.

Веб-формы в «1С-Битрикс: Управление сайтом» — мощный инструмент для сбора данных от пользователей, таких как заявки, анкеты, комментарии или регистрации. Они интегрируются с CRM, поддерживают кастомизацию и аналитику. В этой статье разберем, как создавать и настраивать веб-формы, публиковать их на сайте и интегрировать с CRM, с примерами кода и рекомендациями, в формате, совместимом с CKEditor.

1. Обзор модуля «Веб-формы»

Модуль «Веб-формы» в 1С-Битрикс позволяет:

Создавать формы любых типов (обратная связь, регистрация, анкеты).
Обрабатывать и хранить данные в административной панели.
Интегрировать с CRM для автоматической передачи лидов.
Настраивать шаблоны форм через визуальный редактор.
Использовать CAPTCHA и валидаторы для защиты и проверки данных.

Работа с формами возможна в двух режимах:

Упрощённый: без статусов, вычисляемых полей и сложных шаблонов.
Расширенный: полный функционал, включая статусы, кастомные поля и фильтры.

2. Создание веб-формы

Шаг 1: Настройка формы в административной панели

Перейдите в Административный раздел → Сервисы → Веб-формы → Настройка форм.
Нажмите Создать и задайте параметры:
- Название формы (например, «Обратная связь»).
- Символьный код (для программного доступа, например, FEEDBACK_FORM).
- Режим работы: выберите упрощённый или расширенный.
- Использовать CAPTCHA: включите для защиты от ботов.
- Права доступа: настройте для групп пользователей (например, «Все пользователи» для публичного доступа).
Сохраните форму.

Шаг 2: Создание вопросов и полей

В форме редактирования перейдите на вкладку Вопросы.
Нажмите Добавить вопрос и настройте:
- Текст вопроса (например, «Ваше имя»).
- Тип поля: текст, выпадающий список, флажок и т.д.
- Обязательность: отметьте, если поле обязательно.
- Сортировка: задайте порядок отображения (например, 100, 200).
- Валидаторы: укажите, если нужно проверять формат (например, email).
Для расширенного режима создайте вычисляемые поля (например, для хранения ответа менеджера) на вкладке Свойства. Пример:
- Символьный код: OUR_ANSWER.
- Сортировка: 300 (после других полей).

Шаг 3: Настройка шаблона формы

Перейдите на вкладку Шаблон формы.
Выберите Использовать свой шаблон формы для кастомизации.
В визуальном редакторе добавьте элементы:
- Заголовок формы (например, «Оставьте заявку»).
- Поля формы: перетащите вопросы из панели «Элементы формы».
- Кнопка Отправить.
- CAPTCHA (если включена).
Настройте стили (шрифты, цвета) через визуальный редактор или добавьте CSS в шаблон.

Пример шаблона формы:

<div class="form-container">
    <h2>Обратная связь</h2>
    <div class="form-field">[FORM_FIELD_NAME]</div>
    <div class="form-field">[FORM_FIELD_EMAIL]</div>
    <div class="form-field">[FORM_FIELD_MESSAGE]</div>
    [FORM_CAPTCHA]
    <button type="submit">[FORM_SUBMIT_BUTTON]</button>
</div>

3. Публикация формы на сайте

Шаг 1: Создание страницы

В административной панели перейдите в Контент → Структура сайта.
Создайте раздел (например, /forms/) и страницу (например, feedback.php).
Включите страницу в меню сайта для удобной навигации.

Шаг 2: Добавление компонента

Откройте страницу в визуальном редакторе.
Перетащите компонент Веб-форма (form.result.new) из раздела Веб-формы.
Настройте компонент:
- Выберите созданную форму (например, FEEDBACK_FORM).
- Включите поддержку ЧПУ (человеко-понятные URL) для SEO.
- Укажите шаблон формы (стандартный или кастомный).
Сохраните и опубликуйте страницу.

Пример подключения компонента в коде:

<? $APPLICATION->IncludeComponent(
    "bitrix:form.result.new",
    "",
    Array(
        "WEB_FORM_ID" => "1", // ID формы
        "LIST_URL" => "result_list.php", // Страница со списком результатов
        "EDIT_URL" => "result_edit.php", // Страница редактирования
        "SUCCESS_URL" => "success.php", // Страница после отправки
        "CHAIN_ITEM_TEXT" => "Обратная связь",
        "CHAIN_ITEM_LINK" => "",
        "USE_CAPTCHA" => "Y",
        "SEF_MODE" => "Y" // Поддержка ЧПУ
    )
); ?>

4. Интеграция с CRM

Шаг 1: Настройка связи с CRM

В форме редактирования перейдите на вкладку CRM.
Выберите существующий портал CRM (Bitrix24 или Корпоративный портал) или настройте новый:
- Укажите URL портала и путь к компоненту интеграции.
- Сохраните настройки.
Сопоставьте поля формы с полями CRM (например, «Имя» → «Название лида», «Email» → «Email лида»).
Укажите режим передачи данных:
- Автоматически: данные отправляются сразу.
- Вручную: после модерации.

Шаг 2: Проверка интеграции

Заполните форму на сайте.
Проверьте в CRM (Bitrix24 → CRM → Лиды), появился ли новый лид.
Настройте сценарий обработки лидов в CRM для автоматической работы с данными.

5. Обработка и аналитика результатов

Просмотр результатов

В административной панели перейдите в Сервисы → Веб-формы → Результаты.
Фильтруйте данные по статусам, датам или полям.
Экспортируйте результаты в CSV для анализа.

Интеграция с аналитикой

Подключите Яндекс.Метрику или Google Analytics к форме:
- Добавьте код отслеживания в шаблон формы или страницу.
- Настройте цели для события отправки формы.
Используйте модуль «Статистика» для анализа данных, собранных через формы.

6. Рекомендации для программистов

Используйте кастомные шаблоны для уникального дизайна, но сохраняйте адаптивность (CSS-фреймворки, например, Bootstrap).
Добавляйте валидаторы для проверки данных на стороне сервера и клиента (например, проверка формата email).
Оптимизируйте ЧПУ для SEO, включая ключевые слова в URL формы.
Тестируйте интеграцию с CRM на тестовом портале перед запуском, чтобы избежать потери лидов.
Используйте REST API для сложных интеграций, если стандартные методы ограничены (например, для передачи UTM-меток).
Обновляйте платформу до последней версии, чтобы использовать новые возможности модуля. Проверить версию можно в Marketplace → Обновление платформы.

7. Пример: Форма обратной связи

Создадим простую форму с полями «Имя», «Email», «Сообщение» и интегрируем её с CRM.

Код шаблона формы

<div class="feedback-form">
    <h3>Свяжитесь с нами</h3>
    <div class="form-group">
        <label>Имя:</label>
        [FORM_FIELD_NAME]
    </div>
    <div class="form-group">
        <label>Email:</label>
        [FORM_FIELD_EMAIL]
    </div>
    <div class="form-group">
        <label>Сообщение:</label>
        [FORM_FIELD_MESSAGE]
    </div>
    [FORM_CAPTCHA]
    <button type="submit" class="btn btn-primary">[FORM_SUBMIT_BUTTON]</button>
</div>
<style>
.feedback-form { max-width: 600px; margin: 0 auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.btn-primary { background: #007bff; color: #fff; padding: 10px 20px; border: none; }
</style>

Код страницы (feedback.php)

<? $APPLICATION->IncludeComponent(
    "bitrix:form.result.new",
    "feedback_template",
    Array(
        "WEB_FORM_ID" => "1",
        "LIST_URL" => "/forms/result_list.php",
        "SUCCESS_URL" => "/forms/success.php",
        "USE_CAPTCHA" => "Y",
        "SEF_MODE" => "Y"
    )
); ?>

Настройка CRM

Сопоставьте поля: «Имя» → «Название лида», «Email» → «Email лида», «Сообщение» → «Комментарий».
Включите автоматическую передачу данных.

Заключение

Создание веб-форм в 1С-Битрикс — это гибкий процесс, который позволяет программистам быстро разрабатывать функциональные решения для сбора данных. Используйте визуальный редактор для простых задач, кастомные шаблоны для уникального дизайна и REST API для сложных интеграций. Интеграция с CRM автоматизирует обработку лидов, а аналитика помогает отслеживать эффективность форм.