Формы в Битрикс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: rgb(0, 0, 0) !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: rgb(0, 93, 239) !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: rgb(0, 0, 0) !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: rgb(0, 0, 0) !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

Рекомендуем прочитать:

• Как использовать CSS для сайта и магазина
• Пример работы с кодом CRM-форм