Os formulários no Bitrix24 são criados e configurados no editor integrado. Se as opções padrão não forem suficientes, a aparência do formulário pode ser modificada com CSS. Por exemplo, é possível alterar o tamanho da fonte, a cor do texto e do fundo, o design dos botões, ajustar a borda e o arredondamento dos campos. Isso ajuda a adaptar o formulário ao design do projeto e a torná-lo mais conveniente para os usuários.

Para personalizar um formulário de CRM, adicione estilos CSS na página onde ele está inserido. Isso pode ser feito de duas maneiras:

• alterar o arquivo CSS vinculado à página;
• abrir a página no modo de edição de código e adicionar os estilos no bloco <style> antes do código do formulário.

O texto entre as tags /* e */ são comentários que ajudam a se orientar no código e não afetam a aparência do formulário de CRM. Eles podem ser mantidos ou removidos.

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Como adaptar o formulário ao design do projeto

Com CSS, alinhe o formulário de CRM ao design do site: ajuste cores, fontes e o estilo dos campos e botões de acordo com o estilo geral da página. Assim, o formulário terá uma aparência consistente com o resto da interface, sem contraste visual.

Largura do formulário. Defina a largura máxima do formulário para exibição correta em diferentes dispositivos.

 /* Largura do formulário */ .b24-form-wrapper { min-height: 250px !important; max-width: 540px !important; } 

Fonte do formulário. Defina uma fonte uniforme para todos os elementos do formulário.

 /* Fonte do formulário */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; } 

Título e subtítulo do formulário. Altere o tamanho, o peso e a cor da fonte, o espaçamento entre linhas e a margem após o título.

 /* Título do formulário */ .b24-form-header-title { font-size: 25px !important; /* Tamanho da fonte */ line-height: 38px !important; /* Espaçamento entre linhas */ margin-top: 60px !important; /* Margem superior */ margin-bottom: 10px !important; /* Margem inferior */ font-weight: 700 !important; /* Peso da fonte */ } /* Subtítulo do formulário */ .b24-form-header-description { font-size: 16px !important; /* Tamanho da fonte */ line-height: 26px !important; /* Espaçamento entre linhas */ color: #4b5563 !important; /* Cor do subtítulo */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Aparência do campo. Ajuste a altura, a cor de fundo e da borda. O CSS alterará os parâmetros de todos os campos do formulário.

 /* Parâmetros do campo */ .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; /* Altura do campo */ background-color: #FAFBFC !important; /* Cor de fundo */ padding-left: 16px !important; /* Espaçamento interno à esquerda antes do texto */ padding-right: 16px !important; /* Espaçamento interno à direita após o texto */ border: 1px solid #c9d2dd !important; /* Espessura da borda */ border-color: #E2E2E2 !important; /* Cor da borda */ border-radius: 12px !important; /* Arredondamento da borda */ } 

Rótulo do campo - altere a cor, o tamanho e os espaçamentos do rótulo para que corresponda ao estilo do site.

Para diferentes estados do campo - padrão, em foco e após preenchimento - é possível definir parâmetros específicos. Por exemplo, ajustar o tamanho ou a posição do rótulo.

 /* Rótulo do campo */ .b24-form-control-label { font-size: 16px !important; /* Tamanho do rótulo do campo */ line-height: 52px !important; /* Altura do campo para entrada de texto */ color: #525C69 !important; /* Cor do texto do rótulo */ opacity: 1 !important; /* Opacidade do texto */ padding-left: 16px !important; /* Espaçamento interno à esquerda antes do rótulo do campo */ padding-right: 16px !important; /* Espaçamento interno à direita após o rótulo do campo */ } /* Rótulo quando o campo está em foco ou preenchido */ .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; /* Tamanho do rótulo do campo */ top: -10px !important; /* Posição do rótulo do campo */ color: #525C69 !important; /* Cor */ background: transparent !important; /* Remove a cor de fundo, se houver */ padding-left: 14px !important; /* Espaçamento interno à esquerda antes do rótulo do campo */ padding-right: 12px !important; /* Espaçamento interno à direita após o rótulo do campo */ } 

Texto no campo. Especifique o tamanho e a cor da fonte que o usuário digitará.

 /* Texto no campo */ .b24-form-control { font-size: 16px !important; /* Tamanho da fonte */ color: #000000 !important; /* Cor do texto */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Campo de lista. Defina o tamanho da fonte na lista suspensa para que corresponda ao estilo dos outros campos do formulário. Ajuste os elementos de controle: o "x" para remover a opção e o ícone de abertura da lista.

 /* Tamanho da fonte das opções na lista */ .b24-form-control-list-selector-item-title { font-size: 16px !important; } /* Ícone "x" no campo de lista suspensa */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Altura */ top: 4px !important; /* Posição */ } /* Campo */ .b24-form-control-list .b24-form-icon-remove { height: 60px !important; /* Altura */ right: 50px !important; /* Deslocamento do elemento a partir da borda direita */ } /* Ícone de abertura da lista */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Altura */ width: 12px !important; /* Largura do elemento */ top: 26px !important; /* Posição */ right: 20px !important; /* Deslocamento do elemento a partir da borda direita */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Caixas de seleção (checkboxes) de consentimento. Configure o estilo das caixas de seleção e do texto de consentimento de acordo com o design do site: altere tamanhos, espaçamentos e a cor dos elementos.

 /* Tamanho do checkbox */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 20px; /* Largura do checkbox */ height: 20px; /* Altura do checkbox */ } /* Espaçamento entre linhas no texto de consentimento */ .b24-form-control-desc { font-size: 14px !important; line-height: 1.45 !important; } /* Tamanho da fonte no texto de consentimento */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 14px !important; } /* Margem após o consentimento */ .b24-form-btn-container { margin-top: 24px !important; } 

