Botón de formulario a ancho completo en Divi: tutorial

Hacer el botón del formulario de contacto de Divi a ancho completo es una de esas pequeñas victorias de CSS que marcan la diferencia entre un formulario que se ve descuidado y uno que parece diseñado con intención. Si alguna vez entregaste un proyecto y notaste que el botón de envío quedaba pequeño y pegado al margen derecho, este tutorial es para ti. Aquí te muestro los snippets exactos para el botón formulario ancho completo en Divi, tanto para el módulo de Formulario de Contacto nativo como para el módulo Botón independiente, con variantes de alineación y una nota importante sobre el reCAPTCHA de Divi.

¿Por qué el botón del formulario de Divi no ocupa todo el ancho por defecto?

El módulo de Formulario de Contacto de Divi aplica estilos predeterminados que limitan el contenedor del botón a un porcentaje del ancho total. No es un bug — es una decisión de diseño del tema que asume que el botón irá junto a otros elementos (como el campo de reCAPTCHA) dentro de la misma fila. El problema es que cuando no usas reCAPTCHA avanzado, ese espacio vacío al lado del botón queda ahí sin ningún propósito, y el formulario se ve desequilibrado. La solución es CSS personalizado.

Snippet para el Formulario de Contacto nativo de Divi

Este es el caso más común: tienes un módulo de Formulario de Contacto en tu página y quieres que el botón de envío ocupe el 100% del ancho disponible. El CSS va en Opciones de página → Avanzado → CSS personalizado (o en el Personalizador de WordPress si quieres que aplique a todo el sitio).

.et_contact_bottom_container {
  width: 97%;
}

.et_pb_contact_submit.et_pb_button {
  width: 100%;
  margin: 0 auto;
}

El truco está en los dos selectores juntos. .et_contact_bottom_container es el wrapper que Divi usa para la fila inferior del formulario — el que contiene tanto el botón como el reCAPTCHA si lo tienes activado. Al darle width: 97% primero, y luego al botón interno width: 100%, el botón se estira hasta llenar ese contenedor. El 97% en lugar de 100% evita un pequeño desbordamiento que ocurre con algunos temas hijos.

Consejo: Si el botón se ve cortado o hay un pequeño borde visible a la derecha, ajusta el width del et_contact_bottom_container de 97% a 100% y prueba. Depende de si tu tema hijo tiene box-sizing: border-box aplicado globalmente.

Variante: botón alineado a la izquierda con ancho parcial

Si en lugar de un botón a ancho completo quieres uno compacto alineado a la izquierda — útil cuando el formulario está en un sidebar angosto o en una columna pequeña — cambia los valores así:

.et_contact_bottom_container {
  width: 100%;
}

.et_pb_contact_submit.et_pb_button {
  width: 25%;
  margin: 0;
}

Con margin: 0 el botón se pega al borde izquierdo del contenedor. Puedes ajustar el porcentaje según cuánto espacio quieras que ocupe — 25% funciona bien para textos cortos como "Enviar" o "Agendar llamada", pero si el label es más largo necesitarás más ancho.

Consejo: Si el formulario tiene reCAPTCHA habilitado en las opciones del módulo, este snippet puede generar un resultado inesperado porque el contenedor et_contact_bottom_container también envuelve el widget de reCAPTCHA. Si usas el reCAPTCHA básico de Divi, prueba el resultado antes de publicar — en algunos casos el widget queda encima o debajo del botón en lugar de al lado.

Snippet para el módulo Botón independiente de Divi

Si usas un módulo Botón de Divi por separado — no dentro del Formulario de Contacto — el enfoque es diferente. Aquí no hay selectores de formulario que modificar; trabajas directamente desde las opciones del módulo.

Dentro del módulo Botón, ve a Avanzado → CSS personalizado → Elemento principal y agrega:

width: 100%;

Eso hace que el wrapper del botón ocupe todo el ancho de su columna. Después ve a la pestaña Diseño → Texto del botón y cambia la alineación del texto a Centrado (o a la que necesites). Sin ese cambio, el texto del botón queda alineado según el alineamiento heredado de la columna, que muchas veces es izquierda.

🎓 ¿Quieres profundizar en la personalización de formularios y botones en Divi?
En uxdivi.com/cursos tienes acceso a módulos completos donde trabajo la maquetación de páginas de captura, contacto y venta con Divi 5 desde cero. Accede como suscriptor y aplícalo directamente en tus proyectos de clientes.

Comparativa: ¿cuándo usar cada enfoque?

Errores comunes al aplicar este CSS

He visto los mismos errores repetirse cuando los diseñadores aplican estos snippets por primera vez. Aquí van los más frecuentes para que no pierdas tiempo:

Poner el CSS en el módulo en lugar de en la página. El selector .et_contact_bottom_container es de Divi, no de tu módulo. Si lo pones en los campos de CSS del propio módulo de Formulario de Contacto, puede que funcione o puede que no — depende del contexto. Lo más confiable es ponerlo en Opciones de página → Avanzado → CSS personalizado, que es un scope más amplio y siempre lo va a encontrar.

Olvidar el selector del botón. Solo con .et_contact_bottom_container { width: 97%; } no alcanza — el contenedor crece, pero el botón interno sigue con su ancho predeterminado. Necesitas los dos selectores juntos para que funcione correctamente.

No verificar en móvil. Un botón a ancho completo en escritorio suele verse bien en móvil también, pero si tienes márgenes o paddings definidos en el módulo desde el constructor visual de Divi, pueden generar un overflow en pantallas pequeñas. Siempre revisa en móvil después de aplicar el CSS. Si usas herramientas de prueba responsive, este es buen momento para usarlas.

