8 bonnes pratiques de mise en page pour une conception conviviale

Vous recherchez les meilleurs modèles de formulaires pour améliorer vos formulaires de contact ? La conception de modèles de formulaires pour des conversions maximales peut être délicate si vous n’avez pas beaucoup d’expérience sur laquelle vous appuyer.

Rehaussez un peu le style de votre formulaire ! Créer un formulaire moderne et professionnel ne signifie pas qu'il doit être ennuyeux. WPForms vous permet de styliser vos formulaires pour qu'ils correspondent aux couleurs ou au thème de votre site Web, ce qui signifie qu'il est plus facile que jamais d'intégrer votre formulaire à votre site.

Créez votre formulaire WordPress maintenant

Concevoir des mises en page de formulaires pour de meilleures conversions

J'ai constaté que la meilleure façon de concevoir un formulaire web est de penser à l'expérience utilisateur. Vos visiteurs n'auront pas envie de remplir un formulaire long et compliqué, surtout s'il semble intimidant.

L’utilisation de colonnes n’est qu’une technique que vous pouvez utiliser pour rendre vos conceptions de formulaires plus attrayantes. Une autre consiste à utiliser des formulaires multipages avec des barres de progression. En fin de compte, votre formulaire doit être clair, concis et facile à suivre pour les utilisateurs.

1. Utilisez une mise en page à 2 colonnes pour condenser les formulaires

On pense largement que les formulaires à colonne unique offrent de meilleurs taux de conversion que les formulaires à plusieurs colonnes.  Mais la vérité est qu’il n’existe pas d’approche unique pour les modèles de formulaires.

En fait, les tests A/B de conversion de formulaires de HubSpot montrent que les formulaires à 2 colonnes convertissent mieux que les formulaires à colonne unique dans des situations spécifiques.

Par exemple, ce n’est généralement pas bon pour l’expérience utilisateur (UX) si vous avez une longue liste de champs empilés sur une seule colonne.

L’exemple de formulaire en ligne à colonne unique ci-dessous a un défilement vertical considérable avec encore plus de champs en dessous de ce qui est montré ici, nous pouvons donc nous attendre à ce que les utilisateurs rencontrent des inconvénients lors du remplissage de celui-ci.

Mais le formulaire devient beaucoup plus compact si nous organisons le même nombre de champs proprement en 2 colonnes à la place.

Le bon côté, c’est que vous pouvez facilement créer des modèles à plusieurs colonnes à l’aide du champ WPForms Layout.

Une fois que vous ajoutez le champ Layout à votre formulaire, vous pouvez sélectionner le nombre de colonnes que vous souhaitez utiliser et faire glisser et déposer d’autres champs dans votre modèle choisi.

Si vous utilisez de nombreux champs de formulaire, vous pouvez toujours expérimenter différents modèles pour en trouver un qui peut réduire la longueur du formulaire et améliorer les conversions.

Lire aussi : Exemples et inspiration de formulaires à colonne unique

2. Adaptez les modèles de formulaires aux exigences de saisie

Lors de la conception de formulaires avec des modèles avancés, la largeur de vos colonnes est aussi importante que le nombre de colonnes que vous utilisez.

Par exemple, si vous vous attendez à ce que les utilisateurs saisissent du texte détaillé dans votre champ de zone de texte à droite, il est plus logique de rendre la colonne de ce champ plus large.

Une autre façon d’utiliser ce modèle serait d’avoir les informations de contact d’un côté et un champ de saisie de numéro de carte de crédit du côté le plus large.

Dans d’autres scénarios où les deux colonnes de votre formulaire ont des champs similaires, vous pouvez utiliser des colonnes de taille égale. Cela fonctionne bien avec des champs de saisie plus petits, tels que les numéros de téléphone, les cases à cocher, les listes déroulantes et les boutons radio.

WPForms offre des mises en page très flexibles et inclut 8 préréglages de mise en page différents parmi lesquels choisir. Vous pouvez passer d'une mise en page à l'autre en un seul clic.

Chaque mise en page de formulaire offre des avantages pour différentes situations. Il suffit d'utiliser votre meilleur jugement marketing pour choisir la mise en page la plus appropriée pour vos champs.

3. Séparez les longs formulaires avec des modèles multipages

Lorsque vous avez un formulaire court, tous les champs doivent naturellement tenir sur une seule page sans aucun problème. Mais les choses se compliquent lorsque vous avez beaucoup de champs.

Ce n'est pas une bonne idée de tout entasser sur une seule page si votre formulaire est trop long et prend beaucoup de temps à remplir. Au lieu de cela, vous pouvez rendre les formulaires plus longs plus faciles à gérer et améliorer la convivialité en les divisant en plusieurs pages.

