Résumé IA
Souhaitez-vous avoir plus de contrôle sur la mise en page de vos formulaires WordPress ? Le champ Mise en page pour WPForms offre une solution puissante pour créer des mises en page de formulaires avancées qui s'adaptent automatiquement à la taille de l'écran des utilisateurs.
Ce tutoriel vous montrera comment utiliser le champ Mise en page dans WPForms.
Avant de commencer, assurez-vous d'installer et d'activer WPForms et de vérifier votre licence. Ensuite, créez un nouveau formulaire ou modifiez-en un existant pour accéder au générateur de formulaires.
Ajouter un champ Mise en page à votre formulaire
Dans le générateur de formulaires, vous trouverez le champ Mise en page dans la section Champs fantaisistes. Cliquez sur le champ Mise en page ou faites-le glisser et déposez-le dans la zone d'aperçu pour l'ajouter à votre formulaire.
Choisir une disposition en colonnes
Une fois que vous avez ajouté un champ Mise en page à votre formulaire, il est temps de choisir votre mise en page préférée.
Le champ Mise en page propose plusieurs options pour organiser vos champs de formulaire en différentes colonnes. Pour ouvrir le panneau Options du champ et afficher les mises en page de colonnes disponibles, cliquez sur le champ Mise en page dans la zone d'aperçu du formulaire.
Vous verrez maintenant plusieurs mises en page disponibles comportant entre 1 et 4 colonnes. Par défaut, le champ Mise en page sélectionne la mise en page à 2 colonnes, qui a 2 colonnes de largeur égale.
Nous utiliserons la mise en page par défaut dans ce tutoriel, mais la fonctionnalité reste la même pour toutes les mises en page.
Remarque : Vos champs de formulaire ne s'afficheront pas correctement si vous avez précédemment utilisé l'option de classes CSS pour activer la mise en page multi-colonnes. Consultez notre section FAQ pour plus de détails.
Définir l'ordre d'affichage des champs
La liste déroulante Affichage détermine l'ordre des champs dans votre formulaire. Les champs dans les nouveaux champs Mise en page sont définis pour s'afficher par lignes par défaut, permettant aux utilisateurs de naviguer dans le formulaire horizontalement de gauche à droite.
Pour modifier cet ordre, cliquez sur la liste déroulante Affichage et sélectionnez l'option préférée.
Remarque : Si votre formulaire inclut un champ Mise en page avec plusieurs champs empilés, il est recommandé d'utiliser l'option Lignes – les champs sont ordonnés de gauche à droite de la liste déroulante Affichage. Cela garantit que les champs s'affichent dans la vue mobile, les notifications de formulaire et les entrées exactement comme vous les avez organisés, en préservant la structure du formulaire et l'expérience utilisateur prévues.
Changer de mise en page
Si vous souhaitez modifier les mises en page, même après avoir ajouté des champs à des colonnes individuelles, sélectionnez simplement l'une des mises en page disponibles dans le panneau Options du champ.
Les colonnes et leur contenu ajusteront automatiquement leur taille et leur position en fonction de la taille de l’écran de l’utilisateur.
Remarque : S’il y a moins de colonnes dans la mise en page nouvellement sélectionnée que dans la précédente, tous les champs de la dernière colonne seront supprimés du champ Mise en page et placés dans le corps principal de votre formulaire.
Utilisation de plusieurs mises en page
Si vous le souhaitez, vous pouvez ajouter plusieurs champs Mise en page à votre formulaire et choisir différentes configurations de colonnes pour chacun d’eux.
Par exemple, un champ Mise en page peut avoir 1 colonne, et un autre champ Mise en page peut avoir 2 colonnes, ce qui vous donne plus de flexibilité dans l’apparence de votre formulaire.
Pour vous aider à différencier chaque champ Mise en page, n’hésitez pas à ajouter une étiquette au champ Étiquette dans le panneau Options du champ.
Étant donné que les champs Mise en page agissent comme des conteneurs, ils constituent la solution idéale pour regrouper des éléments dans le formulaire.
Ajouter des champs à des colonnes individuelles
Pour ajouter un champ à n’importe quelle colonne, cliquez et faites glisser le champ depuis la barre latérale vers la colonne cible.
Remarque : Les champs Mise en page, Saut de page, Répéteur et Aperçu des entrées ne peuvent pas être ajoutés à l’intérieur d’un champ Mise en page.
La plupart des champs ajoutés au champ Mise en page auront par défaut une grande taille de champ, ce qui signifie qu’ils occuperont toute la largeur de la colonne. Cependant, la taille des champs Texte enrichi et Texte de paragraphe est déterminée par la hauteur, avec une taille de champ moyenne par défaut à l’intérieur du champ Mise en page.
Pour une hauteur réglable pour le champ Texte de paragraphe, consultez notre documentation pour les développeurs.
Activation de la logique conditionnelle
Le champ Mise en page prend également en charge l’activation de la logique conditionnelle pour afficher ou masquer un champ Mise en page entier en fonction de la sélection de l’utilisateur.
Remarque : Vous aurez besoin de WPForms version 1.9.0 ou supérieure pour accéder à la fonctionnalité de logique conditionnelle pour le champ Mise en page.
Pour activer la logique conditionnelle, cliquez sur le champ Mise en page pour ouvrir son panneau Options du champ. Naviguez ensuite vers l’onglet Logique intelligente.
Une fois sur place, basculez l’option Activer la logique conditionnelle sur la position ACTIVÉ.
Après l’avoir activée, des options supplémentaires apparaîtront pour configurer la règle de logique conditionnelle. Pour notre exemple, nous avons ajouté un champ Choix multiple qui demande aux utilisateurs s’ils souhaitent laisser un avis. Ensuite, nous avons défini la règle pour Afficher ce champ si Souhaitez-vous laisser un avis ? est Oui.
Cette règle masquera tous les champs du champ Mise en page lorsque vous publierez votre formulaire. Les champs ne s’afficheront que lorsque l’utilisateur sélectionnera Oui parmi les options du champ Choix multiple.
Après avoir activé la logique conditionnelle pour un champ Mise en page, l’option d’utilisation de la logique conditionnelle sera désactivée sur les champs individuels à l’intérieur du champ Mise en page.
Remarque : Pour plus de détails sur le fonctionnement de la logique conditionnelle, assurez-vous de consulter notre guide complet sur l'utilisation de la logique conditionnelle dans WPForms.
Supprimer un champ Mise en page de votre formulaire
Si vous souhaitez supprimer un champ de mise en page de votre formulaire, survolez le champ et cliquez sur l’icône de corbeille.
Étant donné que la suppression d’un champ de mise en page supprimera également tous les champs qu’il contient, une superposition apparaîtra vous demandant de confirmer la suppression. Cliquez sur OK si vous acceptez de supprimer le champ de mise en page et tous les champs que vous y avez ajoutés.
Remarque : Vous ne pourrez pas récupérer les champs que vous avez ajoutés dans le champ de mise en page une fois qu’ils seront supprimés.
Aperçu de votre formulaire
Une fois que vous avez ajouté des champs aux colonnes de vos champs de mise en page, enregistrez vos modifications en cliquant sur Enregistrer.
Ensuite, cliquez sur le bouton Aperçu pour ouvrir l’aperçu du formulaire dans un nouvel onglet.
Sur la page d’aperçu, vous verrez une version fonctionnelle de votre formulaire. Ici, vous pouvez interagir avec votre formulaire et tester sa mise en page visuelle. Vous pourrez également tester le bon fonctionnement de votre formulaire sur différentes tailles d’écran.
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 le champ de mise en page ne s’affiche-t-il pas correctement lorsque j’aperçois mon formulaire ?
Si vous utilisiez auparavant l’option de classes CSS pour créer des colonnes multiples sur votre formulaire, cela empêchera le champ de mise en page de fonctionner correctement. Vous devrez supprimer les classes CSS de vos champs de formulaire avant d’utiliser le champ de mise en page.
Pour ce faire, ouvrez le générateur de formulaire et cliquez sur le champ que vous souhaitez modifier pour ouvrir le panneau Options du champ. Ensuite, accédez à l’onglet Avancé et supprimez la ou les classes CSS multipanels du champ Classes CSS.
Après avoir supprimé les classes CSS, assurez-vous d’enregistrer vos modifications et d’apercevoir votre formulaire pour vous assurer qu’il s’affiche et fonctionne comme prévu.
Puis-je afficher ou masquer un champ de mise en page en fonction de la sélection de l’utilisateur ?
Oui, vous pouvez afficher ou masquer un champ de mise en page dans vos formulaires en fonction des réponses fournies par vos utilisateurs. Cela nécessite d’activer la logique conditionnelle sur le champ de mise en page spécifique que vous souhaitez masquer. Veuillez vous référer à notre section sur la logique conditionnelle pour plus de détails.
Puis-je aligner le bouton de soumission sur la même ligne que le champ de mise en page ?
Oui. Si vous souhaitez utiliser le champ de mise en page pour créer un formulaire sur une seule ligne, vous devrez ajouter une classe CSS personnalisée dans les paramètres du formulaire.
Pour ce faire, allez dans Paramètres » Général dans votre générateur de formulaire, et ajoutez la classe CSS inline-fields dans le champ Classe CSS du formulaire.
Remarque : L’utilisation de la classe inline-fields dans WPForms peut parfois entrer en conflit avec les styles de votre thème WordPress. Pour en savoir plus, consultez notre tutoriel sur l’affichage des formulaires sur une seule ligne.
C’est tout ! Vous savez maintenant comment utiliser le champ de mise en page dans WPForms.
Ensuite, souhaitez-vous savoir comment afficher différentes options dans votre formulaire en fonction des interactions des utilisateurs ? Consultez notre guide sur l’utilisation de la logique conditionnelle dans WPForms.