Botões. Altere o estilo dos botões: cor, fonte, tamanho e assim por diante.

 /* Parâmetros do botão */ .b24-form-btn { background: #10B769 !important; /* Cor de fundo do botão */ color: #fff !important; /* Cor da fonte do botão */ font-weight: 400 !important; /* Peso da fonte */ font-size: 16px !important; /* Tamanho da fonte do botão */ height: 62px !important; /* Altura do botão */ border: 1px solid #10B769 !important; /* Borda do botão */ border-radius: 12px !important; /* Arredondamento dos cantos */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Formulários de várias páginas. Ajuste a exibição do número e do título da página, e o campo Comentário.

 /* Número da página */ .b24-form-progress-bar-counter { font-size: 14px !important; /* Tamanho da fonte */ top: 46% !important; /* Posição */ } /* Título da página */ .b24-form-progress-bar-title { font-size: 18px !important; /* Tamanho da fonte */ } /* Campo "Comentário" */ .b24-form-control-text .b24-form-control { height: 190px !important; /* Altura */ min-height: 190px !important; /* Altura mínima */ max-height: 190px !important; /* Altura máxima */ padding: 34px 16px 16px !important; /* Posição do rótulo no topo */ box-sizing: border-box !important; /* Dimensionamento do campo */ resize: none !important; /* Impede o redimensionamento do campo durante o preenchimento */ } /* Rótulo no campo de texto */ .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; /* Posição */ left: 16px !important; /* Margem esquerda */ right: 16px !important; /* Margem direita */ transform: none !important; /* Transformação do elemento */ font-size: 13px !important; /* Tamanho da fonte */ line-height: 1.2 !important; /* Espaçamento entre linhas */ opacity: 1 !important; /* Opacidade */ padding: 0 !important; /* Espaçamento interno */ } 

Elementos ativos. Altere a cor e o estilo dos campos, caixas de seleção e botões ao passar o mouse ou ao receber foco do teclado, para que correspondam ao estilo do site e ao design geral do formulário.

 /* Borda do campo ao passar o mouse ou ao receber foco do teclado */ .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; /* Cor da borda */ outline: 3px solid #bcdcff !important; /* Espessura do contorno */ outline-offset: 2px !important; } /* Borda do botão "Enviar" ao receber foco do teclado */ .b24-form-btn:focus-visible { outline: 3px solid #1f2937 !important; /* Cor e espessura do contorno */ outline-offset: 2px !important; } /* Borda das caixas de seleção ao receber foco do teclado */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 3px solid #1f2937 !important; /* Cor e espessura do contorno */ outline-offset: 2px !important; } /* Ícone de fechar na janela de consentimento */ .b24-window-close { background-color: #005def !important; /* Cor de fundo */ } /* Ícone de fechar na janela de consentimento */ .b24-window-close::after, .b24-window-close::before { background-color: #000000 !important; /* Cor do "x" */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Como melhorar a acessibilidade e a legibilidade do formulário

