Si diseñas sitios profesionales con Divi 5, los formularios han sido históricamente uno de los puntos más frustrantes del constructor. Opciones inconsistentes entre módulos, sin control real sobre el diseño de radios y checkboxes, y personalizar el estado de foco implicaba inevitablemente meterte en CSS manual. Con esta actualización, todo eso cambió.

Los formularios en Divi 5 recibieron una revisión completa: nuevas opciones organizadas por tipo de campo, modos de edición para pseudoclases como :focus y :checked, presets de campo que se integran con el sistema de diseño, y un módulo nativo para Contact Form 7.

En este post te cuento todo lo que trae esta actualización, paso a paso, para que puedas aplicarlo en tus proyectos desde hoy. Si quieres ver la demo en vivo con ejemplos reales, en el Curso de Divi 5 de UXDivi tenemos una clase con este mismo nombre y un video ampliado que cubre todo esto en detalle.

🎓 ¿Quieres ver todo esto en vivo con proyectos reales?
En el Curso de Divi 5 tenemos una clase dedicada a este tema — con el mismo nombre que este post — donde muestro la configuración completa de formularios paso a paso con ejemplos de proyectos de cliente. Accede como suscriptor y ve el video ampliado con la demo completa.

¿Por qué era necesario actualizar los formularios en Divi 5?

Antes de entrar en las novedades, vale la pena entender de dónde venimos. En las versiones anteriores de Divi, todos los módulos de formulario tenían un único grupo llamado «Field» para personalizar los campos. El problema es que ese grupo era inconsistente: algunas opciones aplicaban a inputs pero no a checkboxes, otras aparecían en unos módulos y no en otros, y cosas básicas como personalizar el texto de los placeholders o controlar el estilo del estado activo simplemente no estaban disponibles en todos lados. El resultado era que, si querías formularios bien diseñados, terminabas rellenando esas lagunas con CSS adicional en cada proyecto.

Con esta actualización, Elegant Themes hizo algo que llevaba tiempo pendiente: limpiar esa inconsistencia de raíz y construir un sistema uniforme que funcione igual en todos los módulos de formulario de Divi 5. Eso, combinado con los Composable Settings de Divi 5, te da un control real sobre el diseño de tus formularios sin salir del visual builder.

Nuevas opciones específicas por tipo de campo: Input, Checkbox y Radio

Grupos de campo separados

El primer cambio importante es estructural. Donde antes había un único grupo «Field», ahora existen tres grupos independientes: uno para Input, uno para Checkbox y otro para Radio. Puede parecer un detalle menor, pero en la práctica hace una diferencia enorme: puedes diseñar cada tipo de campo de forma totalmente independiente, sin que los cambios en un tipo afecten a los otros.

Además, cada uno de estos grupos viene con la suite de diseño completa de Divi 5. No más limitaciones a un puñado de opciones básicas. Ahora tienes acceso a backgrounds, bordes, sombras, espaciado y tipografía completos para cada tipo de campo individualmente.

Opciones de etiqueta y placeholder en cada grupo

Junto a los grupos separados, ahora cada tipo de campo incluye opciones dedicadas para el texto de la etiqueta (label) y el texto del placeholder. Antes, la personalización tipográfica de estos elementos era escasa o inexistente en muchos módulos. Ahora puedes controlar fuente, tamaño, color y espaciado del label y del placeholder de forma independiente, con la misma granularidad que tienes en cualquier otro elemento de Divi 5.

Consejo: Aprovecha las nuevas opciones de placeholder para diferenciarlo visualmente del contenido que escribe el usuario. Un color más suave o una fuente en cursiva mejora la usabilidad sin complicar el diseño general del formulario.

Armonización de opciones en todos los módulos de formulario

Este es quizás el cambio más importante de toda la actualización desde el punto de vista del flujo de trabajo. Antes, cada módulo de formulario en Divi — el módulo de contacto, el de suscripción, el Login Form, entre otros — tenía sus propias opciones de campo y no coincidían entre sí. Había módulos con opciones de foco y otros sin ellas, módulos con personalización de label y otros que no la tenían. Cada uno era su propio universo.

Ahora, todos los módulos de formulario en Divi 5 comparten exactamente el mismo conjunto de opciones para inputs, checkboxes y radios. Esto significa que una vez que aprendes cómo funcionan los nuevos grupos de campo en un módulo, sabes cómo funcionan en todos. Y si tienes un sitio con varios tipos de formularios, puedes asegurarte de que todos tengan un diseño coherente sin hacer malabares entre configuraciones distintas.

Edición de pseudoclases: :focus y :checked en el visual builder

Si usas Divi con regularidad, ya conoces el modo de edición hover: activas el ícono del cursor en el panel de opciones y cualquier cambio que hagas solo aplica cuando el usuario pasa el mouse por encima del elemento. Con esta actualización, ese mismo concepto se extiende a dos nuevas pseudoclases de formulario: :focus y :checked.

Puedes activar el modo de edición de foco y ver exactamente cómo se verá el campo cuando el usuario haga clic en él para escribir. Y puedes activar el modo checked para ver y diseñar cómo lucen los checkboxes o radios cuando están seleccionados. Todo esto desde el visual builder, en tiempo real, sin una sola línea de CSS. Las opciones de foco que existían antes de forma fragmentada en algunos módulos quedaron deprecadas y migradas a este nuevo sistema unificado.

Consejo: Usa el modo :focus para agregar un borde de color de acento o una sombra sutil cuando el usuario activa un campo. Es uno de esos detalles de UX que se notan cuando están bien hechos y se notan aún más cuando faltan. Además es accesibilidad básica para usuarios de teclado.

