¿Cómo forzar un espacio entre campos en WPForms?

El espaciado es una parte crucial del diseño de formularios. En WPForms, el espaciado entre campos, títulos y otros aspectos se establece por defecto para ofrecer la mejor experiencia 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.

Forzar espacios entre los campos del formulario

Antes de compartir el código exacto para forzar espacios entre diferentes tipos de componentes del formulario, necesitarás los plugins adecuados para que esta tarea sea lo más fácil posible.

Configuración inicial: Espaciado de formularios con código

Comencemos instalando los plugins necesarios en tu sitio.

Paso 1: Instalar WPForms y WPCode

Este método funciona tanto para la versión Lite como para la Pro de WPForms. Pero recomiendo obtener WPForms Pro porque te dará acceso a toneladas de opciones de estilo adicionales con el editor de bloques, eliminando la necesidad de código para personalizaciones más avanzadas.

Después de comprar WPForms Pro, procede a instalar el plugin en tu sitio. Aquí tienes una guía detallada sobre cómo instalar WPForms.

A continuación, también necesitarás el plugin WPCode. Este es un plugin gratuito que hace que añadir fragmentos de código a tu sitio sea increíblemente fácil.

Los pasos de instalación son similares al método para instalar WPForms, pero puedes añadir la versión gratuita de WPCode directamente desde el repositorio de WordPress. Aquí tienes la versión rápida del proceso.

Desde tu menú de administrador de WordPress, ve a Plugins » Añadir nuevo.

Esto te llevará a la pantalla de plugins. Usa el cuadro de búsqueda en el lado derecho para buscar WPCode. Cuando aparezca el listado del plugin en tu pantalla, haz clic en el botón Instalar ahora junto a él.

La instalación solo tardará unos segundos y el botón Instalar cambiará a Activar. Pulsa el botón Activar para finalizar la instalación del plugin en tu sitio.

¡Genial! Con los plugins necesarios instalados, podemos pasar a ajustar los espacios entre los diferentes elementos del formulario.

Paso 2: Crear e incrustar un formulario

Si estás intentando ajustar el espaciado entre campos en WPForms, es probable que ya hayas creado y publicado uno o más formularios en tu sitio.

Pero por si acaso aún no lo has hecho, puedes seguir esta sencilla guía sobre cómo crear un formulario de contacto simple.

A modo de ejemplo, estoy utilizando esta plantilla de formulario de encuesta predefinida.

Asegúrate de incrustar y publicar tu formulario (o al menos guardar una versión de borrador en tu editor de WordPress). Solo puedes personalizar el espaciado en un formulario que ya esté incrustado en tu sitio.

También necesitarás saber el ID del formulario para el que deseas personalizar los espaciados. Puedes localizar fácilmente el ID del formulario yendo a WPForms » Todos los formularios.

El ID del formulario está compuesto enteramente por números y se menciona en la columna Shortcode entre comillas dobles. En mi caso, el ID del formulario es 2294.

¡Genial! Pero es posible que todavía te preguntes cómo insertar el código para modificar el espaciado de WPForms. Te lo describiré a continuación.

Paso 3: Insertar código para el espaciado del formulario

Antes de usar los códigos, es importante saber cómo insertar fragmentos de código nuevos en tu sitio de WordPress. Deberás repetir este proceso para cada código que controle el espaciado entre campos en WPForms.

Para añadir un nuevo fragmento, simplemente ve a Fragmentos de código » + Añadir fragmento.

Luego, haz clic en el botón Usar fragmento en la opción Añadir tu código personalizado (Nuevo fragmento).

Ahora deberías estar en una nueva pantalla, donde puedes ponerle un título a tu fragmento y escribir tu código personalizado (o simplemente copiar y pegar los que compartiré en la siguiente sección).

Dado que todos los códigos para controlar el espaciado en un formulario son CSS, asegúrate de seleccionar Fragmento CSS en el menú desplegable Tipo de código.

Después de eso, solo tienes que añadir tu fragmento de código y seleccionar el método de inserción. La configuración de inserción se puede cambiar desde una sección debajo de la Vista previa del código. Pero no deberías necesitar cambiar la configuración predeterminada para ninguno de los códigos que se discuten en esta publicación.

Más importante aún, recuerda guardar tu fragmento y activarlo después de añadir tu código personalizado. No verás que el código surta efecto hasta que se active usando el botón de alternancia en la parte superior derecha.

