Vous souhaitez créer un formulaire de contact responsive dans WordPress ? Hors de la boîte, tous les formulaires que vous créez avec le plugin WPForms répondront et s’adapteront à n’importe quelle taille d’écran.
Cependant, si vous choisissez une mise en page à plusieurs colonnes pour votre formulaire, il peut être difficile pour les visiteurs mobiles de s’y retrouver.
Dans cet article, nous allons vous montrer comment créer un formulaire de contact réactif et afficher une mise en page de formulaire à plusieurs colonnes sous la forme d’une seule colonne pour les visiteurs mobiles uniquement.
Formulaire de contact réactif avec plusieurs colonnes
La création d’une mise en page de formulaire à plusieurs colonnes est une excellente stratégie pour réduire la hauteur de votre formulaire.
Réduire la hauteur de votre formulaire est utile lorsque vous souhaitez ajouter de nombreux champs à votre formulaire pour attirer des prospects de haute qualité. De cette façon, vous pouvez faire paraître votre formulaire plus court et inciter les visiteurs de votre site à le soumettre.
Mais le problème avec un formulaire à plusieurs colonnes est que lorsqu’il est affiché sur un appareil mobile, les visiteurs peuvent avoir du mal à naviguer. Après tout, ils devront peut-être faire défiler horizontalement pour voir l’intégralité du formulaire en fonction du type d’appareil dont ils disposent.
Cela peut entraîner un abandon de formulaire et nuire aux taux de conversion globaux.
Pour permettre aux visiteurs de votre site de naviguer plus facilement dans votre formulaire sur leurs petits appareils mobiles, il est fortement recommandé d’afficher votre mise en page de formulaire à plusieurs colonnes sous la forme d’une seule colonne. mais uniquement pour vos visiteurs mobiles.
Voyons donc comment procéder à l’aide de WPForms.
Créer un formulaire de contact simple
La première chose à faire est d’installer et d’activer le plugin WPForms. Pour plus de détails, consultez ce guide étape par étape sur la façon d’installer un plugin dans WordPress.
Vous devez maintenant créer un nouveau formulaire. Vous pouvez voir notre tutoriel sur la façon de créer un formulaire de contact simple pour commencer.
Dans notre exemple, nous allons ajouter quelques champs supplémentaires au formulaire pour le rendre plus long.
Tous les champs du formulaire que nous aurons dans notre formulaire de contact seront :
- nom
- Courrier électronique
- Leur site internet
- Comment a-t-il découvert pour nous ?
- message
N’oubliez pas que WPForms est très flexible et que vous pouvez avoir autant de champs de formulaire que vous le souhaitez. Par exemple, si vous devez créer un formulaire de demande d’emploi à l’aide du modèle prédéfini, qui comprend de nombreux champs de formulaire, ce n’est pas un problème.
Et si vous avez besoin d’en ajouter plus pour répondre à vos besoins, c’est bien aussi.
Nous nous efforçons de créer le plugin de création de formulaires WordPress le plus convivial pour les débutants sur le marché. Cependant, cela ne signifie pas que nous ne l’avons pas également doté de fonctionnalités intéressantes. Après tout, être facile à utiliser, c’est bien, mais être puissant l’est aussi.
Créer une mise en page de formulaire à plusieurs colonnes
WPForms est livré avec diverses mises en page de formulaires multi-colonnes. Vous pouvez créer un formulaire multi-colonnes en ajoutant des classes CSS avec des mises en page visuelles ou par insertion manuelle.
Dans notre exemple, nous allons créer une mise en page à deux colonnes en utilisant les options de mise en page visuelle.
Pour sélectionner une disposition de colonne pour votre formulaire, cliquez sur n’importe quel champ de votre formulaire dans le générateur de formulaire. Nous allons cliquer sur le nom Campagne.
Ensuite, dans le volet de gauche, faites défiler vers le bas et cliquez sur le Options avancées section. Sélectionnez ensuite Afficher les mises en page pour voir toutes les options de colonne disponibles.
À partir de là, nous sélectionnerons l’option de mise en page à deux colonnes.
Lorsque vous faites cela, la sélection de colonnes que vous avez choisie sera étendue afin que vous puissiez la personnaliser à votre guise.
Cliquez sur la colonne que vous souhaitez personnaliser. Vous remarquerez que les classes CSS seront automatiquement ajoutées au cours CSS Campagne.
Cela indique à votre formulaire de contact que vous souhaitez que le champ de formulaire que vous personnalisez, dans ce cas le nom champ, pour occuper la moitié de la largeur du formulaire, puisque nous avons coupé le formulaire en deux avec une mise en page à deux colonnes.
Plus précisément, 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.
Découvrez comment procéder en temps réel :
Suivez exactement les mêmes étapes pour tous les champs de formulaire de votre formulaire, en les mappant à la colonne de droite ou de gauche. Si vous choisissez une disposition différente, mappez chaque champ de formulaire à sa colonne respective.
Voici à quoi ressemble notre formulaire après avoir attribué à chaque champ de formulaire sa colonne.
Notez que nous n’attribuons pas le message champ de formulaire à n’importe quelle colonne. Au lieu de cela, nous le laissons dans une seule colonne.
Ajouter manuellement les classes CSS
Si vous préférez ne pas utiliser le générateur visuel pour créer et mapper des colonnes pour votre formulaire, vous pouvez écrire les classes CSS manuellement.
Si vous souhaitez consulter toutes les classes CSS disponibles pour les mises en page, jetez un œil ci-dessous.
- wpforms-un-moitié
- wpforms-un tiers
- wpforms-une-pièce
- wpforms-un cinquième
- wpforms-un-sixième
- wpforms-deux-tiers
- wpforms-deux pièces
- wpforms-deux cinquièmes
- wpforms-deux sixièmes
- wpforms-trois quarts
- wpforms-trois cinquièmes
- wpforms-trois sixièmes
- wpforms-quatre cinquièmes
- wpforms-cinq-sixièmes
L’image suivante montre trois dispositions de colonnes communes différentes. Le texte rouge sous chaque champ Classes CSS qui ont été utilisées dans la liste ci-dessus.
Afficher les champs dans une seule colonne sur les appareils mobiles
Maintenant que vous avez créé votre formulaire multi-colonnes, il est temps de vous assurer que vos visiteurs mobiles je ne vois pas les colonnes multiples.
Pour cela, il suffit d’ajouter la classe CSS wpforms-mobile-complet dans le champ Classes CSS dans Options avancées.
Assurez-vous de remplir ce formulaire dans tous les champs de votre formulaire afin qu’ils apparaissent de la même manière sur tous les appareils mobiles.
Voici à quoi ressemblera notre formulaire sur un appareil mobile :
Et voila! Vous savez maintenant comment créer un formulaire de contact réactif avec plusieurs colonnes, tout en affichant une seule colonne aux visiteurs du site mobile.
Si le gustó este artículo, es posible que también desee consultar 10 consejos para impulsar las conversiones de formularios de contacto, de modo que, ya sea que los visitantes de su sitio vean su formulario en su computadora de escritorio o dispositivo móvil, hagan clic en “Envoyer”.
Alors qu’est-ce que tu attends? Commencez dès aujourd’hui avec le plugin de formulaires WordPress le plus puissant.
Et n’oubliez pas, si vous aimez cet article, suivez-nous sur Facebook et Twitter.