Vamos detalhar a configuração usando o exemplo de adaptação do formulário para pessoas com deficiência visual e características de percepção de texto. Mostraremos como alterar parâmetros que afetam a legibilidade e a percepção da interface. Essas alterações atendem aos requisitos do padrão russo GOST R 52872-2019 para acessibilidade de recursos digitais.

Fonte do formulário. Defina uma fonte uniforme para todos os elementos do formulário.

 /* Fonte do formulário */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; } 

Título e subtítulo do formulário. Aumente o tamanho da fonte, o espaçamento entre linhas e a margem após o título para tornar o texto mais legível.

 /* Título do formulário */ .b24-form-header-title { font-size: 38px !important; /* Tamanho da fonte */ line-height: 60px !important; /* Espaçamento entre linhas */ margin-top: 60px !important; /* Margem superior */ margin-bottom: 20px !important; /* Margem inferior */ } /* Subtítulo do formulário */ .b24-form-header-description { font-size: 30px !important; /* Tamanho da fonte */ line-height: 36px !important; /* Espaçamento entre linhas */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Aparência do campo. Aumente a altura, mude a cor de fundo para branco e adicione uma borda preta. Isso permitirá usar uma fonte maior e garantirá um contraste nítido dos elementos. O CSS alterará os parâmetros de todos os campos do formulário.

 /* Parâmetros do campo */ .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; /* Altura do campo */ background-color: #fff !important; /* Cor de fundo */ padding-left: 20px !important; /* Espaçamento interno à esquerda antes do texto */ padding-right: 20px !important; /* Espaçamento interno à direita após o texto */ border: 2px solid #A8ADB4 !important; /* Espessura da borda */ border-color: #A8ADB4 !important; /* Cor da borda */ border-radius: 20px !important; /* Arredondamento da borda */ } 

Rótulo do campo - configure os parâmetros que mudarão de acordo com as ações do usuário. Por padrão, use uma fonte grande e escura: assim o rótulo é mais fácil de ler e entender qual informação deve ser inserida.

Para o campo em foco ou após o preenchimento, o tamanho do rótulo pode ser reduzido para que não se sobreponha ao texto do usuário.

 /* Rótulo do campo */ .b24-form-control-label { font-size: 30px !important; /* Tamanho do rótulo do campo */ line-height: 100px !important; /* Altura do campo para entrada de texto */ color: #000 !important; /* Cor do texto do rótulo */ opacity: 1 !important; /* Opacidade do texto */ padding-left: 20px !important; /* Espaçamento interno à esquerda antes do rótulo do campo */ padding-right: 20px !important; /* Espaçamento interno à direita após o rótulo do campo */ } /* Rótulo quando o campo está em foco ou preenchido */ .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; /* Tamanho do rótulo do campo */ top: -24px !important; /* Posição do rótulo do campo */ padding-left: 20px !important; /* Espaçamento interno à esquerda antes do rótulo do campo */ padding-right: 20px !important; /* Espaçamento interno à direita após o rótulo do campo */ } 

Texto no campo. Especifique o tamanho e a cor da fonte que o usuário digitará. O texto deve ser grande e bem destacado no fundo do campo.

 /* Texto no campo */ .b24-form-control { font-size: 30px !important; /* Tamanho da fonte */ color: #000000 !important; /* Cor do texto */ padding-top: 24px !important; /* Espaçamento interno superior */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Campo de lista. Defina o tamanho da fonte na lista suspensa para que o usuário possa ler e escolher o item desejado com mais facilidade. Por exemplo, o programa de uma excursão.

 /* Tamanho da fonte das opções na lista */ .b24-form-control-list-selector-item-title { font-size: 25px !important; } /* Ícone "x" no campo de lista suspensa */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Altura */ top: 30px !important; /* Posição */ } /* Campo */ .b24-form-control-list .b24-form-icon-remove { height: 100px !important; /* Altura */ right: 50px !important; /* Deslocamento do elemento a partir da borda direita */ } /* Ícone de abertura da lista */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Altura */ width: 12px !important; /* Largura do elemento */ top: 45px !important; /* Posição */ right: 20px !important; /* Deslocamento do elemento a partir da borda direita */ } 

À esquerda - campo de lista padrão, à direita - após a personalização com CSS

Caixas de seleção (checkboxes) de consentimento. Aumente o tamanho das caixas de seleção onde os usuários farão suas escolhas. Por exemplo, concordar com o processamento de dados pessoais ou confirmar que leram os termos de entrega.

 /* Tamanho do checkbox */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 28px; /* Largura do checkbox */ height: 28px; /* Altura do checkbox */ } /* Espaçamento entre linhas no texto de consentimento */ .b24-form-control-desc { font-size: 25px !important; } /* Tamanho da fonte no texto de consentimento */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 25px !important; } /* Margem após o consentimento */ .b24-form-btn-container { margin-top: 40px !important; } 