WPForms vous permet de créer des formulaires multipages. Chaque page ne contient généralement qu'une ou deux questions. Cela maintient les formulaires compacts et crée une bonne expérience utilisateur tout en collectant les informations nécessaires.

Ma partie préférée ? Créer un formulaire multipage est aussi simple que de faire glisser et déposer un séparateur de page où vous voulez le diviser.

Ces formulaires incluent également une barre de progression qui aide les utilisateurs à voir quelle partie du formulaire ils ont complétée et ce qu'il leur reste à terminer.

Vous pouvez même combiner des mises en page à deux colonnes dans un formulaire multiphase. Si l'une de vos pages de formulaire est plus longue que les autres, vous pouvez utiliser une mise en page à deux colonnes pour cette section afin de rendre votre formulaire plus uniforme d'une page à l'autre.

Si vous souhaitez augmenter les taux de conversion avec vos formulaires, je vous recommande d'essayer le module complémentaire WPForms Lead Forms. Il vous permet également de créer un formulaire multipage, mais dans le seul but de la génération de prospects.

Le module complémentaire Lead Forms vous donne également la possibilité de personnaliser et de styliser un peu plus votre formulaire. WPForms offre de nombreuses fonctionnalités différentes pour vous aider à minimiser l'abandon de formulaire et à améliorer votre taux de complétion de formulaire.

En fin de compte, c'est à vous de décider si vous souhaitez utiliser différentes mises en page pour obtenir plus de conversions ou simplement ajouter une barre de progression en haut.

4. Utilisez des modèles adaptés aux mobiles

Les mises en page de formulaires sophistiquées sont superbes et convertissent bien sur les ordinateurs de bureau. Mais le mobile est une bête différente.

Un formulaire multicolonne fonctionnant parfaitement sur ordinateur de bureau peut se casser ou s'afficher incorrectement lorsqu'il est vu sur mobile si vous ne faites pas attention.

Certains constructeurs de formulaires ne sont pas réactifs sur mobile à moins que vous ne fassiez un effort supplémentaire pour ajuster les codes CSS. Bien sûr, cela nécessite que vous ayez des connaissances en CSS.

Heureusement, WPForms a des fonctionnalités de premier ordre. Même les formulaires multicolonnes les plus avancés construits avec WPForms sont réactifs sur mobile par conception. Aucun CSS nécessaire.

Cela signifie que les formulaires mobiles se réduiront automatiquement à une seule colonne si un appareil ne peut pas charger correctement votre mise en page multicolonne.

En conséquence, vous pouvez être sûr que vos visiteurs bénéficient toujours de la meilleure expérience, même sur les appareils mobiles. Si vous souhaitez contrôler ce comportement, voici comment afficher les champs en une seule colonne sur mobile.

5. Utilisez des formulaires conversationnels

Les formulaires conversationnels permettent aux utilisateurs de répondre à une question à la fois. Cette disposition de formulaire peut être très utile lorsque vous souhaitez que les utilisateurs se concentrent sur chaque question spécifique avec un minimum de distractions.

C'est généralement une bonne idée d'utiliser la mise en page conversationnelle pour les enquêtes ou les formulaires de commentaires. Le module complémentaire Conversational Forms, disponible avec WPForms Pro, transforme n'importe quel formulaire en ce format d'une question à la fois.

Si vous utilisez la logique conditionnelle avec vos formulaires conversationnels, vous pouvez diriger les répondants directement vers la page dont ils ont besoin. Cela signifie qu'ils ne perdent pas de temps à trier les questions de formulaire non pertinentes. Au lieu de cela, le formulaire imite presque une sorte de chat réactif.

6. Personnalisez les styles de votre formulaire

Rehaussez un peu le style de vos formulaires ! Créer un formulaire moderne et professionnel ne signifie pas qu'il doit être ennuyeux. WPForms vous permet de styliser vos formulaires pour qu'ils correspondent aux couleurs ou au thème de votre site Web, ce qui rend plus facile que jamais l'intégration de votre formulaire sur votre site.

Une fois que vous avez créé et intégré votre formulaire dans un brouillon d'article ou de page sur votre site WordPress, vous pouvez facilement modifier les styles des étiquettes de champ, du bouton de soumission, et plus encore. Vous n'avez pas besoin de connaître le code CSS pour utiliser cette fonctionnalité et créer de beaux formulaires.

Rien de tout cela ne nécessite une seule ligne de CSS. Si vous souhaitez voir toutes les options, voici comment choisir vos paramètres de style de formulaire. De petites touches comme un espacement cohérent, la couleur du bouton et le style des étiquettes contribuent grandement à rendre un formulaire digne de confiance.

7. Utilisez des messages d’erreur et une validation en ligne

