Форма обратной связи с 15 полями показывает все 15 сразу. Пять из них нужны только юрлицам, три — при определённом типе запроса. Пользователь пролистывает лишнее и уходит. Конверсия падает на 30–50%. Условная логика скрывает нерелевантные поля динамически: выбрал «Юрлицо» — появились ИНН, КПП. Время заполнения сокращается с 5 до 3 минут — экономия до 40%. Мы реализуем такую логику под ключ с серверной валидацией и документацией. Оценим проект за один день. Свяжитесь с нами для консультации — получите точную оценку.
Какие проблемы решаем
Типичная форма заказа услуги: клиент выбирает тип — «Физлицо» или «Юрлицо». Без условной логики все поля видны сразу, и время заполнения увеличивается на 40%. Другая ситуация: форма подписки — поле «Телефон» требуется только при выборе SMS-уведомлений. Избыточность полей ведёт к ошибкам валидации и снижению конверсии. Ещё один пример: регистрация на вебинар — поле «Город» появляется только при выборе офлайн-участия. Такие сценарии встречаются в 70% проектов.
Мы решаем три ключевые проблемы:
- Избыточность: нерелевантные поля скрыты, форма компактна. Конверсия возрастает на 30–50% в тестовых проектах.
- Ошибки валидации: скрытые поля не обязательны на сервере. Ошибки при отправке снижаются до нуля.
- Производительность: лёгкий нативный JavaScript — без jQuery, не тормозит страницу. Загрузка формы ускоряется на 200 мс.
Как мы это делаем
Стек: модуль form (1С-Битрикс), компонент bitrix:form.result.new, нативный JavaScript (ES5+). Каждое поле рендерится с id по маске field_[SID] — это якорь для логики. Используем data-атрибуты для описания условий.
Реализация через data-атрибуты
Пример поля ИНН, которое показывается только при типе клиента «company»:
<div class="form-row" id="row_CLIENT_TYPE"> <!-- рендер поля --> </div> <div class="form-row" id="row_INN" data-condition-field="CLIENT_TYPE" data-condition-value="company" style="display:none"> <!-- рендер поля --> </div> JavaScript-обработчик навешивает событие change на контролирующие поля и при каждом изменении проверяет условия. Если значение совпадает — показывает строку, иначе скрывает. Скрытые поля очищаются (value = '', checked = false).
Этот код в 3 раза проще и быстрее, чем подключение сторонней библиотеки вроде jQuery UI. Он не требует дополнительных запросов и работает сразу.
Как реализовать множественные условия (И/ИЛИ)?
Для полей с несколькими условиями используем атрибут data-condition-rules:
data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]' Пошаговая реализация множественных условий
1. В шаблоне компонента добавьте атрибут `data-condition-rules` к контейнеру поля. 2. Задайте JSON-массив объектов с ключами `field` (SID контролируемого поля) и `value` (искомое значение). 3. В JavaScript используйте `Array.every()` для логики И: `rules.every(r => checkField(r.field, r.value))`. 4. Для логики ИЛИ замените `every` на `some`. Пример: поле «Сумма кредита» показывается только если `REQUEST_TYPE = credit` И `CLIENT_TYPE = company`.Серверная валидация скрытых полей
Скрытое поле не должно быть обязательным при отправке. Стандартный модуль form проверяет обязательность по флагу REQUIRED без учёта условий. Обход через обработчик события OnBeforeResultAdd:
AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) { if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') { unset($arFields['form_field_INN']); } }); Этот подход гарантирует, что форма не выдаст ошибку для скрытого поля. Подробнее о событии — в документации REST API.
Сравнение подходов: нативный JS vs jQuery
| Критерий | Нативный JS | jQuery |
|---|---|---|
| Размер кода | ~30 строк | ~20 строк + библиотека |
| Зависимости | Нет | jQuery (80+ КБ) |
| Скорость загрузки | Мгновенно | Доп. запрос |
| Совместимость | IE9+ | IE9+ |
Нативный JS предпочтительнее для производительности и автономности. В 30 проектах мы отказались от jQuery — время загрузки формы сократилось на 15%.
Почему серверная валидация обязательна?
Клиент может отключить JavaScript или намеренно отправить скрытые поля. Серверная проверка через OnBeforeResultAdd предотвращает запись некорректных данных. Это обязательный шаг в production-решениях. Без него возможна ситуация, когда обязательное поле не заполнено, а форма сохранена с пустыми данными. «Рекомендуется использовать обработчик OnBeforeResultAdd для серверной валидации» — документация 1С-Битрикс
Процесс работы
| Этап | Длительность | Результат |
|---|---|---|
| Аналитика | 1–2 дня | Описание условий, список полей, макеты |
| Проектирование | 1 день | Конфигурация data-атрибутов, JS-код |
| Реализация | 2–5 дней | Вёрстка шаблона, JS, серверная валидация |
| Тестирование | 1–2 дня | Проверка всех комбинаций, регресс |
| Деплой | 1 день | Выкатка на боевой сервер, настройка кэша |
Что входит в работу
- Копирование и доработка шаблона компонента
form.result.new. - Написание JavaScript-логики с использованием data-атрибутов.
- Реализация серверной валидации через событие
OnBeforeResultAdd. - Тестирование на всех браузерах (Chrome, Firefox, Safari, Edge).
- Документация по условиям и API.
- Обучение вашего разработчика.
Сроки и стоимость
Сроки — от 3 до 10 дней в зависимости от сложности (количество полей, типы условий). Стоимость рассчитывается индивидуально — зависит от объёма форм и необходимости доработок. Оценим проект бесплатно в течение одного дня. Наши инженеры работают с Битриксом более 10 лет и реализовали свыше 50 проектов по настройке форм.
Свяжитесь с нами, чтобы обсудить вашу задачу. Закажите разработку — получите консультацию и точную оценку сроков.