(1).png)
Формы в Битрикс24 создают и настраивают во встроенном редакторе. Если стандартных параметров недостаточно, внешний вид формы можно изменить с помощью CSS. Например, изменить размер шрифта, цвет текста и фона, оформление кнопок, настроить обводку и скругление полей. Это помогает адаптировать форму под дизайн проекта и сделать ее удобнее для пользователей.
Разместить форму на стороннем сайте поможет статья Как разместить CRM-форму на сайте, созданном не в Битрикс24.
Чтобы изменить CRM-форму, добавьте CSS-стили на странице, где она размещена. Это можно сделать двумя способами.
- изменить подключенный к странице CSS-файл,
- открыть страницу в режиме редактирования кода и добавить стили в блок
<style>перед кодом формы.
Текст между тегами /* и */ — это комментарии, которые помогают ориентироваться в коде и не влияют на внешний вид CRM-формы. Их можно оставить или удалить.
!important к каждому свойству — стандартные стили Битрикс24 имеют более высокий приоритет. 
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Как адаптировать форму под дизайн проекта
С помощью CSS приведите CRM-форму к дизайну сайта: настройте цвета, шрифты и оформление полей и кнопок в соответствии с общим стилем страницы. Так форма будет выглядеть согласованной с остальным интерфейсом без визуального контраста.
Ширина формы. Настройте максимальную ширину формы для корректного отображения на разных устройствах.
/* Ширина формы */ .b24-form-wrapper { min-height: 250px !important; max-width: 540px !important; }
Шрифт формы. Установите единый шрифт для всех элементов формы.
/* Шрифт формы */ html, body,.form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; }
Заголовок и подзаголовок формы. Измените размер, жирность и цвет шрифта, межстрочный интервал и высоту отступа после заголовка.
/* Заголовок формы */ .b24-form-header-title { font-size: 25px !important; /* Размер шрифта */ line-height: 38px !important; /* Межстрочный интервал */ margin-top: 60px !important; /* Отступ после заголовка */ margin-bottom: 10px !important; /* Отступ после заголовка */ font-weight: 700 !important; /* Жирность шрифта */ }
/* Подзаголовок формы */ .b24-form-header-description { font-size: 16px !important; /* Размер шрифта */ line-height: 26px !important; /* Межстрочный интервал */ color: #4b5563 !important; /* Цвет подзаголовка */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Внешний вид поля. Настройте высоту, цвет фона и обводки. CSS изменит параметры всех полей в форме.
/* Параметры поля */ .b24-form-control-string .b24-form-control, .b24-form-control-list .b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { height: 60px !important; /* Высота поля */ background-color: #FAFBFC !important; /* Цвет фона */ padding-left: 16px !important; /* Отступ слева перед текстом */ padding-right: 16px !important; /* Отступ справа после текста */ border: 1px solid #c9d2dd !important; /* Толщина обводки */ border-color: #E2E2E2 !important; /* Цвет обводки */ border-radius: 12px !important; /* Скругление обводки */ }
Название поля — измените цвет, размер и отступы подписи, чтобы она соответствовала стилю сайта.
Для разных состояний поля — по умолчанию, при фокусе и после заполнения — можно задать отдельные параметры. Например, скорректировать размер или положение названия.
/* Название поля */ .b24-form-control-label { font-size: 16px !important; /* Размер названия поля */ line-height: 52px !important; /* Высота поля для ввода текста */ color: #525C69 !important; /* Цвет текста в названии */ opacity: 1 !important; /* Прозрачность текста */ padding-left: 16px !important; /* Отступ слева перед названием поля */ padding-right: 16px !important; /* Отступ справа после названия поля */ }
/* Название, когда поле находится в фокусе или заполнено */ .b24-form-control-select-label, .b24-form-control:focus + .b24-form-control-label, .b24-form-control-not-empty + .b24-form-control-label { font-size: 13px !important; /* Размер названия поля */ top: -10px !important; /* Расположение названия поля */ color: #525C69 !important; /* Цвет */ background: transparent !important; /* или просто удалите background-color */ padding-left: 14px !important; /* Отступ слева перед названием поля */ padding-right: 12px !important; /* Отступ справа после названия поля */ }
Текст в поле. Укажите размер и цвет шрифта, который будет вводить пользователь.
/* Текст в поле */ .b24-form-control { font-size: 16px !important; /* Размер шрифта */ color: #000000 !important; /* Цвет текста */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Списочное поле. Задайте размер шрифта в выпадающем списке так, чтобы он соответствовал оформлению остальных полей формы. Настройте элементы управления: крестика для удаления варианта и иконки раскрытия списка.
/* Размер шрифта вариантов в списке */ .b24-form-control-list-selector-item-title { font-size: 16px !important; }
/* Крестик в поле выпадающего списка */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Высота */ top: 4px !important; /* Расположение */ }
/* Поле */ .b24-form-control-list .b24-form-icon-remove { height: 60px !important; /* Высота */ right: 50px !important; /* Смещение элемента от правого края */ }
/* Иконка открытия списка */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Высота */ width: 12px !important; /* Ширина элемента */ top: 26px !important; /* Расположение */ right: 20px !important; /* Смещение элемента от правого края */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Соглашения. Настройте оформление чекбоксов и текста согласия в соответствии с дизайном сайта: измените размеры, отступы и цвет элементов.
/* Размер чекбокса */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 20px; /* Ширина чекбокса */ height: 20px; /* Высота чекбокса */ }
/* Межстрочный интервал в тексте согласия */ .b24-form-control-desc { font-size: 14px !important; line-height: 1.45 !important; }
/* Размер шрифта в тексте согласия */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 14px !important; }
/* Отступ после соглашения */ .b24-form-btn-container { margin-top: 24px !important; }
Кнопки. Измените оформление кнопок: цвет, шрифт, размер и так далее.
/* Параметры кнопки */ .b24-form-btn { background: #10B769 !important; /* Цвет фона кнопки */ color: #fff !important; /* Цвет шрифта кнопки */ font-weight: 400 !important;/* Толщина шрифта */ font-size: 16px !important; /* Размер шрифта кнопки */ height: 62px !important; /* Высота кнопки */ border: 1px solid #10B769 !important; /* Обводка кнопки */ border-radius: 12px !important; /* Скругление углов */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Многостраничные формы. Настройте отображение номера и названия страницы, поле Комментарий.
/* Номер страницы */ .b24-form-progress-bar-counter { font-size: 14px !important; /* Размер шрифта */ top: 46% !important; /* Расположение */ }
/* Название страницы */ .b24-form-progress-bar-title { font-size: 18px !important; /* Размер шрифта */ }
/* Поле «Комментарий» */ .b24-form-control-text .b24-form-control { height: 190px !important; /* Высота */ min-height: 190px !important; /* Минимальная высота */ max-height: 190px !important; /* Максимальная высота */ padding: 34px 16px 16px !important; /* Расположение лейбла сверху */ box-sizing: border-box !important; /* Размер поля */ resize: none !important; /* Возможность изменять размер поля при заполнении */ }
/* Лейбл в текстовом поле */ .b24-form-control-text .b24-form-control-label, .b24-form-control-text .b24-form-control:focus + .b24-form-control-label, .b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { top: 12px !important; /* Расположение */ left: 16px !important; /* Отступ слева */ right: 16px !important; /* Отступ справа */ transform: none !important; /* Изменение элемента */ font-size: 13px !important; /* Размер шрифта */ line-height: 1.2 !important; /* Межстрочный интервал */ opacity: 1 !important; /* Прозрачность */ padding: 0 !important; /* Внутренние отступы */ }
Активные элементы. Измените цвет и оформление полей, чекбоксов и кнопок при наведении и фокусе с клавиатуры, чтобы они соответствовали стилю сайта и общему дизайну формы.
/* Обводка поля при наведении или фокусе с клавиатуры */ .b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), .b24-form-control-text .b24-form-control:focus:not([readonly]), .b24-form-control-select .field-item:focus:not([readonly]) { border-color: #10B769 !important; /* Цвет обводки */ outline: 3px solid #bcdcff !important; /* Толщина обводки */ outline-offset: 2px !important; }
/* Обводка кнопки «Отправить» при фокусе с клавиатуры */ .b24-form-btn:focus-visible { outline: 3px solid #1f2937 !important; /* Цвет и толщина обводки */ outline-offset: 2px !important; }
/* Обводка чекбоксов при фокусе с клавиатуры */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 3px solid #1f2937 !important; /* Цвет и толщина обводки */ outline-offset: 2px !important; }
/* Иконка закрытия в согласии */ .b24-window-close { background-color: #005def !important; /* Цвет фона */ }
/* Иконка закрытия в согласии */ .b24-window-close::after, .b24-window-close::before { background-color: #000000 !important; /* Цвет крестика */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Как повысить доступность и читаемость формы
Разберем настройку на примере адаптации формы для людей с нарушениями зрения и особенностями восприятия текста. Расскажем, как изменить параметры, которые влияют на читаемость и восприятие интерфейса. Эти изменения соответствуют требованиям ГОСТ Р 52872-2019 к доступности цифровых ресурсов.
Шрифт формы. Установите единый шрифт для всех элементов формы.
/* Шрифт формы */ html, body,.form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; }
Заголовок и подзаголовок формы. Увеличьте размер шрифта, межстрочный интервал и высоту отступа после заголовка, чтобы сделать текст более читаемым.
/* Заголовок формы */ .b24-form-header-title { font-size: 38px !important; /* Размер шрифта */ line-height: 60px !important; /* Межстрочный интервал */ margin-top: 60px !important; /* Отступ после заголовка */ margin-bottom: 20px !important; /* Отступ после заголовка */ }
/* Подзаголовок формы */ .b24-form-header-description { font-size: 30px !important; /* Размер шрифта */ line-height: 36px !important; /* Межстрочный интервал */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Внешний вид поля. Увеличьте высоту, измените цвет фона на белый и добавьте черную обводку. Это позволит использовать более крупный шрифт и обеспечит четкий контраст элементов. CSS изменит параметры всех полей в форме.
/* Параметры поля */ .b24-form-control-string .b24-form-control, .b24-form-control-list .b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { height: 100px !important; /* Высота поля */ background-color: #fff !important; /* Цвет фона */ padding-left: 20px !important; /* Отступ слева перед текстом */ padding-right: 20px !important; /* Отступ справа после текста */ border: 2px solid #A8ADB4 !important; /* Толщина обводки */ border-color: #A8ADB4 !important; /* Цвет обводки */ border-radius: 20px !important; /* Скругление обводки */ }
Название поля — настройте параметры, которые будут меняться в зависимости от действий пользователя. По умолчанию используйте крупный шрифт темного цвета: так название легче прочесть и понять, какую информацию необходимо ввести.
Для поля в фокусе или после заполнения размер названия можно уменьшить, чтобы оно не перекрывало текст пользователя.
/* Название поля */ .b24-form-control-label { font-size: 30px !important; /* Размер названия поля */ line-height: 100px !important; /* Высота поля для ввода текста */ color: #000 !important; /* Цвет текста в названии */ opacity: 1 !important; /* Прозрачность текста */ padding-left: 20px !important; /* Отступ слева перед названием поля */ padding-right: 20px !important; /* Отступ справа после названия поля */ }
/* Название, когда поле находится в фокусе или заполнено */ .b24-form-control-select-label, .b24-form-control:focus + .b24-form-control-label, .b24-form-control-not-empty + .b24-form-control-label { font-size: 20px !important; /* Размер названия поля */ top: -24px !important; /* Расположение названия поля */ padding-left: 20px !important; /* Отступ слева перед названием поля */ padding-right: 20px !important; /* Отступ справа после названия поля */ }
Текст в поле. Укажите размер и цвет шрифта, который будет вводить пользователь. Текст должен быть крупным и хорошо выделяться на фоне поля.
/* Текст в поле */ .b24-form-control { font-size: 30px !important; /* Размер шрифта */ color: #000000 !important; /* Цвет текста */ padding-top: 24px !important; /* Отступ */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Списочное поле. Задайте размер шрифта в выпадающем списке, чтобы пользователю было легче прочитать и выбрать нужный пункт. Например, программу экскурсии.
/* Размер шрифта вариантов в списке */ .b24-form-control-list-selector-item-title { f ont-size: 25px !important; }
/* Крестик в поле выпадающего списка */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Высота */ t op: 30px !important; /* Расположение */ }
/* Поле */ .b24-form-control-list .b24-form-icon-remove { height: 100px !important; /* Высота */ right: 50px !important; /* Смещение элемента от правого края */ }
/* Иконка открытия списка */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Высота */ width: 12px !important; /* Ширина элемента */ top: 45px !important; /* Расположение */ right: 20px !important; /* Смещение элемента от правого края */ }
Слева — стандартное списочное поле, справа — после настройки с помощью CSS
Соглашения. Увеличьте размер чекбоксов, в которых пользователи отметят свой выбор. Например, согласятся на обработку персональных данных или подтвердят, что ознакомились с условиями доставки.
/* Размер чекбокса */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 28px; /* Ширина чекбокса */ height: 28px; /* Высота чекбокса */ }
/* Межстрочный интервал в тексте согласия */ .b24-form-control-desc { font-size: 25px !important; }
/* Размер шрифта в тексте согласия */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 25px !important; }
/* Отступ после соглашения */ .b24-form-btn-container { margin-top: 40px !important; }
Кнопки. Измените оформление кнопок: цвет, шрифт, размер и так далее. Сделайте их более контрастными для удобства пользователей.
/* Параметры кнопки */ .b24-form-btn { background: #000000 !important; /* Цвет фона кнопки */ color: #fff !important; /* Цвет шрифта кнопки */ font-size: 32px !important; /* Размер шрифта кнопки */ height: 100px !important; /* Высота кнопки */ border: 20px solid #000000 !important; /* Обводка кнопки */ border-radius: 20px !important; /* Скругление углов */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Многостраничные формы. Настройте отображение номера и названия страницы, поле Комментарий.
/* Номер страницы */ .b24-form-progress-bar-counter { font-size: 20px !important; /* Размер шрифта */ top: 46% !important; /* Расположение */ }
/* Название страницы */ .b24-form-progress-bar-title { font-size: 28px !important; /* Размер шрифта */ }
/* Поле «Комментарий» */ .b24-form-control-text .b24-form-control { height: 300px !important; /* Высота */ min-height: 300px !important; /* Минимальная высота */ max-height: 300px !important; /* Максимальная высота */ padding: 44px 20px 20px !important; /* Расположение лейбла сверху */ box-sizing: border-box !important; /* Размер поля */ resize: none !important; /* Возможность изменять размер поля при заполнении */ }
/* Лейбл в текстовом поле */ .b24-form-control-text .b24-form-control-label, .b24-form-control-text .b24-form-control:focus + .b24-form-control-label, .b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { top: 16px !important; /* Расположение */ left: 20px !important; /* Отступ слева */ right: 20px !important; /* Отступ справа */ transform: none !important; /* Изменение элемента */ font-size: 18px !important; /* Размер шрифта */ line-height: 1.2 !important; /* Межстрочный интервал */ opacity: 1 !important; /* Прозрачность */ padding: 0 !important; /* Внутренние отступы */ }
Активные элементы. Чтобы пользователь понимал, в каком месте формы он находится, сделайте выбранные элементы заметнее. При наведении курсора или переходе с клавиатуры к полю, чекбоксу или крестику в окне согласия они будут выделяться ярче.
/* Обводка поля при наведении или фокусе с клавиатуры */ .b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), .b24-form-control-text .b24-form-control:focus:not([readonly]), .b24-form-control-select .field-item:focus:not([readonly]) { border-color: #000000 !important; /* Цвет обводки */ outline: 5px solid #636363 !important; /* Толщина обводки */ outline-offset: 5px !important; }
/* Дополнительная обводка кнопки «Отправить» при фокусе с клавиатуры */ .b24-form-btn:focus-visible { outline: 5px solid #000 !important; /* Цвет и толщина обводки */ outline-offset: 5px !important; }
/* Обводка чекбоксов при фокусе с клавиатуры */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 5px solid #000 !important; /* Цвет и толщина обводки */ outline-offset: 5px !important; }
/* Иконка закрытия в согласии */ .b24-window-close { background-color: #000 !important; /* Цвет фона */ }
/* Иконка закрытия в согласии */ .b24-window-close::after, .b24-window-close::before { background-color: #000 !important; /* Цвет крестика */ }
Слева — стандартная форма Битрикс24, справа — после настройки с помощью CSS
Коротко
- Формы в Битрикс24 создают и настраивают во встроенном редакторе. Если стандартных параметров недостаточно, дизайн формы можно изменить с помощью CSS.
- Стили CSS позволяют адаптировать форму под разные задачи. Например, изменить высоту поля, размер и цвет шрифта, сделать активные элементы заметнее при наведении курсора или перехода к ним с клавиатуры.
- Вы можете настраивать собственные стили CSS, используя селекторы из статьи. Чтобы изменения применились, добавьте
!importantк каждому свойству — стандартные стили Битрикс24 имеют более высокий приоритет.
Рекомендуем прочитать: