Résumé IA
Voulez-vous convertir une mise en page de formulaire à plusieurs colonnes en une seule colonne lors de la visualisation sur mobile ? Bien que l'utilisation de plusieurs colonnes puisse avoir un bel aspect sur les grands écrans, le passage à une mise en page de formulaire à colonne unique sur les petits écrans rendra vos formulaires professionnels et faciles à utiliser.
Ce tutoriel vous montrera comment transformer vos mises en page à plusieurs colonnes en une seule colonne uniquement pour les utilisateurs qui visitent votre site sur un appareil mobile.
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 formulaire avancées qui s'ajustent automatiquement à la taille de l'écran des utilisateurs. Cependant, les classes CSS de mise en page abordées dans ce tutoriel sont toujours prises en charge.
Avant de commencer, vous devrez 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 une mise en page de formulaire à plusieurs colonnes
Avec WPForms, vous pouvez facilement créer des formulaires avec plusieurs colonnes. Pour cet exemple, créons une mise en page à deux colonnes en utilisant la classe CSS suivante : wpforms-one-half. Voici un exemple de l'apparence de notre formulaire multi-colonnes.
Note : Le premier champ de chaque ligne dans l'image ci-dessus utilise également la classe wpforms-first (c'est-à-dire wpforms-one-half wpforms-first. Cette classe indique au champ qu'il doit commencer une nouvelle ligne.
Après avoir créé une mise en page de formulaire à deux colonnes, nous voulons nous assurer que les champs du formulaire sont affichés dans une seule colonne uniquement pour les utilisateurs qui visitent votre site sur un appareil mobile.
Afficher les champs dans une seule colonne sur mobile
Pour afficher les champs dans une seule colonne sur mobile, nous devrons utiliser une classe CSS prédéfinie. Dans le générateur de formulaires, cliquez sur un champ pour afficher les Options du champ. Ensuite, sous la section Avancé, ajoutez la classe wpforms-mobile-full au champ Classes CSS.
Enfin, faites de même pour les autres champs du formulaire, et n'oubliez pas de cliquer sur le bouton Enregistrer pour conserver les modifications.
Maintenant, pour les visiteurs mobiles, votre mise en page de formulaire multi-colonnes sera affichée comme une seule colonne. Voici un exemple de l'apparence du formulaire sur un appareil mobile :
C'est tout ! Vous pouvez maintenant créer des formulaires qui passent de mises en page multi-colonnes à une seule colonne sur les appareils mobiles.
Ensuite, souhaitez-vous personnaliser davantage l'apparence de votre formulaire ? Alors n'oubliez pas de consulter notre tutoriel sur l'ajout de CSS personnalisé à votre formulaire.