Comment modifier l'espacement entre les questions

Le Jotform Form Builder est très flexible, et vous pouvez personnaliser vos formulaires selon vos souhaits. L’espacement standard entre les champs peut également être modifié pour répondre à vos besoins et mieux correspondre à votre design. Lorsque vous réduisez l’espacement entre les questions, votre formulaire sera modifié :

Depuis ceci :

“““html

À ceci :

Watch on youtube

Vous pouvez changer l’espacement des questions dans le Form Builder via l’onglet Styles du concepteur de formulaires ou le concepteur avancé.

Espacement des Questions

Le plus simple est d’ajuster l’espacement via l’onglet Styles du concepteur de formulaires. Voici comment procéder :

1. Dans le Form Builder, cliquez sur l’icône du concepteur de formulaires.
2. Sélectionnez l’onglet Styles.
3. Modifiez la valeur de l’option Espacement des Questions. La valeur que vous entrez ici est en pixels.

“““html

Injecter du CSS Personnalisé

Si vous souhaitez remplacer la valeur par d’autres unités, vous pouvez le faire en injectant des codes CSS personnalisés. Suivez la même étape pour accéder à l’onglet Styles du concepteur de formulaires, naviguez vers la boîte Injecter du CSS Personnalisé, et entrez ce qui suit :

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

“““html

Vous pouvez suivre ce guide pour injecter les codes : Comment injecter du code CSS personnalisé dans votre formulaire.

Concepteur Avancé

Vous pouvez également modifier l’espacement entre les champs du formulaire via le Concepteur Avancé. Pour accéder au Concepteur Avancé, cliquez simplement sur le bouton Concepteur Avancé en bas de l’onglet Styles de la fenêtre du concepteur de formulaires.

“““html

“““html

Sous l’onglet Design de la page du Concepteur Avancé, développez la section Mise en Page des Lignes et ajustez les éléments suivants :

• Espacement des Lignes — Il s’agit de l’espacement principal entre chaque question.
• Marge Verticale — Ajustez la valeur de cette option pour rapprocher ou éloigner l’espacement vertical de chaque question.
• Marge Horizontale — Ajustez ceci pour modifier l’espacement à gauche et à droite de chaque champ.

Enfin, n’oubliez pas de cliquer sur le bouton Enregistrer dans le coin supérieur gauche du Concepteur Avancé. Vous pouvez revenir au Form Builder en cliquant sur l’Icône Jotform en haut à droite de la page. Les étapes ci-dessus sont décrites dans le GIF court suivant :