Presets de campos de formulario en Divi 5

Los presets ya existían en Divi 5 para módulos y para grupos de elementos. Si los has usado sabes lo útiles que son para mantener consistencia de diseño sin repetir configuraciones en cada elemento. Ahora los grupos de campo de formulario también los soportan.

Puedes crear un preset para tus inputs, otro para tus checkboxes y otro para tus radios, y todos los módulos de formulario del sitio adoptarán ese diseño base de forma automática. Si en algún momento decides cambiar el estilo base de tus formularios — el color del borde, el radio de los inputs, el tamaño de los checkboxes — lo cambias una vez en el preset y se propaga a todo el sitio.

Esto se integra perfectamente con el flujo del Sistema de Diseño en Divi 5: variables globales para colores y tipografía, presets para módulos y ahora también para campos de formulario. Todo conectado, todo consistente. Si ya trabajas con presets anidados en Divi 5, la lógica es exactamente la misma: defines el estilo en un lugar y lo heredan todos los elementos que lo usen.

🎓 ¿Quieres aprender más sobre presets y el sistema de diseño en Divi 5?
En uxdivi.com/cursos tenemos contenido premium donde te enseño cómo usar presets, variables globales y el sistema de diseño completo para entregar proyectos de cliente con consistencia y velocidad. Accede como suscriptor y construye sitios que se diseñan solos.

El nuevo módulo de Contact Form 7

Esta es la novedad que más conversación generó en la comunidad, y con razón. Contact Form 7 es uno de los plugins de formularios más usados en WordPress — millones de sitios lo tienen instalado — y hasta ahora integrarlo con el diseño de Divi era un ejercicio de paciencia: o lo dejabas con el estilo por defecto o te metías en CSS personalizado para adaptarlo al diseño del sitio.

Con el nuevo módulo de Contact Form 7 en Divi 5, el proceso es completamente distinto. Seleccionas cuál de tus formularios de CF7 quieres renderizar, y a partir de ahí tienes acceso a todas las nuevas opciones de campo de Divi 5: los grupos de Input, Checkbox y Radio con su suite completa, los modos de edición de pseudoclases, y por supuesto los presets si los tienes configurados. El formulario de CF7 se comporta exactamente como cualquier otro módulo nativo de Divi 5.

Según Elegant Themes, este es el primero de muchos módulos de integración que están por llegar. La idea es cerrar la brecha entre Divi 5 y los plugins más populares del ecosistema WordPress, permitiendo diseñar cualquier formulario desde el visual builder. Para los que usamos Gravity Forms o WPForms para formularios más complejos, este módulo de CF7 es una señal clara de que ese tipo de integraciones van a ir llegando. Para el flujo específico de crear un formulario de presupuesto profesional en Divi, por ejemplo, este tipo de módulos van a cambiar mucho el proceso.

Consejo: Si tienes sitios actuales con Contact Form 7, no necesitas migrar tus formularios a otro plugin. Con el nuevo módulo puedes dejar CF7 exactamente como está y controlar toda la presentación visual desde Divi 5. Menos trabajo, mismo resultado.

El punto azul de configuraciones modificadas

Como detalle adicional de esta misma actualización, en el panel de opciones del visual builder ahora aparece un punto azul junto a cualquier configuración que hayas modificado. También aparece en los grupos de opciones colapsados para indicar que hay cambios dentro, sin necesidad de abrirlos uno por uno.

Combinado con el filtro de búsqueda de opciones modificadas que ya tenía Divi 5, esto hace que sea mucho más fácil revisar qué cambios aplicaste a un elemento, especialmente cuando trabajas con módulos que tienen muchas opciones activas. Es un detalle pequeño, pero mejora el flujo de trabajo diario de forma notable.

Lo que te recomiendo hacer con todo esto

1. Empieza por los presets de campo. Antes de diseñar cualquier formulario nuevo, crea tus presets de Input, Checkbox y Radio con los estilos base del sitio. Todo lo demás va a heredar esos estilos automáticamente.
2. Configura el estado :focus con intención. Activa la edición de :focus y agrega un indicador visual claro — un borde de color de acento, una sombra sutil — para que el campo activo sea evidente. Es accesibilidad básica que también mejora la percepción de calidad del diseño.
3. Migra tus sitios con CF7 al nuevo módulo. Si tienes proyectos activos con Contact Form 7, reemplaza los shortcodes por el nuevo módulo nativo. Ganas control de diseño completo sin cambiar la lógica del formulario.
4. Aprovecha la armonización para unificar formularios existentes. Si tienes un sitio con varios tipos de formularios que no coinciden visualmente, ahora tienes los presets para unificarlos con poco esfuerzo.
5. Usa el punto azul para auditar módulos complejos. En los módulos con muchas opciones activas, el punto azul te permite identificar los cambios aplicados sin revisar grupo por grupo.

🎓 ¿Quieres dominar Divi 5 de forma completa y aplicada a proyectos reales?
En uxdivi.com/cursos tenemos el Curso de Divi 5 con clases como esta sobre formularios, el sistema de diseño completo, presets, variables globales y mucho más — todo aplicado a proyectos de cliente reales. Accede como suscriptor y empieza hoy.

Conclusión

La actualización de formularios en Divi 5 no es un cambio cosmético — es una reestructuración real que resuelve inconsistencias que llevaban años ahí. Si trabajas con formularios en proyectos de cliente, y prácticamente todos los proyectos tienen alguno, esta actualización te va a ahorrar tiempo y CSS. Empieza por los presets, aprovecha el módulo de CF7 si ya lo usas, y configura bien los estados :focus y :checked una vez para que funcionen siempre sin tocar código.