Alinear checkboxes y radios horizontales en formularios Divi

Si alguna vez has intentado diseñar un formulario de contacto en Divi y te has encontrado con una lista de checkboxes apilados uno encima del otro ocupando media pantalla, ya sé exactamente lo que sentiste. Los checkboxes horizontales en formularios Divi es un problema real que afecta el diseño visual y la experiencia del usuario al mismo tiempo. Por defecto, Divi muestra los campos de tipo checkbox y botón de radio en columna vertical, lo cual tiene sentido para listas largas, pero se convierte en un desperdicio enorme de espacio cuando solo tienes tres o cuatro opciones.

En este tutorial te muestro cómo alinearlos horizontalmente — ya sea en fila corrida o en columnas distribuidas — usando dos clases CSS y un snippet que aplicas en minutos. Sin plugins extra, sin hacks raros. Solo CSS limpio que funciona.

¿Por qué los checkboxes en Divi ocupan tanto espacio vertical?

El módulo de formulario de contacto de Divi renderiza cada opción de checkbox o radio como un elemento de bloque (display: block). Eso hace que cada opción ocupe su propia línea completa, independientemente de cuánto texto tenga. Si tienes un campo con cuatro opciones cortas como "Diseño", "Desarrollo", "Consultoría" y "Formación", el formulario se extiende verticalmente por cuatro filas cuando podría resolverse en una sola fila o dos columnas compactas.

El problema no es estético únicamente. Un formulario largo desalienta al usuario. Cada scroll adicional que alguien tiene que hacer en un formulario aumenta la probabilidad de abandono, especialmente en móvil. Así que alinear los checkboxes horizontalmente no es solo una cuestión de diseño — también mejora la tasa de conversión del formulario.

Consejo: Si tienes más de seis opciones, considera dividirlas en dos campos separados o usar un desplegable. El layout en columnas funciona mejor con 3 a 6 opciones — con más de eso, la legibilidad cae aunque el espacio mejore.

Paso 1: configura el módulo de formulario en Divi

Antes de escribir una línea de CSS, el formulario tiene que estar bien construido. Abre el módulo de formulario de contacto en el editor de Divi y agrega tus campos de tipo checkbox o radio. Hay un detalle que no puedes pasar por alto: activa la opción de anchura completa para el campo. Esto es lo que permite que el CSS de columnas funcione correctamente después.

Si el campo no tiene anchura completa activada, los span de cada opción quedarán confinados dentro de un contenedor más pequeño y el layout se romperá. Actívalo desde la configuración del campo en el constructor del módulo.

Consejo: Puedes aplicar este truco a campos de checkbox y de radio button por igual. El selector CSS que vamos a usar apunta al elemento .et_pb_contact_field_options_list span, que es el que Divi usa para ambos tipos de campo.

Paso 2: agrega las clases CSS al módulo

Con el módulo seleccionado, ve a la pestaña Avanzado y busca el campo Clases CSS. Escribe ahí las dos clases siguientes separadas por espacio:

checkboxes-radio-buttons-inline checkboxes-radio-buttons-columns

La primera clase (checkboxes-radio-buttons-inline) controla el comportamiento de los span individuales — los convierte en elementos inline para que fluyan horizontalmente. La segunda clase (checkboxes-radio-buttons-columns) activa el layout de columnas usando flexbox. Puedes usar solo la primera si quieres una fila corrida, o las dos juntas si prefieres distribuirlos en columnas de ancho controlado.

Paso 3: aplica el snippet CSS

El CSS que necesitas tiene dos bloques. El primero alinea los span en modo inline con separación entre ellos. El segundo activa el layout de columnas flexible:

.checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
  display: inline-block;
  margin-right: 30px;
}

.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
  display: flex;
  flex-flow: row wrap;
}

.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list span {
  flex-basis: 40%;
}

La clave está en el valor de flex-basis. Ese porcentaje determina cuánto espacio ocupa cada opción dentro del contenedor flex, y en consecuencia, cuántas columnas aparecen por fila.

Tabla de columnas según flex-basis

Ajusta el valor según las opciones de tu campo específico. Lo ideal es probar en el editor, ver cómo se distribuyen visualmente y ajustar hasta que el layout se vea limpio en el viewport que más te importa.

🎓 ¿Quieres dominar los formularios y el CSS en Divi de forma completa?
En uxdivi.com/cursos tenemos contenido premium donde cubrimos el módulo de formulario de contacto de Divi en profundidad — desde configuración básica hasta personalización avanzada con CSS. Accede como suscriptor y aplica estos flujos en tus proyectos reales.

Dónde colocar el CSS: tema vs. página específica

Tienes dos opciones principales para insertar este snippet, y cada una tiene su lógica.

CSS del tema (aplica en todo el sitio)

Ve a Apariencia → Personalizar → CSS adicional en WordPress. Pega el snippet ahí. Esta opción funciona si usas los mismos checkboxes horizontales en varios formularios de tu sitio — no tienes que repetir el CSS en cada página. Mientras uses las clases correctas en el módulo, el CSS aplica automáticamente. Si te interesa aprender a personalizar formularios de contacto de Divi con más control, este es el punto de partida.

CSS específico de página (solo donde lo necesitas)

Si el formulario con checkboxes horizontales existe solo en una página concreta y no quieres cargar ese CSS en todo el sitio, usa un módulo de código de Divi dentro de la misma página. Coloca el snippet dentro de etiquetas

Este enfoque es útil cuando tienes una landing page de ventas o una página de cotización donde el formulario necesita un diseño muy específico que no aplica en ningún otro lugar del sitio.

Aplicar el layout solo en ciertos dispositivos

Un caso de uso que me preguntan con frecuencia: "¿puedo hacer que los checkboxes sean horizontales en desktop pero verticales en móvil?" La respuesta es sí, y la forma más limpia de lograrlo es usando un módulo de código con @media queries dentro del snippet.

Por ejemplo, si quieres que el layout en columnas aplique solo en pantallas mayores a 768px y que en móvil vuelva al comportamiento vertical por defecto:

@media (min-width: 769px) {
  .checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
    display: inline-block;
    margin-right: 30px;
  }

  .checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
    display: flex;
    flex-flow: row wrap;
  }

  .checkboxes-radio-buttons-columns .et_pb_contact_field_options_list span {
    flex-basis: 40%;
  }
}