Cambiar el estilo de un formulario de WordPress: casilla de verificación, anchura, botón y RTL

Por qué se desconfigura el estilo de un formulario de WordPress

En los foros de WordPress.org, la misma pregunta aparece cada semana de distintas formas: la casilla de consentimiento ocupa el 90% de la anchura, el CSS añadido al botón de envío no surte efecto en el sitio, los mensajes de error se quedan a la izquierda en un sitio en árabe. Detrás de estos síntomas, el estilo de un formulario de WordPress obedece a una regla sencilla: hereda todo lo que declara el tema.

Un tema suele escribir reglas amplias, del tipo «todos los campos al 100% de anchura». Están pensadas para los campos de texto, pero también afectan a las casillas de verificación y a los botones de radio. El formulario añade sus propias reglas, y la más específica de las dos es la que gana, no necesariamente la última que se ha escrito.

Antes de corregir nada, abre la página en el navegador, haz clic derecho en el elemento en cuestión y selecciona «Inspeccionar». El panel de estilos muestra cada regla aplicada, el archivo que la declara y las reglas tachadas porque otra ha ganado. Ahí es donde se encuentra la respuesta, nueve de cada diez veces.

Lo que admite nexya forms

nexya forms es un módulo de nexya Pro, que se vende en nexya.dev y se entrega mediante Freemius tras la compra. Como cualquier módulo de nexya, se activa desde el centro de control (hub), y mientras esté desactivado, ninguno de sus ganchos (hooks) se ejecuta en el sitio.

El módulo aplica un único estilo a todos los formularios del sitio. Por tanto, no tienes que rehacer el diseño formulario por formulario, y un formulario añadido más adelante se parecerá a los demás. Las listas desplegables y el calendario de selección de fecha también tienen estilo propio, en lugar de conservar el aspecto bruto del navegador, que cambia de un dispositivo a otro.

Desde la versión 1.3.2, el botón de envío puede llevar un icono antes y/o después de su etiqueta: uno de los dieciséis iconos propuestos, o una imagen de la biblioteca de medios. El icono está centrado respecto al texto, y el orden se adapta a los idiomas que se escriben de derecha a izquierda.

Para combatir el spam, el módulo Mail proporciona un captcha invisible para los formularios del sitio. No añade ninguna casilla de verificación ni marco que deba diseñarse: no hay nada que estilizar en ese aspecto.

La casilla de consentimiento ocupa toda la anchura

Este es el caso más frecuente. El tema declara una anchura del 100% para los campos de entrada, sin excluir las casillas de verificación. Resultado: la casilla se estira y el texto de consentimiento pasa a la línea siguiente o queda aplastado.

La solución consiste en devolver a las casillas de verificación y a los botones de radio su anchura natural, limitando la regla a tus formularios para no romper nada en el resto de la página. En el inspector, localiza la clase o el identificador del contenedor del formulario y escribe una regla como esta, sustituyendo el selector por el que hayas anotado:

• Selector del contenedor seguido de input[type="checkbox"] e input[type="radio"]
• Propiedades: width: auto; y, si es necesario, flex: none; cuando el tema coloca la casilla en una línea flexible
• Comprueba a continuación el resultado en teléfonos móviles, donde las reglas del tema suelen cambiar

Cambiar la apariencia de un formulario, paso a paso

1. 1

   Activar el módulo de formularios

   Con nexya Pro instalado, activa nexya forms desde el hub. El estilo común se aplicará entonces a todos los formularios del sitio.

   
2. 2

   Añadir el icono del botón de envío

   En el editor de formularios, elige un icono antes y/o después de la etiqueta del botón, entre dieciséis opciones, o una imagen de la biblioteca de medios.

   
3. 3

   Inspeccionar lo que sigue sin verse bien

   En la página publicada, haz clic derecho en el elemento mal alineado y selecciona «Inspeccionar» para ver qué regla del tema está ganando y en qué archivo se declara.

   
4. 4

   Corregir en CSS y vaciar la caché

   Añade una regla limitada al contenedor del formulario en el CSS adicional (width: auto para las casillas de verificación, text-align: start para RTL), vacía la caché de la página y compruébalo en ordenador y móvil.

   

El CSS del botón de envío no se aplica

Cuando una regla añadida al botón no produce ningún cambio en el sitio, el inspector revela la causa. Se suelen dar tres situaciones.

La regla aparece tachada: otra regla más específica se impone. Añade el selector del contenedor del formulario delante del selector del botón para ganar especificidad. Utiliza !important solo como último recurso, ya que dificulta las correcciones posteriores.

La regla no aparece por ninguna parte: el CSS no se está cargando. Es posible que se haya colocado en el lugar incorrecto o que un sistema de caché esté sirviendo una versión antigua de la página. El CSS adicional de WordPress se encuentra en la herramienta de personalización para los temas clásicos, y en el editor del sitio, bajo los estilos, para los temas basados en bloques. A continuación, vacía la caché de páginas y recarga sin usar la caché del navegador.

La regla se aplica en el editor pero no en el sitio web: la vista previa del editor y la página pública no siempre cargan las mismas hojas de estilo. Haz siempre las pruebas en la página publicada.

Si quieres añadir un icono al botón, no hace falta escribir CSS con nexya forms: la opción está disponible desde la versión 1.3.2 y gestiona automáticamente el centrado y el orden en los idiomas RTL.

Ajustar la anchura del formulario

Un formulario adopta la anchura del bloque que lo contiene. Si parece demasiado ancho en una pantalla grande, lo más limpio es limitar su contenedor en lugar de cada campo: define una anchura máxima (max-width) en píxeles o caracteres, y márgenes automáticos a la izquierda y a la derecha para centrarlo.

La información conocida sobre nexya forms no menciona ningún ajuste de anchura específico. Por tanto, este límite debe gestionarse desde el propio diseño de la página (columna, grupo de bloques, sección del maquetador) o mediante una regla CSS aplicada al contenedor.

Formularios en árabe, hebreo o persa (RTL)

Cuando el sitio está en un idioma que se escribe de derecha a izquierda, WordPress añade el atributo dir="rtl" a la página. Los elementos bien programados se adaptan por sí solos. Aquellos que se quedan a la izquierda casi siempre tienen una regla text-align: left o un posicionamiento fijado a la izquierda, declarado por el tema o por el formulario.

Lo que nexya forms ofrece para RTL es el orden del icono y la etiqueta en el botón de envío. No hay ningún ajuste RTL anunciado para el resto del formulario, ni opciones avanzadas para los mensajes de validación. Si un mensaje de error sigue mal alineado, la solución requiere aplicar CSS.

La solución más sostenible consiste en sustituir left y right por los valores lógicos start y end (text-align: start, por ejemplo), que siguen la dirección del idioma. Si no, basta con una regla limitada a [dir="rtl"] seguida del selector del mensaje.

Las reglas que ganan no son las últimas escritas, sino las más precisas.