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

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

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

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

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

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

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

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

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

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

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

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

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

1. Перейдите на вкладку Шаблон формы.
2. Выберите Использовать свой шаблон формы для кастомизации.
3. В визуальном редакторе добавьте элементы:Заголовок формы (например, «Оставьте заявку»).
   Поля формы: перетащите вопросы из панели «Элементы формы».
   Кнопка Отправить.
   CAPTCHA (если включена).
   
4. Настройте стили (шрифты, цвета) через визуальный редактор или добавьте 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: Создание страницы

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

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

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

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

<? $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

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

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

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

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

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

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

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

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

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 автоматизирует обработку лидов, а аналитика помогает отслеживать эффективность форм.