Conflicto con el CSS del tema hijo. Si tu tema hijo ya tiene reglas para .et_pb_button, puede que haya conflictos de especificidad. En ese caso, aumenta la especificidad del selector o usa !important como último recurso — aunque lo ideal es resolver el conflicto sin esa propiedad.

🎓 ¿Quieres aprender más sobre CSS en Divi sin depender de plugins de terceros?
En uxdivi.com/cursos trabajo técnicas de personalización CSS aplicadas a casos reales de proyectos con clientes. Accede y empieza a construir sitios más sólidos y personalizados.

¿Funciona lo mismo en Divi 5?

En términos de los selectores CSS, el comportamiento es muy similar entre Divi 4 y Divi 5. Los selectores .et_contact_bottom_container y .et_pb_contact_submit siguen presentes en Divi 5. Lo que sí cambia es que Divi 5 introduce el Variable Manager, que te permite definir estilos globales desde el constructor visual sin tocar CSS manual — pero para este ajuste puntual del botón, el snippet sigue siendo la forma más directa.

Si tu proyecto ya está en Divi 5 y quieres mantener todo el CSS organizado, puedes añadir este snippet directamente desde el Personalizador de WordPress en lugar de las Opciones de página, para que aplique de forma global a todos tus formularios.

Consejo: En Divi 5 puedes usar el constructor visual para explorar qué selectores genera Divi para cada elemento — haz clic derecho en el botón del formulario desde el navegador, inspecciona el elemento y copia el selector exacto. Así evitas suposiciones y aplicas el CSS al elemento correcto desde el primer intento.

Recomendaciones para aplicar esto bien

1. Prueba siempre en una página de staging o duplicada antes de tocar el formulario de contacto principal de tu sitio. Un cambio de CSS mal aplicado puede romper el layout del formulario de forma visible para tus visitantes.
2. Agrupa tus snippets CSS en un solo lugar, ya sea en el personalizador o en tu tema hijo. Dispersar el CSS personalizado entre las opciones de cada página hace muy difícil el mantenimiento a largo plazo.
3. Verifica el comportamiento con reCAPTCHA si lo tienes activo. El reCAPTCHA básico de Divi comparte fila con el botón dentro del et_contact_bottom_container, así que este snippet puede afectar su posición. Desactívalo temporalmente para confirmar que el CSS funciona como esperas.
4. Documenta los cambios. Si trabajas en proyectos de clientes, deja una nota del snippet que aplicaste y en qué página. Cuando actualicen el tema o cambien de diseñador, ese contexto vale oro.
5. Considera el módulo Botón independiente si necesitas más control visual. El módulo Botón de Divi tiene muchas más opciones de personalización desde la interfaz visual que el botón integrado en el Formulario de Contacto, y te evita lidiar con CSS en muchos casos.

Preguntas frecuentes

¿Este CSS afecta a todos los formularios de mi sitio o solo al de la página donde lo pongo?

Depende de dónde lo pongas. Si lo añades en Opciones de página → Avanzado → CSS personalizado, aplica solo a esa página. Si lo pones en el Personalizador de WordPress → CSS adicional o en tu tema hijo, aplica a todas las páginas del sitio que tengan un formulario de contacto de Divi.

¿Por qué el snippet usa 97% en lugar de 100% para el contenedor?

El 97% es un ajuste práctico para evitar un pequeño desbordamiento horizontal que puede ocurrir dependiendo del modelo de caja (box-sizing) que use tu tema. Si pruebas con 100% y el formulario se ve correctamente sin overflow, puedes usar ese valor sin problema. Si aparece una barra de scroll horizontal, regresa a 97%.

¿Funciona si tengo el reCAPTCHA de Google activado en el formulario?

El reCAPTCHA básico que incluye Divi en su módulo de Formulario de Contacto comparte el mismo contenedor (et_contact_bottom_container) con el botón de envío. Si aplicas este snippet con reCAPTCHA activo, el resultado visual puede variar — en algunos casos el botón queda debajo del widget en lugar de al lado. Prueba el resultado y ajusta según lo que veas. Una alternativa es usar un plugin de reCAPTCHA externo que te dé más control sobre la posición del widget.

¿Puedo cambiar el color y el estilo del botón además del ancho desde CSS?

Sí. Los estilos de color, tipografía, bordes y hover del botón se controlan con los selectores .et_pb_contact_submit y .et_pb_contact_submit:hover. Puedes combinar el snippet de ancho completo con reglas adicionales de color sin ningún problema. También tienes opciones visuales directamente en la pestaña Diseño del módulo de Formulario de Contacto en Divi.

Conclusión

Un botón de formulario a ancho completo es un ajuste pequeño que tiene un impacto visual real. Con los dos snippets de CSS que te compartí puedes resolver esto en menos de dos minutos, tanto para el formulario de contacto nativo de Divi como para el módulo Botón independiente. Si además usas la variante de alineación a la izquierda, tienes una solución flexible que se adapta a distintos contextos de diseño — desde formularios en columna completa hasta widgets en sidebars angostos. Si te quedó alguna duda o el CSS no te funcionó como esperabas en tu configuración específica, revisa también cómo funcionan los botones en el contexto de WooCommerce con Divi — hay un par de particularidades que se superponen con lo que vimos hoy.

🎓 ¿Quieres dominar la personalización CSS en Divi de forma completa?
En uxdivi.com/cursos tienes módulos dedicados a personalización visual avanzada con Divi 5, donde trabajo estos casos directamente sobre proyectos reales. Accede como suscriptor y aprende a resolver este tipo de ajustes sin depender de Stack Overflow.