Peu importe la qualité de la conception de votre formulaire, vous devez vous attendre à ce que les utilisateurs commettent occasionnellement des erreurs de saisie. Par exemple, ils peuvent laisser des champs obligatoires vides ou saisir des informations dans le mauvais format.

Par conséquent, il est judicieux d'afficher des messages de validation en ligne qui mettent clairement en évidence le problème et offrent des conseils pour le corriger facilement.

WPForms utilise automatiquement des messages d'erreur en ligne qui apparaissent juste sous le champ concerné. Cela permet aux visiteurs de corriger les erreurs en temps réel et réduit de manière proactive la confusion des utilisateurs.

Il existe de nombreux types de messages de validation de champ dans WPForms qui apparaissent en fonction de la nature de l'erreur de saisie. Vous pouvez donc déployer vos formulaires librement et laisser WPForms s'occuper de tout problème de validation.

Une autre façon de minimiser la confusion de vos utilisateurs afin qu'ils ne fassent pas d'erreurs est d'ajouter du texte d'espace réservé à vos champs. Cela montrera aux visiteurs comment remplir votre formulaire avec soit un texte d'instruction, soit un exemple de l'apparence attendue de la saisie.

8. Positionnez vos étiquettes pour un balayage facile

L'emplacement de vos étiquettes de champ a un impact réel sur la rapidité avec laquelle les gens peuvent parcourir un formulaire. Les étiquettes placées directement au-dessus de chaque champ sont les plus faciles à balayer, car l'œil parcourt le formulaire de haut en bas sans sauter d'un côté à l'autre.

Gardez chaque étiquette à proximité du champ qu'elle décrit afin qu'il n'y ait aucun doute sur celui auquel elle appartient. Et résistez à l'envie d'utiliser le texte d'espace réservé comme seule étiquette, car il disparaît dès que quelqu'un commence à taper et le laisse deviner.

WPForms place les étiquettes au-dessus de vos champs par défaut, vous offrant ainsi une structure claire et facile à parcourir dès le départ. Vous pouvez ajuster la position et le style des étiquettes dans le générateur de formulaires et l'éditeur de blocs chaque fois qu'une mise en page spécifique nécessite quelque chose de différent.

FAQ sur la conception de la mise en page des formulaires

La conception de la mise en page des formulaires est un sujet fréquent lorsque les gens essaient d'obtenir plus de leurs formulaires. Voici des réponses rapides aux questions que j'entends le plus souvent sur la structuration et la mise en page des formulaires WordPress.

Comment les formulaires doivent-ils être structurés ?

Je recommande de structurer vos formulaires en fonction du type d'informations que vous collectez dans chaque section. Commencez par les informations personnelles et regroupez ces champs, puis passez au groupe logique suivant.

Dans WPForms, vous pouvez utiliser des séparateurs de section pour ajouter des titres afin que la structure de votre formulaire reste claire et facile à suivre. Le regroupement des champs connexes sous des titres clairs donne à même un long formulaire une impression d'organisation et de facilité de navigation.

Pourquoi devrais-je limiter le nombre de champs sur mon formulaire ?

Limiter le nombre de champs aide à prévenir l'abandon de formulaire, c'est-à-dire lorsqu'une personne commence à remplir votre formulaire mais abandonne avant de le soumettre. Cela se produit souvent parce que les utilisateurs se sentent dépassés par la longueur d'un formulaire. La réduction des champs et d'autres bonnes pratiques de conception de formulaires contribuent grandement à maintenir l'engagement des utilisateurs jusqu'au bouton de soumission.

Dois-je utiliser une mise en page de formulaire à une seule colonne ou à plusieurs colonnes ?

Pour la plupart des formulaires, une seule colonne est le choix le plus sûr car elle est facile à parcourir et se casse rarement sur mobile. Optez pour plusieurs colonnes lorsque vous souhaitez associer des champs courts et liés, comme la ville et le code postal, ou raccourcir un formulaire qui semble trop long. Quel que soit votre choix, prévisualisez toujours le formulaire sur un téléphone avant de le publier.

Ensuite, explorez d'autres options de mise en page de formulaires

Si vous décidez comment regrouper les champs répétitifs, notre comparaison entre le champ répéteur et le champ de mise en page explique quand utiliser chacun d'eux.

Les enquêtes qui affichent une question à la fois sont excellentes pour l'expérience utilisateur et faciles à créer avec WPForms. Voici comment créer des enquêtes qui affichent une question à la fois.

Et pour vous assurer que les gens saisissent correctement leurs coordonnées, consultez notre guide sur l'ajout d'un champ de confirmation d'adresse e-mail.

Créez une meilleure mise en page de formulaire dès aujourd'hui

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.