Comment modifier l'espacement entre les questions

Avec le Générateur de formulaires Jotform, vous avez une grande liberté pour personnaliser vos formulaires comme bon vous semble. Vous pouvez même ajuster l’espacement standard entre les champs pour qu’il corresponde parfaitement à vos besoins et s’intègre mieux à votre design. En réduisant l’espace entre les questions, vous modifiez l’apparence de votre formulaire. Voici un exemple :

Avant :

Après :

Watch on youtube

How to modify the spacing between questions in Jotform

Vous pouvez changer l’espacement entre les questions dans le Générateur de formulaires via l’onglet Styles du Concepteur de formulaires ou de l’Outil de conception avancé. Voyons comment !

Espacement entre les questions

La manière de procéder la plus simple est d’ajuster l’espacement dans l’onglet Styles du Concepteur de formulaires. Voici la marche à suivre :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’icône en forme de rouleau à peinture du Concepteur de formulaires.
2. Cliquez sur l’onglet Styles.
3. Puis modifiez la valeur de l’option Espacement entre les questions. La valeur que vous saisissez est en pixels.

Injecter du CSS personnalisé

Si vous souhaitez remplacer la valeur par d’autres unités, vous pouvez le faire en injectant du code CSS personnalisé. Suivez les mêmes étapes pour accéder à l’onglet Styles du Concepteur de formulaires, puis faites défiler le volet Concepteur de formulaires vers le bas jusqu’à la section Injecter du CSS Personnalisé, puis saisissez le code suivant :

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

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

N’hésitez pas à consulter ce guide : Comment injecter du code CSS personnalisé dans votre formulaire.

Outil de conception avancé

Vous pouvez également modifier l’espacement entre les champs du formulaire via l‘Outil de conception avancé. Pour y accéder, cliquez simplement sur le bouton bleu Outil de conception avancé tout en bas de l’onglet Styles dans le volet Concepteur de formulaires.

Sous l’onglet Design du volet Outil de conception avancé qui s’affiche sur une nouvelle page, développez la section Disposition des lignes et ajustez les éléments suivants :

• Espacement entre les lignes : il s’agit de l’espacement principal entre chaque question.
• Alignement vertical : ajustez la valeur de cette option pour agrandir ou rétrécir l’espacement vertical de chaque question.
• Espacement horizontal : ajustez la valeur pour modifier l’espacement à gauche et à droite de chaque champ.

Vous pouvez revenir ensuite dans l’interface du Générateur de formulaires en cliquant sur le bouton Revenir au générateur situé en haut à droite de la page. Les étapes ci-dessus sont décrites dans le GIF suivant :