¡Excelente! Ahora estás listo para empezar a personalizar el espaciado de los formularios con código personalizado.

Códigos CSS para ajustar el espaciado del formulario

Ahora estamos listos para empezar a crear los fragmentos de código CSS que controlan los espaciados de los diferentes elementos del formulario.

Modificar el espacio entre el título del formulario y el primer campo

¡Hablemos de los títulos de los formularios! Por defecto, WPForms utiliza el encabezado H1 de tu página como título del formulario. Este encabezado aparece encima del formulario.

Si deseas que el título aparezca dentro del contenedor del formulario en su lugar, puedes habilitar fácilmente esa opción desde el editor de bloques de WordPress.

Haz clic en el formulario incrustado dentro de tu editor para abrir opciones adicionales en el panel derecho. Luego, haz clic en el botón de alternancia Mostrar título .

Es posible que desees ocultar el H1 si estás utilizando el título de WPForms. Esto se puede hacer simplemente haciendo clic en el H1 y luego presionando el icono del ojo cuando aparezca.

Ahora, estamos listos para cambiar el espaciado entre el título y el primer campo del formulario. Puedes Publicar o Actualizar tu formulario en este punto.

Primero, veamos el espaciado predeterminado entre el título del formulario y el primer campo en WPForms. Así es como se ve típicamente:

Para cambiar este espaciado, crea un nuevo fragmento en WPCode, como se muestra en el paso 3. Puedes acceder a esto rápidamente yendo a Fragmentos de código » + Añadir fragmento en la barra lateral de tu WordPress.

Aquí tienes el código para cambiar el espaciado del título para TODOS los formularios de WPForms en tu sitio:

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}

Recuerda que los valores de relleno y margen son variables. Esto significa que puedes introducir aquí cualquier valor que necesites. Recomiendo cambiar solo el valor de margin-bottom en este código y dejar padding-bottom en 0.

Por ejemplo, si quieres que el título aparezca con la misma distancia que el espacio entre cada campo, puedes usar 15px como valor de margin-bottom. Si quieres crear una distancia mayor o menor que esta, simplemente aumenta o disminuye el valor de margin-bottom en px según sea necesario.

Así es como aparece el título después de añadir el fragmento de código anterior a mi formulario de encuesta.

Si deseas ajustar este espaciado para formularios específicos en lugar de aplicar cambios globales, puedes modificar el código anterior mencionando el ID del formulario que te interesa.

Por ejemplo, así es como cambiará el código para un formulario con ID# 2294.

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}

Eso se encarga del espaciado del título de tu formulario. ¿Pero qué pasa con el espaciado entre cada campo?

Lo abordaré a continuación.

Modificar el espaciado de todos los campos

El espacio entre cada fila sucesiva de campos es otro número variable que se puede controlar fácilmente con código.

Como referencia, primero veamos el espaciado predeterminado entre los campos.

Ahora, si deseas aumentar o reducir este espacio, puedes crear un nuevo fragmento de CSS siguiendo los mismos pasos que se muestran aquí.

Solo que esta vez, el código que necesitas se ve así:

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}

El resultado es un formulario más espaciado con una mayor separación entre cada campo sucesivo.

Puedes ajustar el espacio libremente cambiando el valor de px de la propiedad padding-top.

Una vez más, si solo deseas modificar los espaciados de los campos para un formulario individual, necesitarás editar el código mencionando el ID del formulario:

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}

Alterar el relleno del botón de envío

Cambiar el espacio entre tu último campo y el botón de envío es tan fácil como los códigos que usaste anteriormente.

Por defecto, el espaciado para el botón de envío en WPForms aparece así:

El código que necesitas para ajustar el relleno del botón de envío es:

.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}

Después de activar este código, encontrarás que el relleno aumentado tiene efecto en el botón de envío de tu formulario:

Eso fue bastante sencillo, ¿verdad?

¡Siéntete libre de usar los códigos CSS para forzar un espacio en WPForms como mejor te parezca!

A continuación, aplica estilos avanzados al formulario

Ajustar los márgenes y rellenos en tus formularios es una de las pocas cosas que requiere código. Pero WPForms te permite personalizar los estilos de tu formulario con gran detalle sin código en la mayor parte.

Puedes alterar la apariencia de tus campos, etiquetas, botones y más con controles intuitivos de apuntar y hacer clic. Consulta nuestra guía sobre estilo de formularios con el editor de bloques para una descripción completa.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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.