Формы в Битрикс24 создают и настраивают во встроенном редакторе. Если стандартных параметров недостаточно, внешний вид формы можно изменить с помощью CSS. Например, изменить размер шрифта, цвет текста и фона, оформление кнопок, настроить обводку и скругление полей. Это помогает адаптировать форму под дизайн проекта и сделать ее удобнее для пользователей.

Чтобы изменить CRM-форму, добавьте CSS-стили на странице, где она размещена. Это можно сделать двумя способами.

• изменить подключенный к странице CSS-файл,
• открыть страницу в режиме редактирования кода и добавить стили в блок <style> перед кодом формы.

Текст между тегами /* и */ — это комментарии, которые помогают ориентироваться в коде и не влияют на внешний вид CRM-формы. Их можно оставить или удалить.

Слева — стандартная форма Битрикс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