Armonizar estilos de formularios de Gravity Forms con variables CSS
Este artículo explica, paso a paso y con ejemplos completos, cómo centralizar y armonizar la apariencia de los formularios creados con Gravity Forms usando variables CSS (custom properties). El objetivo es conseguir un sistema de estilos mantenible, coherente con el tema y fácil de adaptar (por ejemplo, para modo claro/oscuro, variaciones por formulario o cambios rápidos en la paleta).
Qué conseguirás
- Un conjunto de variables CSS globales para todos los formularios.
- Reglas que aplican esas variables a los elementos de Gravity Forms (inputs, labels, botones, mensajes de error, etc.).
- Cómo sobreescribir variables por formulario o por tema (modo oscuro, estilos por campaña, etc.).
- Un ejemplo de cómo inyectar variables desde functions.php para integrarlas con el tema.
Requisitos previos
- WordPress con Gravity Forms instalado y funcionando.
- Acceso para editar el CSS del tema (style.css, un archivo CSS propio o el personalizador → CSS adicional).
- Opcional: acceso a functions.php del tema (o un plugin de snippets) si quieres inyectar variables dinámicamente.
Concepto básico
En lugar de codificar colores, radios, tamaños y espaciamientos directamente en reglas CSS dispersas, definimos un catálogo de variables (ej. –gf-accent, –gf-border, –gf-bg, –gf-radius, etc.). Luego el CSS de los formularios consume esas variables. Para variaciones (modo oscuro o un formulario con estilo propio) solo sobrescribimos las variables en un selector de más especificidad.
1) Declarar las variables globales
Coloca estas variables en :root dentro del CSS principal del tema o en un archivo CSS cargado antes de tus estilos de formularios. Esto las hace accesibles desde cualquier parte del sitio.
:root {
/ Paleta y tokens básicos /
--gf-bg: #ffffff
--gf-text: #222222
--gf-border: #d1d5db
--gf-radius: 6px
--gf-accent: #1e90ff / color principal (botones, enlaces) /
--gf-accent-contrast: #ffffff / texto dentro de botones /
--gf-placeholder: #9aa4b2
--gf-error: #e02424
--gf-success: #16a34a
--gf-font-size: 16px
--gf-spacing: 0.75rem
--gf-transition: 160ms ease-in-out
}
2) Aplicar variables a los componentes de Gravity Forms
Gravity Forms usa clases como .gform_wrapper, .gform_body, .gfield, .gfield_label, .gfield_description, .gfield_required, .gform_footer, .ginput_ y select/textarea estándar. A continuación reglas bien estructuradas que consumen las variables para un estilo coherente.
/ Contenedor general /
.gform_wrapper {
background: var(--gf-bg)
color: var(--gf-text)
font-size: var(--gf-font-size)
line-height: 1.4
--gf-control-padding: calc(var(--gf-spacing) 0.8)
}
/ Campo (label input/textarea/select) /
.gform_wrapper .gfield {
margin-bottom: calc(var(--gf-spacing) 1.25)
}
/ Etiquetas /
.gform_wrapper .gfield_label {
display: block
margin-bottom: 0.35rem
font-weight: 600
color: var(--gf-text)
}
/ Inputs, selects, textareas /
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper input[type=number],
.gform_wrapper input[type=search] {
width: 100%
padding: var(--gf-control-padding)
border: 1px solid var(--gf-border)
border-radius: var(--gf-radius)
background: transparent
color: var(--gf-text)
transition: border var(--gf-transition), box-shadow var(--gf-transition)
outline: none
}
/ Placeholder /
.gform_wrapper ::placeholder {
color: var(--gf-placeholder)
opacity: 1
}
/ Focus accesible /
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
border-color: var(--gf-accent)
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gf-accent) 12%, transparent)
}
/ Botón principal (submit) /
.gform_wrapper .gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button {
background-color: var(--gf-accent)
color: var(--gf-accent-contrast)
border: none
padding: calc(var(--gf-spacing) 0.7) calc(var(--gf-spacing) 1.25)
border-radius: var(--gf-radius)
cursor: pointer
transition: transform 120ms ease, filter var(--gf-transition)
}
/ Hover / active /
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer input[type=submit]:hover {
filter: brightness(0.95)
transform: translateY(-1px)
}
/ Mensajes de error y validación /
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
border-color: var(--gf-error)
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gf-error) 12%, transparent)
}
.gform_wrapper .gfield_description {
color: var(--gf-placeholder)
font-size: 0.92em
}
/ Required asterisk (si no quieres el span por defecto, se puede mejorar) /
.gform_wrapper .gfield_required {
color: var(--gf-error)
margin-left: 0.25rem
font-weight: 700
}
/ Mensajes globales (validación de formulario) /
.gform_wrapper .gform_validation_error {
border-left: 4px solid var(--gf-error)
background: color-mix(in srgb, var(--gf-error) 6%, var(--gf-bg))
padding: calc(var(--gf-spacing) 0.6)
color: var(--gf-text)
margin-bottom: calc(var(--gf-spacing) 0.8)
}
/ Success (si utilizas mensajes de éxito) /
.gform_wrapper .gform_confirmation_message {
border-left: 4px solid var(--gf-success)
background: color-mix(in srgb, var(--gf-success) 6%, var(--gf-bg))
padding: calc(var(--gf-spacing) 0.6)
color: var(--gf-text)
}
/ Responsive: controles en columnas (ejemplo básico) /
@media (min-width: 720px) {
.gform_wrapper .gfield.gfield_contains_required .gfield_label {
/ ejemplo: ajustar si lo necesitas /
}
}
3) Sobrescribir variables por formulario (estilos específicos)
Cada formulario de Gravity Forms tiene un id en el wrapper: por ejemplo id=gform_wrapper_3. Puedes usar ese id para cambiar solo ese formulario sin tocar el resto.
/ Formulario con id 3: estilo landing /
#gform_wrapper_3 {
--gf-bg: #f6fbff
--gf-text: #052236
--gf-border: #cfe7ff
--gf-accent: #0077cc
--gf-accent-contrast: #ffffff
--gf-radius: 10px
}
/ Formulario con id 7: estilo oscuro /
#gform_wrapper_7 {
--gf-bg: #0b1220
--gf-text: #e6eef8
--gf-border: #212a37
--gf-accent: #6fb3ff
--gf-accent-contrast: #03263b
}
Con este enfoque no hay que duplicar todas las reglas solo cambiamos el diccionario de variables y el CSS ya aplica la nueva apariencia automáticamente.
4) Inyectar variables dinámicamente desde functions.php
Si quieres generar colores desde el personalizador del tema, ACF o datos dinámicos, puedes inyectar la declaración de variables como CSS inline. Ejemplo sencillo en functions.php (asegúrate de tener encolado el estilo con handle correcto):
5) Modo oscuro y alternancia de temas
Existen dos enfoques simples: usar prefers-color-scheme o un atributo en body/html para alternar. Ambos métodos solo sobrescriben variables, por lo que el resto del CSS no cambia.
/ Usando prefers-color-scheme /
@media (prefers-color-scheme: dark) {
:root {
--gf-bg: #0b1220
--gf-text: #e6eef8
--gf-border: #1f2937
--gf-accent: #6fb3ff
--gf-accent-contrast: #022
}
}
/ Alternativa: body[data-theme=dark] permite control JS /
body[data-theme=dark] {
--gf-bg: #0b1220
--gf-text: #e6eef8
--gf-border: #1f2937
--gf-accent: #6fb3ff
--gf-accent-contrast: #022
}
Snippet JavaScript mínimo para alternar (puedes colocarlo en un archivo .js que se encole):
// Alternar tema y persistir en localStorage
(function() {
const toggle = function(theme) {
document.body.setAttribute(data-theme, theme)
localStorage.setItem(site-theme, theme)
}
// Restaurar preferencia
const saved = localStorage.getItem(site-theme)
if (saved) {
document.body.setAttribute(data-theme, saved)
}
// Ejemplo: atar a un botón con id theme-toggle
const btn = document.getElementById(theme-toggle)
if (btn) {
btn.addEventListener(click, function() {
const current = document.body.getAttribute(data-theme) === dark ? light : dark
toggle(current)
})
}
})()
Accesibilidad y detalles finos
- Contraste: asegúrate de que –gf-text y –gf-accent-contrast cumplan ratios mínimos frente al fondo del control.
- Focus visible: no elimines outlines usa :focus-visible y una sombra clara que respete el contorno para usuarios con teclado.
- Transiciones: mantén transiciones cortas en hover/focus para mejor respuesta sin sacrificar rendimiento.
- Tamaños: evita fijar alturas excesivas usa padding y line-height para mantener accesibilidad.
- Estados de validación: combina color con iconos/texto para que la validación no dependa solo del color.
Consejos avanzados
- Usa variables para espaciados, no solo colores: –gf-gap, –gf-control-padding. Así ajustes globales afectan coherentemente.
- Combina color-mix() o hsl() con variables para generar variantes (ej. hover más oscuro) sin añadir nuevos tokens.
- Si necesitas diferenciar estilos por dispositivo, crea sets de variables dentro de media queries para ajustar tamaños o espaciamientos.
- Para formularios embebidos (iframes o formularios exportados a otras páginas) exporta solo el bloque de variables y reglas críticas.
Selector reference: clases y elementos comunes de Gravity Forms
| Selector | Uso |
| .gform_wrapper | Contenedor principal del formulario |
| #gform_wrapper_5 | Wrapper con id, sirve para sobrescribir variables por formulario |
| .gform_body .gfield | Cada campo del formulario |
| .gfield_label | Etiqueta del campo |
| .gfield_description | Texto de ayuda debajo del campo |
| .gform_footer .gform_button | Botón de envío |
| .gform_validation_error | Mensaje de error global del formulario |
Resumen final
Las variables CSS permiten convertir los formularios de Gravity Forms en sistemas visuales coherentes y fáciles de mantener. Definiendo un conjunto de custom properties centrales y aplicándolas a los selectores de Gravity Forms, se consigue:
- Uniformidad visual con el resto del sitio.
- Capacidad para cambios rápidos (p. ej. ajustes de color o modo oscuro) solo modificando variables.
- Facilidad para crear variaciones por formulario sin duplicar CSS.
Implementa las muestras mostradas en el CSS de tu tema y usa la inyección desde functions.php para integrar valores dinámicos. Con esto, los formularios se adaptarán a tu diseño de forma consistente y accesible.
Leave a Reply