Comment créer un formulaire de contact réactif avec plusieurs colonnes

Créer un formulaire de contact responsive avec plusieurs colonnes semble simple, mais lorsque vous commencez à y travailler, les choses peuvent se compliquer rapidement.

Vous vous demandez peut-être : « Puis-je vraiment rendre ce formulaire agréable sur tous les appareils sans casser le design ? » C'est une préoccupation légitime, surtout si vous avez eu du mal avec des formulaires qui ne s'adaptent pas bien ou qui semblent peu pratiques sur mobile.

La bonne nouvelle est que vous pouvez utiliser WPForms pour configurer un formulaire de contact responsive avec plusieurs colonnes. Suivez les étapes de ce guide pour commencer !

Créez votre formulaire multi-colonnes dès maintenant ! 🙂

Comment créer un formulaire multi-colonnes dans WPForms

Créer un formulaire multi-colonnes dans WPForms est incroyablement facile. Avant de commencer, assurez-vous d'avoir une licence WPForms Pro car vous obtiendrez le champ Mise en page ainsi que des tonnes de fonctionnalités utiles avec ce plan.

Une fois que vous avez acheté la licence et installé WPForms sur votre site, suivez simplement les étapes ci-dessous pour créer des mises en page en colonnes dans votre formulaire.

Étape 1. Créer un nouveau formulaire

Commençons par créer un nouveau formulaire avec une mise en page en colonnes. Pour ce faire, ouvrez votre tableau de bord WordPress et accédez à WPForms » Ajouter un nouveau.

Cela ouvrira l'interface du constructeur de formulaires WPForms. Vous pouvez entrer un nom pour votre formulaire et sélectionner un modèle.

Pour cet exemple, créons un formulaire à partir de zéro. Cela nous permettra d'abord de choisir une mise en page de formulaire multi-colonnes, puis d'attribuer différents champs à chaque colonne selon nos besoins.

Cependant, WPForms dispose de plusieurs modèles prêts à l'emploi qui utilisent plusieurs colonnes, tels que le modèle de formulaire de contact multi-colonnes.

Pour créer un formulaire à partir de zéro, placez votre curseur sur Formulaire vierge (ce devrait être le premier élément de la liste des modèles) et appuyez sur Créer un formulaire vierge.

WPForms chargera maintenant un formulaire vierge que vous pourrez commencer à construire à l'aide de simples contrôles de glisser-déposer.

Maintenant, ajoutons quelques champs à ce formulaire et organisons-les dans une mise en page multi-colonnes.

Étape 2. Ajouter des champs à la mise en page en colonnes

Pour diviser une zone de votre formulaire en plusieurs colonnes, il vous suffit d'ajouter le champ Mise en page.

Recherchez simplement dans la section Fancy Fields dans le panneau de gauche, et faites glisser le champ Mise en page sur le formulaire à votre droite.

Maintenant, nous allons ajouter les champs Nom, Email et Téléphone dans la colonne de gauche et un champ Adresse dans la colonne de droite.

La façon la plus simple de le faire est de cliquer sur une colonne pour la rendre active, puis de cliquer sur les champs que nous voulons ajouter à cette colonne.

Commençons par attribuer des champs à la colonne de gauche en premier. Nous cliquerons sur la colonne de gauche pour la définir comme active (comme indiqué par la flèche vers le haut).

Maintenant, nous cliquerons sur les champs Nom, Email et Téléphone afin qu'ils soient ajoutés directement à la colonne active un par un.

Ensuite, nous allons répéter le même processus pour la colonne de droite et y ajouter le champ Adresse.

Excellent ! Ce formulaire à 2 colonnes a maintenant fière allure.

Mais que faire si vous vouliez des largeurs différentes pour les deux colonnes ? Ou peut-être même plus de 2 colonnes ?

WPForms rend tout cela possible, comme nous le montrons à l'étape suivante.

À lire aussi : Formulaires à colonne unique : exemples et inspiration

Étape 3. Personnaliser la mise en page du formulaire

Par défaut, le champ Mise en page crée 2 colonnes de taille égale dans votre formulaire. Mais vous pouvez choisir parmi 8 mises en page différentes et ajouter jusqu'à 4 colonnes dans un seul formulaire.

Pour sélectionner un préréglage de mise en page, cliquez simplement sur le champ Mise en page après son ajout à votre formulaire.

Après cela, sélectionnez simplement une mise en page qui vous convient le mieux. Par exemple, si vous souhaitez une colonne étroite à gauche mais une plus large à droite, vous pouvez opter pour la 3ème option de mise en page.

Si vous souhaitez avoir 4 colonnes dans votre formulaire, choisissez simplement l'option de mise en page correspondante dans le volet de gauche et faites glisser et déposez les champs dans leurs colonnes respectives.

Nous vous recommandons d'expérimenter différentes mises en page et de prévisualiser votre formulaire sur le frontend pour vérifier que tout est en ordre. Notre guide sur la conception des mises en page de formulaires vous donnera un bon point de départ.

