Souhaitez-vous condenser vos formulaires en affichant les champs dans plusieurs colonnes ? WPForms permet de diviser facilement les formulaires en deux, trois, ou même des mises en page plus complexes.
Ce tutoriel vous montrera comment utiliser nos paramètres de mise en page multi-colonnes pour améliorer l'aspect de vos formulaires.
Remarque : nous recommandons d'utiliser le champ Disposition pour une approche plus simple, par glisser-déposer, de la construction de dispositions de formulaire avancées. Toutefois, 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 éditer 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 comprend 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 du générateur pour ouvrir son panneau d'options de 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.
Vous verrez alors apparaître plusieurs options de mise en page préétablies que vous pourrez utiliser dans votre formulaire.
Note : L'option Show Layouts n'est disponible que pour les utilisateurs de WPForms Lite. Si vous utilisez le plugin WPForms Pro, vous devrez utiliser le champ Layout pour créer des champs de formulaire multi-colonnes.
Dans notre exemple, nous voulons que les champs Nom et Courriel apparaissent l'un à côté de l'autre et qu'ils occupent chacun la moitié de la largeur du formulaire. Pour créer cette mise en page, nous allons sélectionner l'option qui affiche deux boîtes de taille égale.
Une fois cette mise en page sélectionnée, nous devons choisir la colonne dans laquelle nous voulons que ce champ particulier apparaisse. Comme le 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 CSS Classes du champ. L'outil de mise en page visuelle 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 procéder de la même manière pour notre champ Email. Cependant, nous le placerons dans la colonne de droite.
Lorsque vous avez terminé d'ajouter vos champs à votre mise en page, veillez à enregistrer vos modifications dans le générateur de formulaires.
Voici à quoi ressemble notre exemple de mise en page multi-colonnes dans la partie frontale de notre site :
Ajouter manuellement des classes CSS pour les colonnes multiples
Si vous préférez ne pas utiliser l'outil de mise en page visuelle, vous pouvez saisir manuellement les classes CSS dans le champ correspondant de l'onglet Avancé du panneau Options de champ.
Voici toutes les classes CSS disponibles pour les mises en page multi-colonnes :
- wpforms-one-half
- wpforms-one-third
- wpforms-one-fourth
- wpforms-one-fifth
- wpforms-one-sixth
- wpforms-deux-tiers
- wpforms-deux-quarts
- wpforms-deux-cinquièmes
- wpforms-deux-sixiè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 trois mises en page multi-colonnes différentes. Les étiquettes indiquent les classes CSS utilisées dans la liste ci-dessus.
Remarque : Le premier champ de chaque ligne de l'image ci-dessus utilise également l'attribut wpforms-first classe.
Remarque : Le premier champ de chaque ligne de l'image ci-dessus utilise également l'attribut wpforms-first classe.
Notes supplémentaires sur l'utilisation des mises en page multi-colonnes
Lors de l'utilisation des classes de colonnes, quelques points importants doivent être pris en compte :
- Les colonnes ne s'appliquent pas dans le générateur de formulaires. Elles ne sont visibles que lorsque le formulaire est affiché sur la page d'accueil de votre site. Testez toujours vos formulaires avant de les publier pour vous assurer que vous êtes satisfait de leur mise en page.
- Le premier champ de chaque ligne doit avoir la valeur
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 du formulaire. - Dans la plupart des cas, lorsque vous utilisez des classes de colonnes, vous devez régler la taille du champ (également dans l'onglet Avancé du panneau Options du champ) sur Grand. Cela permet au champ de remplir tout l'espace disponible dans sa colonne et de conserver un espacement égal à droite et à gauche par rapport aux champs voisins.
- Si vous utilisez une mise en page à plusieurs colonnes avec des champs conditionnelsTous les champs affichés sous conditions seront alignés à gauche. Pour que ces champs restent alignés selon la mise en page de votre choix, vous pouvez utiliser cet extrait CSS :
Note : Si vous n'êtes pas familier avec l'utilisation de CSS dans WPForms, veuillez consulter notre guide CSS pour les débutants et notre document sur l'utilisation de classes personnalisées avec WPForms.
Questions fréquemment posées
Voici les réponses aux questions les plus fréquentes sur la création de mises en page de formulaires multi-colonnes.
Pourquoi la mise en page multi-colonnes ne fonctionne-t-elle pas lorsque je prévisualise mon formulaire ?
Si Modern Markup est activé dans les paramètres de WPForms, les classes CSS multi-colonnes ne fonctionneront pas lorsque vous visualisez votre formulaire dans le frontend. Pour résoudre ce problème, vous devez désactiver Modern Markup.
Remarque : la désactivation de Modern Markup vous empêche de styliser les formulaires dans l'éditeur de blocs. Nous vous recommandons d'utiliser le champ Mise en page pour créer des champs de formulaire à plusieurs colonnes si vous souhaitez toujours styliser votre formulaire dans l'éditeur de blocs.
Pour cela, allez dans WPForms " Settings et sélectionnez l'onglet General.
Ensuite, faites défiler vers le bas et décochez l'option Utiliser des balises modernes.
Veillez à enregistrer vos modifications une fois que vous avez terminé.
Note : Si vous ne trouvez pas les paramètres Modern Markup, vous devrez ajouter un filtre pour forcer WPForms à afficher cette option. Veuillez consulter notre guide sur le style des formulaires pour plus de détails.
Voilà, c'est fait ! Vous pouvez désormais optimiser vos formulaires avec des mises en page multi-colonnes.
Vous souhaitez également que vos formulaires s'affichent parfaitement sur les appareils mobiles ? Vous pouvez configurer votre formulaire de manière à ce qu'il ait une présentation en plusieurs colonnes qui change pour afficher les champs en une seule colonne sur les appareils mobiles, de manière à ce qu'il soit convivial sur tous les appareils.