Configuration des colonnes de formulaire

February 5, 2022

Nous comprenons la frustration derrière la construction de formulaires, où l’espacement et la mise en page ont toujours été difficiles, pour les utilisateurs qui n’ont aucune expérience en HTML/CSS.

Ainsi, pour aider les utilisateurs à concevoir un formulaire multi-colonnes, nous avons déployé certaines fonctionnalités intégrées qui seront utiles lorsqu’il s’agit de colonnes de formulaire.

  1. Réduire un champ

Vous devez avoir un champ réduit sur votre formulaire pour utiliser la fonction Colonnes de formulaire. Qu’est-ce que ça veut dire? Cela signifie que vous réduisez la largeur d’un champ à son strict minimum. Par défaut, chaque champ que vous ajoutez dans votre formulaire occupe toute la largeur du formulaire. Ainsi, la réduction d’un champ (ou de champs) entraînerait l’affichage de plus de champs sur une seule ligne au lieu d’avoir des champs rendus ligne par ligne.

Champs réguliers:


Champs réduits:


Guide similaire: Positionnement des champs de formulaire

https://www.jotform.com/help/90-form-field-positioning/

2. Déplacer un champ reduit vers une nouvelle ligne
Pourquoi auriez-vous besoin de déplacer un champ réduit vers une nouvelle ligne ? Eh bien, supposons que vous souhaitiez créer un formulaire à deux colonnes – Et après avoir réduit tous les champs, une ligne affichait soudainement trois ou quatre champs au lieu de deux, c’est le temps dont vous auriez besoin pour déplacer un champ rétréci vers une nouvelle ligne.

3.Activer les colonnes de formulaire
Sans cette option, vous devrez saisir manuellement les codes CSS pour aligner correctement vos formulaires en colonnes. Mais maintenant, tout ce que vous avez à faire est de cocher une case dans la section CONCEPTEUR AVANCÉ du générateur de formulaires.

Pour définir les options RÉDUIRE et DÉPLACER VERS UNE NOUVELLE LIGNE par champ, cliquez simplement sur l’icône ENGRENAGE du champ sélectionné > onglet AVANCÉ > puis faites défiler vers le bas jusqu’à ce que vous voyiez les options respectives.

Pour activer les colonnes de formulaire, cliquez sur l’icône GÉNÉRATEUR DE FORMULAIRE à droite > COULEURS > puis cliquez sur le bouton CONCEPTEUR AVANCÉ

Et une fois la fenêtre CONCEPTEUR AVANCÉ chargée, accédez à l’onglet CONCEPTION GRAPHIQUE > développez la section MISE EN PAGE DE FORMULAIRE > cochez ENABLE FORM COLUMNS (ACTIVER LES COLONNES DE FORMULAIRE) > puis définissez le nombre de colonnes que vous souhaitez.

REMARQUE: L’option ENABLE FORM COLUMNS ne sera affichée dans la section MISE EN PAGE DU FORMULAIRE que si vous avez au moins 1 champ réduit.

C’est tout ce que vous devez faire pour activer les colonnes de formulaire.


Maintenant, gardez en mémoire qu’il y a quelques autres facteurs que vous devez prendre en compte:

  • Toute la largeur du formulaire

Assurez-vous que la largeur de votre formulaire est suffisamment large pour les colonnes.

  • La largeur du champ

Si vous souhaitez créer un formulaire à deux colonnes et qu’un champ ne bougera pas, vous pouvez essayer de réduire sa largeur. En raison de la nature réactive du formulaire, un champ relativement long prendrait trop d’espace pour que l’autre champ soit affiché juste à côté. Donc, en règle générale, si vous voulez deux colonnes, assurez-vous que les deux champs sont de taille égale pour tenir sur une seule ligne.

  • Position de l’étiquette de champ

Un champ avec une étiquette alignée à gauche sera plus large qu’un champ avec une étiquette alignée en haut. Alors, n’oubliez pas cela lors de la conception de votre formulaire.

ÉTIQUETTE ALIGNÉE À GAUCHE (prend plus de place/largeur):

ÉTIQUETTE ALIGNÉE EN HAUT (prend moins de place/largeur):

Voici un exemple de formulaire à deux colonnes: https://www.jotform.com/70776407233962

Nous aimerions vous entendre! Si vous avez des commentaires ou des suggestions, postez-les ci-dessous. Des questions? Rendez-vous plutôt sur notre Forum d’assistance pour que nous puissions vous aider.

https://www.jotform.com/contact/

Ce guide vous a-t-il aidé ?
Contacter l'assistance :

Notre équipe d'assistance clientèle est disponible 24 heures sur 24 et 7 jours sur 7 et notre temps de réponse moyen est d'une à deux heures.
Notre équipe peut être contactée via :

Forum d'assistance : https://www.jotform.com/answers/

Contacter l'assistance Jotform : https://www.jotform.com/contact/

Envoyer un commentaire:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Commentaire:

Podo CommentSoyez le premier à commenter.