Parfois, la mise en page de formulaire choisie peut ne pas bien s'harmoniser avec la mise en page de votre page et entraîner des problèmes d'alignement. Mais si vous effectuez bien vos tests de formulaire et vérifiez tout avant de publier, cela ne devrait pas poser de problème.

Étape 4. Configurer la notification et la confirmation de votre formulaire

La configuration des notifications garantit que vous êtes toujours informé des nouvelles entrées de formulaire. Accédez à Paramètres, puis à Notifications dans le constructeur de formulaire.

À partir d'ici, modifiez les paramètres de notification par défaut, comme la ligne d'objet, ou changez les e-mails des destinataires selon vos besoins.

Vous pouvez maintenant sélectionner Confirmations dans le menu Paramètres pour configurer les réponses aux soumissions de formulaire réussies.

Choisissez le Type de confirmation qui convient le mieux à votre site : un message, l'affichage d'une page ou une redirection.

N'oubliez pas de sauvegarder vos modifications pour maintenir votre formulaire et ses paramètres à jour. Vous êtes maintenant prêt à publier le formulaire sur votre site WordPress !

Étape 5. Publier votre formulaire multi-colonnes

Il est maintenant temps de passer à l'étape finale de publication. Pour commencer le processus d'intégration, cliquez sur le bouton Intégrer à côté de Enregistrer.

Après avoir appuyé sur le bouton Intégrer, une fenêtre modale vous demandera si vous souhaitez intégrer votre formulaire dans une page existante ou en créer une nouvelle. Nous choisirons l'option Créer une nouvelle page , mais les étapes sont très similaires dans les deux cas.

Donnez un nom à votre page et appuyez sur C'est parti.

Vous trouverez le formulaire intégré dans cette nouvelle page. Apportez les modifications nécessaires à l'aide de l'éditeur WordPress ici, et lorsque vous êtes satisfait, appuyez sur Publier.

Voici à quoi ressemblera un formulaire multi-colonnes publié lorsqu'il sera vu depuis le frontend :

Et voilà ! Vous pouvez désormais créer facilement des formulaires à plusieurs colonnes dans WPForms sans code. N'oubliez pas : vous pouvez également styliser vos formulaires dans l'éditeur de blocs en toute simplicité.

FAQ sur la création d'un formulaire à plusieurs colonnes dans WordPress

Quel est l'avantage d'une mise en page de formulaire à plusieurs colonnes ?

Les formulaires à plusieurs colonnes peuvent être très bénéfiques du point de vue de l'expérience utilisateur. Un scénario courant où les formulaires à plusieurs colonnes sont utiles est lorsque vous avez un formulaire suffisamment long pour avoir un défilement vertical.

Dans ce scénario, vous pouvez réduire la longueur du formulaire et le rendre plus compact en organisant vos champs en deux colonnes ou plus.

De même, lors de l'intégration d'un long formulaire dans une barre latérale, il peut mieux s'adapter et réduire le défilement vertical si vous utilisez une mise en page en colonnes.

Il n'existe pas d'approche unique pour une conception de formulaire efficace, c'est pourquoi il est si important d'avoir différentes options de mise en page disponibles pour différents scénarios.

Comment créer un formulaire à plusieurs colonnes ?

Pour créer un formulaire à plusieurs colonnes dans WordPress, vous pouvez utiliser WPForms et son constructeur par glisser-déposer. Une fois votre formulaire configuré, vous pouvez facilement diviser les champs en plusieurs colonnes en utilisant le champ Mise en page.

WPForms garantit automatiquement que le formulaire est réactif, il s'ajustera donc sur les petits écrans pour une expérience utilisateur fluide.

Comment diviser les données en plusieurs colonnes ?

Avec WPForms, diviser les données en plusieurs colonnes est simple.

Lors de la création de votre formulaire, sélectionnez simplement les champs de formulaire que vous souhaitez afficher côte à côte et utilisez la fonctionnalité de glisser-déposer pour les ajouter à un champ Mise en page.

WPForms s'occupera du reste, en s'assurant que vos colonnes s'affichent correctement sur tous les appareils.

Ensuite, utilisez le Net Promoter Score pour les enquêtes

Si vous essayez d'évaluer les niveaux de satisfaction de vos clients, le meilleur outil d'enquête que vous puissiez utiliser à cette fin est le Net Promoter Score (NPS). WPForms facilite grandement la création de formulaires d'enquête avec l'échelle Net Promoter, comme nous l'expliquons dans ce guide.

Si vous rencontrez des difficultés avec des utilisateurs qui n'entrent pas correctement leur adresse e-mail, voici comment ajouter un champ de confirmation d'adresse e-mail pour éviter cela. De plus, vous trouverez peut-être notre guide sur les meilleures questions d'enquête « comment avez-vous entendu parler de nous » intéressant.

Et, si vous ne savez pas quel outil de prévention du spam utiliser sur vos formulaires, consultez notre comparaison sur Akismet vs reCAPTCHA.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.