Cómo cambiar el espaciado entre preguntas

Jotform Form Builder es muy flexible y puedes personalizar tus formularios como desees. El espaciado estándar entre campos también se puede cambiar para adaptarse mejor a tus necesidades y ajustar mejor tu diseño. Cuando reduces el espaciado entre preguntas, tu formulario se modificará:

De esto:

A esto:

Watch on youtube

Puedes cambiar el espaciado entre preguntas en el Form Builder a través de la pestaña de Estilos del Diseñador de Formularios o el Diseñador Avanzado

Espaciado entre Preguntas

La forma más fácil sería ajustar el espaciado a través de la pestaña de Estilos del Diseñador de Formularios. Aquí te explicamos cómo hacerlo:

1. En el Form Builder, haz clic en el icono de Diseñador de Formularios.
2. Selecciona la pestaña de Estilos.
3. Cambia el valor de la opción Espaciado entre Preguntas. El valor que ingreses aquí está en píxeles.

Inyectar CSS Personalizado

Si deseas sobrescribir el valor con otras unidades, puedes hacerlo inyectando códigos CSS personalizados. Sigue el mismo paso para acceder a la pestaña de Estilos del Diseñador de Formularios, navega hasta el cuadro de Inyectar CSS Personalizado y escribe lo siguiente:

.form-line {     margin-bottom: 3px; }

Puedes seguir esta guía para inyectar los códigos: Cómo inyectar código CSS personalizado en tu formulario.

Diseñador Avanzado

También puedes cambiar el espaciado entre los campos del formulario a través del Diseñador Avanzado. Para ingresar al Diseñador Avanzado, simplemente haz clic en el botón Diseñador Avanzado en la parte inferior de la pestaña de Estilos de la ventana del Diseñador de Formularios.

En la pestaña Diseño de la página del Diseñador Avanzado, expande la sección de Distribución de Líneas y ajusta lo siguiente:

• Espaciado de Líneas — Este es el espaciado principal entre cada pregunta.
• Relleno Vertical — Ajusta el valor de esta opción para acercar o alejar el espaciado vertical de cada pregunta.
• Relleno Horizontal — Ajusta esto para cambiar el espaciado a la izquierda y derecha de cada campo.

Por último, no olvides hacer clic en el botón Guardar en la parte superior izquierda del Diseñador Avanzado. Puedes volver al Form Builder haciendo clic en el Icono de Jotform en la parte superior derecha de la página. Los pasos anteriores se describen en el siguiente GIF corto: