Résumé IA
Souhaitez-vous condenser vos formulaires en affichant les champs sur plusieurs colonnes ? WPForms facilite la division des formulaires en moitiés, tiers, voire en mises en page plus complexes.
Ce tutoriel vous montrera comment utiliser nos paramètres de mise en page multi-colonnes pour que vos formulaires aient la meilleure apparence possible.
Note : Nous vous recommandons d'utiliser le champ Mise en page pour une approche plus simple, par glisser-déposer, de la création de mises en page de formulaires avancées. Cependant, les classes CSS de mise en page abordées dans ce tutoriel sont toujours prises en charge.
Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.
Créer des formulaires multi-colonnes avec des mises en page visuelles
WPForms inclut un outil de mise en page visuelle qui vous permet de créer plusieurs colonnes sans code.
Pour accéder à cet outil, cliquez sur n'importe quel champ dans le constructeur pour ouvrir son panneau Options du champ. Cliquez ensuite sur l'onglet Avancé.
Ouvrez l'outil de mise en page visuelle en cliquant sur Afficher les mises en page à côté de l'option Classes CSS.
Cela révélera plusieurs options de mise en page prédéfinies que vous pouvez utiliser dans votre formulaire.
Note : L'option Afficher les mises en page n'est disponible que pour les utilisateurs de WPForms Lite. Si vous utilisez le plugin WPForms Pro, vous devrez utiliser le champ Mise en page pour créer des champs de formulaire multi-colonnes.
Pour notre exemple, nous voulons que nos champs Nom et E-mail apparaissent l'un à côté de l'autre, et que chacun occupe la moitié de la largeur du formulaire. Pour créer cette mise en page, nous sélectionnerons l'option qui montre deux boîtes de taille égale.
Une fois que nous avons sélectionné cette mise en page, nous devons choisir dans quelle colonne nous voulons que ce champ particulier apparaisse. Comme notre champ Nom est le premier de notre formulaire, nous voulons qu'il apparaisse dans la colonne de gauche.
Lorsque vous cliquez sur une colonne dans l'outil de mise en page visuelle, les classes correspondantes sont automatiquement ajoutées au paramètre Classes CSS du champ. La classe wpforms-one-half indique au champ d'occuper la moitié de la largeur disponible, tandis que la classe wpforms-first indique au champ qu'il doit commencer une nouvelle ligne.
Ensuite, nous devons effectuer le même processus pour notre champ E-mail. Cependant, nous le placerons dans la colonne de droite.
Lorsque vous avez terminé d'ajouter vos champs à votre mise en page, assurez-vous de sauvegarder vos modifications dans le constructeur de formulaire.
Voici à quoi ressemble notre exemple de mise en page multi-colonnes sur le front-end de notre site :
Ajouter manuellement des classes CSS multi-colonnes
Si vous préférez ne pas utiliser l'outil de mise en page visuelle, vous pouvez taper manuellement des classes CSS dans le champ approprié de l'onglet Avancé du panneau Options du champ.
Voici toutes les classes CSS disponibles pour les mises en page multi-colonnes :
- wpforms-une-moiti ilde{A}©
- wpforms-un-tiers
- wpforms-un-quart
- wpforms-un-cinqui ilde{A}¨me
- wpforms-un-sixi ilde{A}¨me
- wpforms-deux-tiers
- wpforms-deux-quarts
- wpforms-deux-cinqui ilde{A}¨mes
- wpforms-deux-sixi ilde{A}¨mes
- wpforms-trois-quarts
- wpforms-trois-cinquièmes
- wpforms-trois-sixièmes
- wpforms-quatre-cinquièmes
- wpforms-quatre-sixièmes
- wpforms-cinq-sixièmes
L'image ci-dessous montre 3 dispositions courantes de plusieurs colonnes. Les étiquettes indiquent les classes CSS utilisées dans la liste ci-dessus.
Remarque : Le premier champ de chaque ligne dans l'image ci-dessus utilise également la classe wpforms-first.
Remarque : Le premier champ de chaque ligne dans l'image ci-dessus utilise également la classe wpforms-first.
Notes supplémentaires sur l'utilisation des mises en page multi-colonnes
Lors de l'utilisation des classes de colonnes, il y a quelques points importants à noter :
- Les colonnes ne s'appliquent pas dans le constructeur de formulaires. Elles ne sont visibles que lorsque vous visualisez le formulaire sur le front-end de votre site. Testez toujours vos formulaires avant de les publier pour vous assurer que vous êtes satisfait de leurs dispositions.
- Le premier champ de chaque ligne doit avoir la classe
wpforms-firsten plus de sa classe de colonne. Cela indique au plugin qu'il s'agit du premier élément et réinitialise toutes les colonnes précédentes dans le formulaire. - Dans la plupart des cas, lors de l'utilisation de classes de colonnes, vous devez définir la Taille du champ (également dans l'onglet Avancé du panneau Options du champ) sur Grande. Cela permet au champ de remplir tout l'espace disponible dans sa colonne et maintient un espacement égal à droite et à gauche par rapport aux champs voisins.
- Si vous utilisez une disposition multi-colonnes avec des champs conditionnels, tous les champs affichés conditionnellement seront alignés à gauche. Pour que ces champs restent alignés selon votre disposition préférée, vous pouvez utiliser cet extrait CSS :
Remarque : Si vous n'êtes pas familiarisé avec l'utilisation du CSS dans WPForms, veuillez consulter notre guide CSS pour débutants et notre documentation sur l'utilisation de classes personnalisées avec WPForms.
Questions fréquemment posées
Voici les réponses à quelques questions fréquentes sur la création de mises en page de formulaire multipanels.
Pourquoi la disposition multi-colonnes ne fonctionne-t-elle pas lorsque j'aperçois mon formulaire ?
Si le balisage moderne est activé dans vos paramètres WPForms, les classes CSS multi-colonnes ne fonctionneront pas lorsque vous visualiserez votre formulaire sur le front-end. Pour résoudre ce problème, vous devrez désactiver le balisage moderne.
Remarque : La désactivation du balisage moderne vous empêche de styliser les formulaires dans l'éditeur de blocs. Nous vous recommandons d'utiliser le champ Disposition pour créer des champs de formulaire multi-colonnes si vous souhaitez toujours styliser votre formulaire dans l'éditeur de blocs.
Pour cela, allez dans WPForms » Paramètres et sélectionnez l'onglet Général.
Après cela, faites défiler vers le bas et décochez l'option Utiliser le balisage moderne.
N'oubliez pas de sauvegarder vos modifications une fois que vous avez terminé.
Remarque : Si vous ne trouvez pas les paramètres du balisage moderne, vous devrez ajouter un filtre pour forcer WPForms à afficher cette option. Veuillez consulter notre guide de stylisation des formulaires pour plus de détails.
C'est tout ! Vous pouvez maintenant optimiser vos formulaires avec des dispositions multi-colonnes.
Ensuite, souhaitez-vous également que vos formulaires aient fière allure sur les appareils mobiles ? Vous pouvez configurer votre formulaire pour avoir une disposition multi-colonnes qui passe à l'affichage des champs en une seule colonne sur mobile, afin qu'il soit convivial sur tous les appareils.