Los formularios en Bitrix24 se crean y configuran en el editor integrado. Si los parámetros estándar no son suficientes, puedes modificar el aspecto del formulario con CSS. Por ejemplo, puedes cambiar el tamaño de la fuente, el color del texto y del fondo, el diseño de los botones, ajustar el borde y el redondeo de los campos. Esto ayuda a adaptar el formulario al diseño del proyecto y a hacerlo más cómodo para los usuarios.
- adaptar el formulario al diseño del proyecto,
- mejorar la accesibilidad y legibilidad del formulario.
Para colocar el formulario en un sitio web de terceros, revisa el artículo Colocar un formulario de CRM en el sitio web de terceros.
Para modificar un formulario del CRM, añade estilos CSS en la página donde está ubicado. Esto se puede hacer de dos maneras:
- modificar el archivo CSS vinculado a la página,
- abrir la página en modo de edición de código y añadir los estilos en el bloque
<style>antes del código del formulario.
El texto entre las etiquetas /* y */ son comentarios que ayudan a orientarse en el código y no afectan el aspecto visual del formulario del CRM. Puedes dejarlos o eliminarlos.
!important a cada propiedad: los estilos estándar de Bitrix24 tienen mayor prioridad. 
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Cómo adaptar el formulario al diseño del proyecto
Con CSS, puedes ajustar el formulario del CRM al diseño del sitio web: configura colores, fuentes y el estilo de los campos y botones para que coincidan con el estilo general de la página. Así, el formulario se verá coherente con el resto de la interfaz, sin contraste visual.
Ancho del formulario. Configura el ancho máximo del formulario para que se muestre correctamente en diferentes dispositivos.
/* Ancho del formulario */ .b24-form-wrapper { min-height: 250px !important; max-width: 540px !important; }
Fuente del formulario. Establece una fuente unificada para todos los elementos del formulario.
/* Fuente del formulario */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; }
Título y subtítulo del formulario. Cambia el tamaño, el grosor y el color de la fuente, el interlineado y el margen después del título.
/* Título del formulario */ .b24-form-header-title { font-size: 25px !important; /* Tamaño de la fuente */ line-height: 38px !important; /* Interlineado */ margin-top: 60px !important; /* Margen superior */ margin-bottom: 10px !important; /* Margen inferior */ font-weight: 700 !important; /* Grosor de la fuente */ }
/* Subtítulo del formulario */ .b24-form-header-description { font-size: 16px !important; /* Tamaño de la fuente */ line-height: 26px !important; /* Interlineado */ color: #4b5563 !important; /* Color del subtítulo */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS
Apariencia del campo. Configura la altura, el color de fondo y el borde. El CSS cambiará los parámetros de todos los campos del formulario.
/* Parámetros del 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 del campo */ background-color: #FAFBFC !important; /* Color de fondo */ padding-left: 16px !important; /* Margen izquierdo */ padding-right: 16px !important; /* Margen derecho */ border: 1px solid #c9d2dd !important; /* Grosor del borde */ border-color: #E2E2E2 !important; /* Color del borde */ border-radius: 12px !important; /* Redondeo del borde */ }
Nombre del campo. Cambia el color, tamaño y márgenes de la etiqueta para que coincida con el estilo del sitio web.
Para diferentes estados del campo (por defecto, al enfocar o después de completar), puedes establecer parámetros separados. Por ejemplo, ajustar el tamaño o la posición del nombre.
/* Nombre del campo */ .b24-form-control-label { font-size: 16px !important; /* Tamaño del nombre */ line-height: 52px !important; /* Altura del campo de texto */ color: #525C69 !important; /* Color del texto */ opacity: 1 !important; /* Opacidad del texto */ padding-left: 16px !important; /* Margen izquierdo */ padding-right: 16px !important; /* Margen derecho */ }
/* Nombre cuando el campo está enfocado o completado */ .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; /* Tamaño del nombre */ top: -10px !important; /* Posición del nombre */ color: #525C69 !important; /* Color */ background: transparent !important; /* o simplemente elimina el color de fondo */ padding-left: 14px !important; /* Margen izquierdo */ padding-right: 12px !important; /* Margen derecho */ }
Texto en el campo. Especifica el tamaño y color de la fuente que el usuario ingresará.
/* Texto en el campo */ .b24-form-control { font-size: 16px !important; /* Tamaño de la fuente */ color: #000000 !important; /* Color del texto */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS
Campo de lista. Establece el tamaño de la fuente en la lista desplegable para que coincida con el diseño de los demás campos del formulario. Configura los elementos de control: el icono para eliminar una opción y el icono para abrir la lista.
/* Tamaño de la fuente de las opciones en la lista */ .b24-form-control-list-selector-item-title { font-size: 16px !important; }
/* Icono de eliminación en la lista desplegable */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Altura */ top: 4px !important; /* Posición */ }
/* Campo */ .b24-form-control-list .b24-form-icon-remove { height: 60px !important; /* Altura */ right: 50px !important; /* Desplazamiento desde el borde derecho */ }
/* Icono para abrir la lista */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Altura */ width: 12px !important; /* Ancho */ top: 26px !important; /* Posición */ right: 20px !important; /* Desplazamiento desde el borde derecho */ }
A la izquierda: campo de lista estándar de Bitrix24; a la derecha: campo personalizado con CSS.
Acuerdos. Configure el diseño de las casillas de verificación y el texto de los acuerdos según el diseño del sitio web: cambie los tamaños, márgenes y colores de los elementos.
/* Tamaño de la casilla de verificación */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 20px; /* Ancho de la casilla */ height: 20px; /* Altura de la casilla */ }
/* Interlineado en el texto del acuerdo */ .b24-form-control-desc { font-size: 14px !important; line-height: 1.45 !important; }
/* Tamaño de la fuente en el texto del acuerdo */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 14px !important; }
/* Margen después del acuerdo */ .b24-form-btn-container { margin-top: 24px !important; }
Botones. Cambie el diseño de los botones: color, fuente, tamaño, etc.
/* Parámetros del botón */ .b24-form-btn { background: #10B769 !important; /* Color de fondo del botón */ color: #fff !important; /* Color de la fuente del botón */ font-weight: 400 !important;/* Grosor de la fuente */ font-size: 16px !important; /* Tamaño de la fuente del botón */ height: 62px !important; /* Altura del botón */ border: 1px solid #10B769 !important; /* Borde del botón */ border-radius: 12px !important; /* Redondeo de esquinas */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Formularios multipágina. Configure la visualización del número y nombre de la página, el campo Comentario.
/* Número de página */ .b24-form-progress-bar-counter { font-size: 14px !important; /* Tamaño de la fuente */ top: 46% !important; /* Posición */ }
/* Nombre de la página */ .b24-form-progress-bar-title { font-size: 18px !important; /* Tamaño de la fuente */ }
/* Campo "Comentario" */ .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; /* Posición de la etiqueta arriba */ box-sizing: border-box !important; /* Tamaño del campo */ resize: none !important; /* Posibilidad de cambiar el tamaño del campo al llenarlo */ }
/* Etiqueta en el 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; /* Posición */ left: 16px !important; /* Margen izquierdo */ right: 16px !important; /* Margen derecho */ transform: none !important; /* Cambio del elemento */ font-size: 13px !important; /* Tamaño de la fuente */ line-height: 1.2 !important; /* Interlineado */ opacity: 1 !important; /* Opacidad */ padding: 0 !important; /* Márgenes internos */ }
Elementos activos. Cambie el color y diseño de los campos, casillas de verificación y botones al pasar el cursor o enfocar con el teclado, para que coincidan con el estilo del sitio y el diseño general del formulario.
/* Borde del campo al pasar el cursor o enfocar con el 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; /* Color del borde */ outline: 3px solid #bcdcff !important; /* Grosor del borde */ outline-offset: 2px !important; }
/* Borde del botón "Enviar" al enfocar con el teclado */ .b24-form-btn:focus-visible { outline: 3px solid #1f2937 !important; /* Color y grosor del borde */ outline-offset: 2px !important; }
/* Borde de las casillas de verificación al enfocar con el teclado */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 3px solid #1f2937 !important; /* Color y grosor del borde */ outline-offset: 2px !important; }
/* Icono de cierre en el acuerdo */ .b24-window-close { background-color: #005def !important; /* Color de fondo */ }
/* Icono de cierre en el acuerdo */ .b24-window-close::after, .b24-window-close::before { background-color: #000000 !important; /* Color de la cruz */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Cómo mejorar la accesibilidad y legibilidad del formulario
Analicemos la configuración usando como ejemplo la adaptación del formulario para personas con discapacidad visual o dificultades de percepción del texto. Explicaremos cómo cambiar los parámetros que afectan la legibilidad y la percepción de la interfaz. Estos cambios cumplen con los requisitos de la norma GOST R 52872-2019 sobre accesibilidad de recursos digitales.
Fuente del formulario. Establezca una fuente unificada para todos los elementos del formulario.
/* Fuente del formulario */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; }
Título y subtítulo del formulario. Aumente el tamaño de la fuente, el interlineado y el margen después del título para hacer el texto más legible.
/* Título del formulario */ .b24-form-header-title { font-size: 38px !important; /* Tamaño de la fuente */ line-height: 60px !important; /* Interlineado */ margin-top: 60px !important; /* Margen después del título */ margin-bottom: 20px !important; /* Margen después del título */ }
/* Subtítulo del formulario */ .b24-form-header-description { font-size: 30px !important; /* Tamaño de la fuente */ line-height: 36px !important; /* Interlineado */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Apariencia del campo. Aumente la altura, cambie el color de fondo a blanco y agregue un borde negro. Esto permitirá usar una fuente más grande y garantizará un contraste claro entre los elementos. El CSS cambiará los parámetros de todos los campos del formulario.
/* Parámetros del 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 del campo */ background-color: #fff !important; /* Color de fondo */ padding-left: 20px !important; /* Margen izquierdo antes del texto */ padding-right: 20px !important; /* Margen derecho después del texto */ border: 2px solid #A8ADB4 !important; /* Grosor del borde */ border-color: #A8ADB4 !important; /* Color del borde */ border-radius: 20px !important; /* Redondeo del borde */ }
Nombre del campo. Configure los parámetros que cambiarán según las acciones del usuario. Use una fuente grande y de color oscuro por defecto: así el nombre será más fácil de leer y entender qué información se debe ingresar.
Para un campo enfocado o completado, puede reducir el tamaño del nombre para que no cubra el texto del usuario.
/* Nombre del campo */ .b24-form-control-label { font-size: 30px !important; /* Tamaño del nombre del campo */ line-height: 100px !important; /* Altura del campo para ingresar texto */ color: #000 !important; /* Color del texto en el nombre */ opacity: 1 !important; /* Opacidad del texto */ padding-left: 20px !important; /* Margen izquierdo antes del nombre del campo */ padding-right: 20px !important; /* Margen derecho después del nombre del campo */ }
/* Nombre cuando el campo está enfocado o completado */ .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; /* Tamaño del nombre del campo */ top: -24px !important; /* Posición del nombre del campo */ padding-left: 20px !important; /* Margen izquierdo antes del nombre del campo */ padding-right: 20px !important; /* Margen derecho después del nombre del campo */ }
Texto en el campo. Especifique el tamaño y color de la fuente que el usuario ingresará. El texto debe ser grande y destacar claramente sobre el fondo del campo.
/* Texto en el campo */ .b24-form-control { font-size: 30px !important; /* Tamaño de la fuente */ color: #000000 !important; /* Color del texto */ padding-top: 24px !important; /* Margen */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Campo de lista. Establezca el tamaño de la fuente en la lista desplegable para que el usuario pueda leer y seleccionar fácilmente la opción deseada, como el programa de una excursión.
/* Tamaño de la fuente de las opciones en la lista */ .b24-form-control-list-selector-item-title { font-size: 25px !important; }
/* Cruz en el campo de la lista desplegable */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; /* Altura */ top: 30px !important; /* Posición */ }
/* Campo */ .b24-form-control-list .b24-form-icon-remove { height: 100px !important; /* Altura */ right: 50px !important; /* Desplazamiento del elemento desde el borde derecho */ }
/* Icono para abrir la lista */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; /* Altura */ width: 12px !important; /* Ancho del elemento */ top: 45px !important; /* Posición */ right: 20px !important; /* Desplazamiento del elemento desde el borde derecho */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Acuerdos. Aumente el tamaño de las casillas de verificación donde los usuarios marcarán su elección. Por ejemplo, para aceptar el procesamiento de datos personales o confirmar que han leído los términos de entrega.
/* Tamaño de la casilla de verificación */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 28px; /* Ancho de la casilla */ height: 28px; /* Altura de la casilla */ }
/* Interlineado en el texto del acuerdo */ .b24-form-control-desc { font-size: 25px !important; }
/* Tamaño de la fuente en el texto del acuerdo */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 25px !important; }
/* Margen después del acuerdo */ .b24-form-btn-container { margin-top: 40px !important; }
Botones. Cambie el diseño de los botones: color, fuente, tamaño, etc. Hágalos más contrastados para mayor comodidad de los usuarios.
/* Parámetros del botón */ .b24-form-btn { background: #000000 !important; /* Color de fondo del botón */ color: #fff !important; /* Color de la fuente del botón */ font-size: 32px !important; /* Tamaño de la fuente del botón */ height: 100px !important; /* Altura del botón */ border: 20px solid #000000 !important; /* Borde del botón */ border-radius: 20px !important; /* Redondeo de esquinas */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Formularios multipágina. Configure la visualización del número y nombre de la página, el campo Comentario.
/* Número de página */ .b24-form-progress-bar-counter { font-size: 20px !important; /* Tamaño de la fuente */ top: 46% !important; /* Posición */ }
/* Nombre de la página */ .b24-form-progress-bar-title { font-size: 28px !important; /* Tamaño de la fuente */ }
/* Campo "Comentario" */ .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; /* Posición de la etiqueta arriba */ box-sizing: border-box !important; /* Tamaño del campo */ resize: none !important; /* Posibilidad de cambiar el tamaño del campo al llenarlo */ }
/* Etiqueta en el 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; /* Posición */ left: 20px !important; /* Margen izquierdo */ right: 20px !important; /* Margen derecho */ transform: none !important; /* Cambio del elemento */ font-size: 18px !important; /* Tamaño de la fuente */ line-height: 1.2 !important; /* Interlineado */ opacity: 1 !important; /* Opacidad */ padding: 0 !important; /* Márgenes internos */ }
Elementos activos. Para que el usuario entienda en qué parte del formulario se encuentra, haga que los elementos seleccionados sean más visibles. Al pasar el cursor o al navegar con el teclado, los campos, casillas de verificación o iconos de cierre en la ventana de acuerdo se destacarán más.
/* Borde del campo al pasar el cursor o enfocar con el 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; /* Color del borde */ outline: 5px solid #636363 !important; /* Grosor del borde */ outline-offset: 5px !important; }
/* Borde adicional del botón "Enviar" al enfocar con el teclado */ .b24-form-btn:focus-visible { outline: 5px solid #000 !important; /* Color y grosor del borde */ outline-offset: 5px !important; }
/* Borde de las casillas de verificación al enfocar con el teclado */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 5px solid #000 !important; /* Color y grosor del borde */ outline-offset: 5px !important; }
/* Icono de cierre en el acuerdo */ .b24-window-close { background-color: #000 !important; /* Color de fondo */ }
/* Icono de cierre en el acuerdo */ .b24-window-close::after, .b24-window-close::before { background-color: #000 !important; /* Color de la cruz */ }
A la izquierda, el formulario estándar de Bitrix24; a la derecha, el formulario tras configurarlo con CSS.
Resumen
- Los formularios en Bitrix24 se crean y configuran en el editor integrado. Si los parámetros estándar no son suficientes, el diseño del formulario se puede cambiar con CSS.
- Los estilos CSS permiten adaptar el formulario a diferentes tareas. Por ejemplo, cambiar la altura del campo, el tamaño y color de la fuente, y hacer que los elementos activos sean más visibles al pasar el cursor o al navegar con el teclado.
- Puede configurar sus propios estilos CSS utilizando los selectores del artículo. Para que los cambios se apliquen, agregue
!importanta cada propiedad: los estilos estándar de Bitrix24 tienen mayor prioridad.