Botões. Altere o estilo dos botões: cor, fonte, tamanho e assim por diante. Torne-os mais contrastantes para a conveniência dos usuários.

 /* Parâmetros do botão */ .b24-form-btn { background: #000000 !important; /* Cor de fundo do botão */ color: #fff !important; /* Cor da fonte do botão */ font-size: 32px !important; /* Tamanho da fonte do botão */ height: 100px !important; /* Altura do botão */ border: 20px solid #000000 !important; /* Borda do botão */ border-radius: 20px !important; /* Arredondamento dos cantos */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS

Formulários de várias páginas. Ajuste a exibição do número e do título da página, e o campo Comentário.

 /* Número da página */ .b24-form-progress-bar-counter { font-size: 20px !important; /* Tamanho da fonte */ top: 46% !important; /* Posição */ } /* Título da página */ .b24-form-progress-bar-title { font-size: 28px !important; /* Tamanho da fonte */ } /* Campo "Comentário" */ .b24-form-control-text .b24-form-control { height: 300px !important; /* Altura */ min-height: 300px !important; /* Altura mínima */ max-height: 300px !important; /* Altura máxima */ padding: 44px 20px 20px !important; /* Posição do rótulo no topo */ box-sizing: border-box !important; /* Dimensionamento do campo */ resize: none !important; /* Impede o redimensionamento do campo durante o preenchimento */ } /* Rótulo no campo de texto */ .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; /* Posição */ left: 20px !important; /* Margem esquerda */ right: 20px !important; /* Margem direita */ transform: none !important; /* Transformação do elemento */ font-size: 18px !important; /* Tamanho da fonte */ line-height: 1.2 !important; /* Espaçamento entre linhas */ opacity: 1 !important; /* Opacidade */ padding: 0 !important; /* Espaçamento interno */ } 

Elementos ativos. Para que o usuário entenda em qual parte do formulário ele está, torne os elementos selecionados mais visíveis. Ao passar o mouse ou ao mudar para um campo, caixa de seleção ou "x" na janela de consentimento com o teclado, eles serão destacados mais intensamente.

 /* Borda do campo ao passar o mouse ou ao receber foco do teclado */ .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; /* Cor da borda */ outline: 5px solid #636363 !important; /* Espessura do contorno */ outline-offset: 5px !important; } /* Borda adicional do botão "Enviar" ao receber foco do teclado */ .b24-form-btn:focus-visible { outline: 5px solid #000 !important; /* Cor e espessura do contorno */ outline-offset: 5px !important; } /* Borda das caixas de seleção ao receber foco do teclado */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 5px solid #000 !important; /* Cor e espessura do contorno */ outline-offset: 5px !important; } /* Ícone de fechar na janela de consentimento */ .b24-window-close { background-color: #000 !important; /* Cor de fundo */ } /* Ícone de fechar na janela de consentimento */ .b24-window-close::after, .b24-window-close::before { background-color: #000 !important; /* Cor do "x" */ } 

À esquerda - formulário padrão do Bitrix24, à direita - após a personalização com CSS