### [Afficher les champs dans une seule colonne sur mobile](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/) **Publié le :** 23 novembre 2023 **Auteur :** David Ozokoye **Extrait :** Apprenez à utiliser les classes CSS de mise en page pour afficher vos formulaires dans une seule colonne sur les appareils mobiles. **Contenu :** Voulez-vous convertir une mise en page de formulaire à plusieurs colonnes en une seule colonne lorsqu'elle est vue sur mobile ? Bien que l'utilisation de plusieurs colonnes puisse être du plus bel effet 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. - [Créer une mise en page de formulaire à plusieurs colonnes](#multi-column) - [Afficher les champs dans une seule colonne sur mobile](#single-column-mobile) **Remarque :** Nous vous recommandons d'utiliser le [champ de mise en page](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) pour une approche plus simple, 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 devez d'abord vous assurer que WPForms est [installé et activé](https://wpforms.com/docs/install-wpforms-plugin/ "Comment installer le plugin WPForms") sur votre site WordPress et que vous avez [vérifié votre licence](https://wpforms.com/docs/verify-wpforms-license/ "Comment vérifier votre licence WPForms"). Ensuite, vous pouvez [créer un nouveau formulaire](https://wpforms.com/docs/creating-first-form/ "Comment créer votre premier formulaire") ou en modifier un existant pour accéder au constructeur de formulaires. Consultez notre [modèle de formulaire de demande de devis multi-colonnes](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) personnalisable pour commencer facilement. ## Créer une mise en page de formulaire à plusieurs colonnes Avec WPForms, vous pouvez facilement [créer des formulaires avec plusieurs colonnes.](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "Comment créer des mises en page de formulaire multi-colonnes dans WPForms"). 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. **Remarque :** 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 constructeur 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é](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/) à votre formulaire. **Catégories :** Style, Style et personnalisation ---