Resumen de IA
El espaciado es una parte crucial del diseño de formularios y, en WPForms, el espaciado entre campos, títulos y otros aspectos se establece por defecto para ofrecer la experiencia óptima a los visitantes de tu sitio.
Dicho esto, cada sitio web es único. Por lo tanto, si deseas establecer espaciados personalizados entre campos para una mejor alineación con tu estilo específico, estás en el lugar correcto.
En este artículo, te mostraré paso a paso cómo puedes forzar el espacio entre campos en WPForms. Si bien necesitarás trabajar un poco con código aquí, no necesitas tener ningún conocimiento previo de codificación para seguir mi método.
¿Cómo ajustar el espacio entre los campos del formulario en WPForms?
Cada cambio de espaciado en esta guía sigue la misma forma. Tú decides qué parte del formulario quieres mover, copias el CSS correspondiente y luego eliges dónde pegarlo según si el cambio debe afectar a una página, a un formulario o a todos los formularios de tu sitio.
Paso 1: Instalar el plugin WPForms
Para cualquiera que empiece desde cero, WPForms es un creador de formularios de arrastrar y soltar con más de 2100 plantillas listas para usar, por lo que normalmente puedes empezar con algo cercano a lo que necesitas en lugar de un lienzo vacío.
Si nunca has creado uno antes, esta guía sobre cómo crear un formulario de contacto simple es la forma más rápida de empezar. Lo que más me gusta de WPForms para este trabajo en particular es cuánto puedes cambiar antes de tocar código.
Los controles de estilo visual manejan colores, bordes, tamaños de campo y relleno de contenedores, lo que cubre una cantidad sorprendente de lo que la gente asume que requiere CSS.
Para empezar, compra la licencia Pro. Luego, instala WPForms en tu sitio web. Si necesitas ayuda, sigue estas instrucciones sobre cómo añadir un plugin a WordPress.
¡Actualiza a WPForms Pro ahora!
Para los ejemplos a continuación, estoy usando esta plantilla de formulario de encuesta lista para usar, que tiene suficientes campos para que los cambios de espaciado sean obvios.
Paso 2: Prueba primero los controles de espaciado integrados
Antes de escribir cualquier CSS, vale la pena comprobar si los controles visuales ya hacen lo que quieres. Abre tu formulario y ve a Ajustes » Temas en el creador, o haz clic en el formulario dentro del editor de bloques para abrir el mismo panel allí.
Tres de esas configuraciones cambian el espaciado directamente:
- Estilos de campo » Tamaño: Esto cambia la altura del campo y, más útil aquí, el espacio entre una etiqueta y su entrada. Cambia entre Pequeño, Mediano y Grande.
- Estilos de etiqueta » Tamaño: Ajusta el tamaño del texto de la etiqueta, lo que cambia la cantidad de espacio que ocupa cada etiqueta encima de su campo.
- Estilos de contenedor » Relleno: Establece el espacio dentro del borde exterior del formulario. Auméntalo cuando sientas que el formulario está presionado contra un fondo o un borde.
Sin embargo, hay una limitación honesta que señalar aquí, porque ninguno de estos controles establece el espacio vertical entre una fila de campos y la siguiente, que es la cosa más común que la gente quiere cambiar.
Ese espacio está fijado en 15px arriba y abajo de cada campo, y el CSS es la única forma de moverlo. Si los controles integrados te acercaron lo suficiente, puedes detenerte aquí. Si las filas en sí todavía están demasiado juntas o demasiado separadas, sigue leyendo.
Paso 3: Copia el CSS para el espaciado que deseas cambiar
Cada fragmento a continuación viene en dos formas, una que se aplica a todos los formularios de WPForms en tu sitio y otra que se dirige a un solo formulario por su ID, lo que querrás cuando un formulario necesite un espaciado diferente al resto.
Para encontrar el ID de un formulario, ve a WPForms » Todos los formularios y pasa el ratón sobre el nombre del formulario. O, también puedes abrir el formulario específico, hacer clic en incrustar y copiar el shortcode del formulario desde el creador directamente.
WPForms ya aplica sus propios estilos a estos elementos, por lo que a menudo necesitarás !important para que tus valores prevalezcan. Lo he incluido en los fragmentos a continuación donde es realmente necesario.
Espacio entre campos (separación vertical)
Este es el que la mayoría de la gente busca. WPForms da a cada campo 15px de padding en la parte superior e inferior, por lo que los campos adyacentes se separan 30px. Aquí está el espaciado predeterminado en mi formulario de encuesta:
Para cambiarlo en todos tus formularios:
.wpforms-container .wpforms-field {
padding-top: 30px !important;
padding-bottom: 30px !important;
}Aumenta ambos valores para separar los campos de manera uniforme, o disminúyelos para ajustar el formulario. Si solo quieres aumentar el espacio en una dirección, establece solo padding-top y deja la parte inferior sin cambios.
Para un solo formulario, añade el ID:
#wpforms-2294 .wpforms-field {
padding-top: 30px !important;
padding-bottom: 30px !important;
}Espacio debajo del título del formulario
Por defecto, el H1 de tu página se sitúa encima del formulario en lugar de dentro de él. WPForms pone 35px debajo del título del formulario antes de que comience el primer campo.
Eso es bastante más que el espacio entre campos, lo cual es intencional, porque el título es un encabezado y los encabezados ganan más espacio que el contenido debajo de ellos.
Si prefieres que el título viva dentro del contenedor del formulario, haz clic en el formulario incrustado en tu editor y activa Mostrar título en el panel derecho.
Probablemente querrás ocultar el H1 de la página en ese momento para que el título no aparezca dos veces. Haz clic en el H1 y presiona el icono del ojo que aparece.
Aquí está el espaciado del título antes de cualquier cambio:
Para controlarlo, pon a cero el padding del contenedor y establece el margen del título a lo que realmente quieras:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}Deja padding-bottom en 0 y cambia solo margin-bottom.
Establecerlo en 15px hace que el título se sitúe a la misma distancia del primer campo que los campos entre sí.
Esto se ve ordenado cuando quieres que el formulario se lea como un bloque uniforme. Y aquí está el resultado en mi formulario de encuesta:
La versión de un solo formulario, con el # en ambos selectores:
#wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}Espacio entre una etiqueta y su campo
Este espacio confunde a la gente porque parece el espaciado de los campos, pero se controla por separado.
Con marcado moderno, WPForms lo establece a través de una variable CSS llamada --wpforms-field-size-input-spacing, que por defecto es 15px.
Sobrescribir la variable es más limpio que luchar directamente contra el margen de la etiqueta, ya que mantiene intacta la lógica de dimensionamiento propia de WPForms:
.wpforms-container-full {
--wpforms-field-size-input-spacing: 8px;
}Bájalo a unos 8px y cada etiqueta se acerca a su campo, lo que une visualmente a ambos.
Eso es realmente útil en formularios largos, porque el espaciado ajustado entre etiqueta y campo, combinado con espacios más amplios entre filas, hace que sea mucho más fácil saber qué etiqueta pertenece a qué casilla.
Si prefieres no tocar CSS para esto, el control Estilos de campo » Tamaño del Paso 2 cambia la misma variable.
Espacio entre campos uno al lado del otro
Cuando colocas campos uno al lado del otro usando el campo de diseño o las clases de columna de WPForms, se separan por una canaleta de 20px. Cambiarla requiere un poco de cuidado, porque la canaleta se construye a partir de dos valores que deben coincidir.
Cada columna de medio ancho se establece en calc(50% - 10px) con un margen izquierdo de 20px. Cambia solo el margen y tus columnas desbordarán su fila. Ajusta ambos juntos:
.wpforms-container .wpforms-one-half {
width: calc(50% - 20px) !important;
margin-left: 40px !important;
}La regla es que la resta de ancho debe ser la mitad de tu medianil. Un medianil de 40px significa restar 20px, un medianil de 30px significa restar 15px, y así sucesivamente.
Para obtener más información sobre cómo crear estas filas en primer lugar, consulta la guía sobre diseños de formularios multicolumna.
Espacio encima del botón de envío
El marcado moderno controla el margen superior del botón de envío con su propia variable, --wpforms-button-size-margin-top, que se establece en 10px por defecto y se ve así en mi formulario:
Así que puedes establecer tu propio valor para él y dejar todo lo demás sin cambios:
.wpforms-container-full {
--wpforms-button-size-margin-top: 30px;
}Darle al botón más espacio del que tienen los campos suele ser lo correcto, ya que separa la acción de las cosas que se están rellenando, y la diferencia se nota de inmediato:
Reducir o eliminar espacio adicional
Ahora, todo lo anterior funciona a la inversa, y cerrar huecos es una solicitud tan común como abrirlos. Para ajustar las filas, reduce el relleno del campo por debajo de su valor predeterminado de 15px:
.wpforms-container .wpforms-field {
padding-top: 5px !important;
padding-bottom: 5px !important;
}Si el hueco con el que estás lidiando se encuentra entre el formulario y el contenido que lo rodea en lugar de dentro del formulario, el culpable suele ser el contenedor en lugar de los campos. Establece el relleno del contenedor a cero y elimina el espaciado del título:
.wpforms-container-full {
--wpforms-container-padding: 0px;
}
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}Ten cuidado de no apretar demasiado, porque una vez que las filas se juntan más que el espacio entre una etiqueta y su propio campo, la gente empieza a malinterpretar qué etiqueta corresponde a qué entrada, y eso se manifiesta como datos incorrectos en lugar de quejas. Yo mantendría al menos 8px de relleno en cada campo.
Paso 4: Elige dónde añadir tu CSS
El mismo CSS se comporta de manera diferente según dónde lo pegues, y elegir el lugar correcto te evita tener que repetirte en cada página o modificar accidentalmente formularios que querías dejar solos.
| Dónde lo añades | Qué afecta |
|---|---|
| Constructor de WPForms | Ese formulario en concreto, en todas partes donde esté incrustado |
| Editor de bloques | Esa incrustación en concreto, en esa página en concreto |
| WPCode | Todos los formularios de tu sitio |
Método 1: El constructor de WPForms
Abre tu formulario y ve a Ajustes » Temas, luego cambia a la pestaña Avanzado. Allí encontrarás un cuadro de CSS personalizado. Pega tu fragmento y luego haz clic en Guardar.
Los estilos añadidos aquí se guardan con el propio formulario, por lo que lo siguen a todas las páginas. Esto se aplica tanto si lo incrustas con el bloque WPForms, el shortcode o el módulo Divi.
Para la mayoría de la gente, esta es la opción predeterminada correcta, ya que significa un cambio en lugar de un cambio por página. El conjunto completo de opciones se cubre en la documentación sobre cómo dar estilo a tus formularios en el constructor de formularios.
Método 2: El editor de bloques
Haz clic en el bloque del formulario en tu página o entrada para abrir el panel de estilos a la derecha, luego abre la sección Avanzado y añade tu CSS allí.
Publica o actualiza la página para aplicarlo. La diferencia aquí es el alcance, ya que cualquier cosa que añadas en el editor de bloques afecta solo a esa incrustación específica.
Puedes ejecutar un formulario de contacto en todo el sitio con un espaciado amplio en una página de contacto dedicada y un espaciado más reducido en una barra lateral, sin duplicar el formulario.
Ten en cuenta que este panel solo aparece para formularios incrustados con el bloque WPForms, por lo que un formulario insertado mediante un shortcode no lo tendrá. La documentación sobre cómo dar estilo a tus formularios en el editor de bloques cubre el resto de los controles.
Método 3: WPCode (en todo el sitio)
Los dos métodos anteriores se aplican a un solo formulario o a una sola incrustación, que es exactamente lo que deseas la mayor parte del tiempo. Pero si estás estandarizando el espaciado en una docena de formularios, configurarlo una vez en todo el sitio es mejor que abrir cada uno.
El CSS de todo el sitio también sobrevive a un cambio de tema, cosa que el CSS añadido a través del personalizador de tu tema no hace. WPCode es un plugin gratuito que facilita esto. Desde tu menú de administración de WordPress, ve a Plugins » Añadir nuevo.
Busca WPCode y haz clic en Instalar ahora junto a él en los resultados. Una vez que la instalación finalice, el botón cambiará a Activar. Haz clic en él.
Con WPCode activo, ve a Fragmentos de código » + Añadir fragmento.
Haz clic en Usar fragmento en la opción Añadir tu código personalizado (Fragmento nuevo).
Dale un nombre a tu fragmento y luego elige Fragmento de CSS en el menú desplegable Tipo de código. Esto es importante, porque WPCode no aplicará el código correctamente si todavía está configurado como PHP.
Pega tu CSS y deja la configuración de inserción debajo de la Vista previa del código en sus valores predeterminados. Ninguno de los fragmentos de esta guía necesita nada diferente.
Guarda el fragmento y luego actívalo con el interruptor en la parte superior derecha. Nada cambia en tu sitio hasta que ese interruptor esté activado, lo que confunde a casi todo el mundo la primera vez.
Dado que esto se aplica a todos los formularios, usa la versión del ID del formulario de tu fragmento si deseas excluir algunos. También puedes añadir tus propias clases a campos específicos y dirigirte a ellas en su lugar, lo cual se explica en la documentación sobre clases CSS personalizadas.
¿Cuánto espacio debes poner entre los campos del formulario?
El principio principal es la proximidad, lo que significa que una etiqueta debe estar más cerca de su propio campo que ese campo de la siguiente.
El espaciado igual en todas partes deja a la gente adivinando qué etiqueta pertenece a qué cuadro, y es exactamente por eso que la variable de etiqueta a campo tiene un valor predeterminado de 15 px, mientras que los campos adyacentes están separados por 30 px.
Una directriz común entre los sistemas de diseño es espaciar los campos entre el 50 % y el 75 % de la altura del campo. Los campos de WPForms tienen 43 px de alto en el tamaño Mediano, lo que sitúa el rango recomendado entre aproximadamente 21 px y 32 px.
El valor predeterminado de 30 px se encuentra cómodamente dentro de él, por lo que si no estás seguro de si cambiar algo, la respuesta probablemente sea no. Algunas cosas más que vale la pena tener en cuenta:
- Da más espacio a las secciones que a los campos: Cuando un formulario tiene grupos distintos como detalles de contacto y detalles de pago, duplica o triplica el espacio entre grupos para que la estructura sea visible de un vistazo.
- Mantén la coherencia entre móvil y escritorio: WPForms ya se encarga del espaciado adaptable, así que resiste la tentación de añadir huecos específicos para móviles a menos que algo esté realmente roto.
- Cambie un valor a la vez: Los problemas de espaciado suelen ser un culpable, no cinco. Ajuste el relleno de los campos, revise el formulario y continúe.
Para obtener más información sobre el lado del diseño de esto, nuestra guía sobre las mejores prácticas de diseño de formularios profundiza en el diseño y el orden de los campos.
Preguntas frecuentes sobre el espaciado de formularios en WPForms
El espaciado de formularios en WPForms aparece con frecuencia en el soporte, generalmente en torno a espacios que parecen demasiado anchos o CSS que no surte efecto. Estas son las preguntas que veo con más frecuencia.
¿Cómo reduzco el espacio entre campos en WPForms?
Reduzca el relleno de los campos por debajo de su valor predeterminado de 15 px. Use .wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; } y ajuste a partir de ahí. Mantenga al menos 8 px para que las etiquetas permanezcan visualmente unidas a sus propias entradas.
¿Por qué hay tanto espacio entre los campos de mi formulario?
Cada campo tiene 15 px de relleno arriba y abajo, por lo que los campos adyacentes quedan separados por 30 px antes de que tu tema añada nada. Si la separación parece mayor que eso, es probable que tu tema esté aplicando sus propios márgenes a los elementos del formulario o a los párrafos dentro del contenedor del formulario.
¿Puedo cambiar el espaciado del formulario sin usar CSS?
En parte. Estilos de campo » Tamaño cambia el espaciado de la etiqueta al campo y Estilos del contenedor » Relleno cambia el espacio dentro del borde del formulario, ambos sin código. El espacio vertical entre las filas de campos no tiene control visual, por lo que ese necesita CSS.
¿Cómo añado espacio entre dos campos en la misma línea?
Los campos uno al lado del otro utilizan una canaleta de 20 px creada a partir de un ancho calc() y un margen izquierdo coincidente. Cambie ambos juntos, manteniendo la resta del ancho en la mitad de la canaleta, o las columnas se desbordarán de su fila.
¿Por qué no funciona mi CSS de espaciado?
La mayoría de las veces es un # faltante en un selector de ID de formulario, o los propios estilos de WPForms que tienen prioridad. Agregue !important antes del punto y coma y confirme que su selector coincide con el formulario. Nuestra guía sobre solución de problemas de CSS que no funciona cubre el resto.
¿Cómo centro un formulario en WPForms?
Esa es una pregunta sobre el ancho del contenedor más que sobre el espaciado, por lo que los fragmentos aquí no servirán. Establecer un max-width en el contenedor del formulario con margin: 0 auto es el enfoque habitual.
A continuación, personaliza el resto del diseño de tu formulario
El espaciado de campos y etiquetas es una de las pocas partes del diseño de formularios que todavía se beneficia de una o dos líneas de CSS, pero casi todo lo demás es de apuntar y hacer clic en el mismo panel Configuración » Temas que usó anteriormente. Nuestra guía sobre estilo de formularios con el editor de bloques recorre el conjunto completo de controles.
Si está replanteando el diseño en lugar de solo el espaciado, el diseño de formularios cubre la estructura de columnas y el orden de los campos, y cómo estilizar formularios de contacto en WordPress es una buena lectura posterior específicamente para formularios de contacto.
Estiliza tus Formularios de WordPress Ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
