Comment personnaliser les formulaires WordPress avec WPForms

Créer une expérience personnalisée pour vos utilisateurs peut faire toute la différence pour augmenter l'engagement et les taux de complétion des formulaires.

Si vous gérez un site WordPress, vous vous demandez peut-être comment adapter les formulaires pour les rendre plus pertinents pour vos visiteurs sans ajouter de complexité.

Dans ce guide, je vais vous présenter des fonctionnalités puissantes de WPForms qui facilitent la création de formulaires personnalisés et expliquer comment elles peuvent transformer votre création de formulaires et améliorer la satisfaction des utilisateurs.

Personnalisez votre formulaire WordPress dès maintenant ! :)

1. Choix IA pour transformer la création de vos formulaires

Bien que la création de formulaires soit rapide et simple avec WPForms, le remplissage des menus déroulants et des questions à choix multiples prend toujours du temps. Pour vous faciliter la tâche, vous pouvez compter sur la fonctionnalité Choix IA.

Il vous suffit de cliquer sur un bouton et de décrire ce dont vous avez besoin, et l'IA de WPForms remplira vos cases à cocher, listes déroulantes et options à choix multiples en quelques secondes !

Le meilleur de tout, c'est que Choix IA est disponible pour tout le monde, que vous ayez une licence WPForms gratuite ou payante. Voici comment vous pouvez l'utiliser :

Comment fonctionnent les Choix IA dans WPForms

Créez n'importe quel type de formulaire avec des champs à choix multiples ou déroulants, ou gagnez du temps en utilisant l'un de nos modèles de formulaires pré-faits. WPForms propose une énorme liste de plus de 2 100 modèles de formulaires WordPress.

Une fois dans le constructeur de formulaires, ouvrez les Options de champ pour le champ à choix multiples ou déroulant pertinent. Ensuite, cliquez sur le bouton Générer les choix pour commencer à ajouter une liste de Choix IA !

Une fenêtre contextuelle apparaîtra où vous pourrez maintenant ajouter des détails concernant la liste dont vous avez besoin en une ou deux phrases. Une fois terminé, appuyez sur la touche Entrée.

L'assistant IA de WPForms va maintenant générer une liste de choix. Vous n'avez pas besoin de les copier-coller : cliquez sur le bouton Insérer les choix et ils seront automatiquement ajoutés à votre formulaire.

Il faut maintenant quelques secondes pour faire ce qui prenait des heures. Vous pouvez réorganiser les listes, supprimer des options ou ajouter plus de détails. Les possibilités sont infinies !

Sans oublier que si vous n'êtes pas satisfait des résultats générés, vous pouvez toujours demander à l'IA de WPForms d'améliorer la réponse jusqu'à ce que vous soyez satisfait.

À lire également : Bonnes pratiques WPForms : comment créer le formulaire parfait pour votre site

2. Géolocalisation pour une personnalisation ciblée

Le module complémentaire de géolocalisation WPForms est un outil incroyablement utile pour capturer et utiliser la localisation d'un visiteur afin de personnaliser les champs du formulaire.

En s'intégrant à Google Maps, cette fonctionnalité peut détecter automatiquement la ville, l'état et le pays de l'utilisateur, vous permettant de personnaliser l'expérience du formulaire en fonction de sa localisation.

Par exemple, vous pouvez automatiquement définir un pays ou un état par défaut dans un menu déroulant, ce qui permet aux utilisateurs de remplir plus facilement les formulaires sans avoir à sélectionner manuellement leur localisation.

Comment fonctionne la géolocalisation dans WPForms

Pour configurer la géolocalisation dans WPForms, vous devrez installer et configurer le module complémentaire de géolocalisation. Voici un bref aperçu des étapes pour commencer :

Tout d'abord, assurez-vous d'avoir WPForms Pro, car le module complémentaire de géolocalisation n'est disponible que dans le plan Pro. Ensuite, installez et activez le module complémentaire.

Une fois que vous avez activé le module complémentaire, vous pouvez configurer ses paramètres en accédant à WPForms » Paramètres et en sélectionnant l'onglet Géolocalisation. Ensuite, suivez les étapes de ce guide pour connecter votre formulaire à Google Places.

Personnalisation de l'autocomplétion d'adresses

Voici un exemple de la façon dont votre formulaire pourrait apparaître aux utilisateurs lorsque les options d'autocomplétion d'adresse et de carte sont activées pour permettre à vos utilisateurs de soumettre vos formulaires encore plus rapidement !

Champ de carte interactive

Au-delà de l'autocomplétion d'adresses, le module complémentaire Géolocalisation comprend également un champ Carte qui intègre une carte interactive directement dans vos formulaires.

C'est parfait pour des expériences personnalisées où vous souhaitez que les visiteurs :

• Sélectionnent leur emplacement préféré : Affichez plusieurs emplacements de magasins, succursales ou centres de service sur une carte avec des boutons radio pour la sélection.
• Visualisent les zones de service : Affichez les zones de couverture ou les zones de livraison afin que les visiteurs puissent voir s'ils se trouvent dans votre région de service avant de soumettre.
• Choisissent les lieux d'événements : Pour les formulaires d'inscription à des événements, permettez aux participants de voir tous les lieux et de choisir celui qui est le plus proche d'eux.
• Personnalisent les marqueurs : Utilisez des icônes et des couleurs personnalisées pour correspondre à votre marque ou pour différencier les types d'emplacements (magasins par rapport aux entrepôts, par exemple).

Le champ Carte prend en charge l'intégration Google Maps et Mapbox, et vous pouvez activer des fonctionnalités telles que « Trouver un emplacement à proximité » pour utiliser la géolocalisation du navigateur du visiteur afin de l'aider à identifier l'option la plus proche.

Ce niveau de personnalisation basé sur la localisation rend les formulaires plus intuitifs et aide à garantir que les soumissions sont acheminées vers la bonne équipe ou le bon emplacement dès le départ.

3. Pré-remplir les champs de formulaire à l'aide de paramètres d'URL ou de chaînes de requête

Pré-remplir les champs de formulaire avec WPForms à l'aide de paramètres d'URL ou de chaînes de requête est un excellent moyen d'améliorer l'expérience utilisateur, en particulier pour les visiteurs récurrents. Cela vous permet de transmettre des données directement dans vos formulaires, évitant ainsi aux utilisateurs de devoir ressaisir des informations.

Utilisation des chaînes de requête pour pré-remplir automatiquement un champ de texte

Les chaînes de requête sont de petites informations ajoutées à une URL, souvent après un point d'interrogation (?). Elles sont utilisées pour transmettre des données d'une page à une autre.

Dans WPForms, les chaînes de requête peuvent pré-remplir automatiquement les champs de formulaire lorsqu'un utilisateur visite une page avec cette URL spécifique.

C'est un excellent moyen de personnaliser les formulaires pour les utilisateurs qui reviennent sur votre site ou qui ont cliqué sur un lien spécial à partir d'un e-mail ou d'une publicité.

Par exemple, si vous souhaitez que le champ du nom de l'utilisateur soit pré-rempli, vous pourriez créer une URL qui ressemble à ceci :

https://yourwebsite.com/form-page/?name=John

Dans ce cas, « name » est le champ du formulaire et « John » est la valeur qui apparaît automatiquement dans ce champ lorsque l'utilisateur visite la page.

Consultez ce guide pour apprendre comment utiliser les chaînes de requête pour pré-remplir automatiquement un champ de texte.

Configuration des formulaires pré-remplis dans WPForms

Une autre façon de configurer les champs de formulaire pré-remplis consiste à demander à votre visiteur de remplir d'abord un formulaire de base, puis de transmettre ces informations à un deuxième formulaire lorsqu'il clique sur le bouton Envoyer.

Pour ce faire, vous devrez définir le Type de confirmation sur Accéder à l'URL (Redirection) et configurer les champs à remplir à l'aide d'une chaîne de requête.

Par exemple, vous ajouteriez une URL comme celle-ci à l'URL de redirection pour activer le remplissage dynamique des champs :

• ?wpf: Ceci marque le début de la chaîne de requête pour la fonction de pré-remplissage de WPForms.
• ID du formulaire : Il indique à quel formulaire les données iront (dans ce cas, l'ID du formulaire serait 20).
• ID du champ : Ceci identifie le champ du formulaire que vous ciblez (ici, l'ID du champ est 1).
• Identifiant de sous-champ (facultatif) : Ceci est utilisé si vous ciblez une partie spécifique d'un champ en plusieurs parties, comme la ville dans un champ d'adresse (par exemple, étiqueté « sous-champ »).
• = : Le signe égal indique au système où commence la valeur du champ.
• Valeur : Ce sont les données que vous souhaitez pré-remplir dans le champ. Tous les espaces dans la valeur doivent être remplacés par %20 pour fonctionner correctement dans l'URL.

À lire également :Idées créatives avec WPForms pour développer votre entreprise

4. Utiliser la logique conditionnelle pour des formulaires dynamiques

La logique conditionnelle dans WPForms est une fonctionnalité puissante qui vous permet de contrôler les champs que vos utilisateurs voient en fonction de leurs saisies précédentes.

Par exemple, si vous recueillez des commentaires, vous pouvez poser des questions de suivi plus détaillées si l'utilisateur indique son insatisfaction.

Un autre exemple est d'adapter les formulaires à différents types de clients : si un utilisateur sélectionne « Entreprise » au lieu de « Particulier », vous pouvez ajuster dynamiquement le formulaire pour afficher les champs pertinents pour les demandes liées aux entreprises.

Configuration de la logique conditionnelle

L'une des façons les plus pratiques d'utiliser la logique conditionnelle dans WPForms est de faire apparaître ou disparaître des champs en fonction de ce que les utilisateurs sélectionnent.

Pour ce faire, ouvrez d'abord le générateur de formulaires et cliquez sur le champ que vous souhaitez contrôler. Cela ouvrira le panneau Options du champ, où vous trouverez l'onglet Logique intelligente.

En cliquant sur cet onglet, vous pouvez activer la logique conditionnelle pour ce champ. Vous pouvez appliquer la logique conditionnelle à des sections entières de votre formulaire, pas seulement à des champs individuels.

Une fois activée, la logique conditionnelle vous permet d'afficher ou de masquer des champs en fonction de la manière dont les utilisateurs interagissent avec votre formulaire. Vous pouvez même configurer des règles avancées pour automatiser des actions en fonction de leurs saisies.

Par exemple, vous pouvez laisser les utilisateurs choisir leur méthode de paiement préférée, personnaliser les notifications ou acheminer automatiquement les prospects en fonction des réponses.

5. Formulaires multi-étapes pour une expérience utilisateur unique

En divisant un formulaire en plusieurs étapes, vous créez une expérience plus conviviale, permettant aux gens de se concentrer sur une section à la fois.

Ceci est particulièrement utile pour les formulaires qui nécessitent des informations détaillées ou qui comportent une variété de questions. Les utilisateurs se sentent moins dépassés lorsqu'ils sont présentés avec des parties plus petites et gérables.

Configuration des formulaires multi-étapes dans WPForms

Pour créer un formulaire multi-étapes dans WPForms, vous commencerez par construire votre formulaire comme d'habitude dans le générateur de formulaires. Au lieu de submerger les utilisateurs avec trop de champs à la fois, vous pouvez diviser le formulaire en sections ou « étapes ».

Ceci est fait à l'aide du champ Saut de page. Faites simplement glisser et déposez le champ là où vous souhaitez diviser votre formulaire en différentes parties.

Une fois le Saut de page ajouté, vous pouvez personnaliser chaque étape avec un titre ou une description unique, aidant les utilisateurs à comprendre où ils en sont dans le processus.

Vous pouvez également configurer la barre de progression, qui guide les utilisateurs à travers chaque section du formulaire, rendant l'expérience plus fluide et moins intimidante.

6. Stylisez votre formulaire avec l'éditeur de blocs

Si vous souhaitez donner à vos formulaires un aspect personnalisé, WPForms s'intègre parfaitement à l'éditeur de blocs WordPress. Cela vous permet de styliser vos formulaires sans écrire de code personnalisé.

En divisant les sections avec des titres clairs, en ajustant l'espacement et en ajoutant des polices ou des boutons personnalisés, vous rendez le formulaire plus intuitif et agréable à remplir.

Personnalisation des formulaires à l'aide de l'éditeur de blocs

Commencez par intégrer votre formulaire directement dans l'éditeur de blocs, où vous pouvez facilement prévisualiser et modifier la mise en page. En utilisant le bloc WPForms dans l'éditeur, vous aurez un contrôle total sur la façon dont votre formulaire est affiché sur la page.

Les paramètres du bloc WPForms vous permettent de modifier le thème de couleur, les champs du formulaire, les étiquettes, les boutons, ainsi que les styles du conteneur et de l'arrière-plan.

Vous apprécierez particulièrement les thèmes de formulaire prédéfinis qui vous permettent d'appliquer un style cohérent à vos formulaires en quelques clics.

Ces thèmes sont particulièrement utiles si vous cherchez à maintenir un aspect cohérent sans passer trop de temps à styliser manuellement chaque élément.

FAQ — Comment personnaliser les formulaires WordPress avec WPForms

La personnalisation des formulaires WordPress est un sujet qui suscite beaucoup d'intérêt parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :

Comment créer des formulaires personnalisés dans WordPress ?

Pour créer un formulaire personnalisé dans WordPress, vous pouvez utiliser le plugin WPForms. Après avoir installé le plugin, allez dans WPForms » Ajouter. De là, choisissez un modèle ou commencez à partir de zéro.

Personnalisez votre formulaire en faisant glisser et déposer les champs, puis configurez les paramètres. Enfin, intégrez le formulaire sur n'importe quelle page en utilisant le shortcode ou l'éditeur de blocs.

Comment changer le design d'un formulaire dans WordPress ?

Vous pouvez facilement changer le design de vos formulaires créés avec WPForms en utilisant les thèmes de formulaire. Accédez à l'éditeur de blocs après avoir intégré votre formulaire et sélectionnez un thème qui correspond au style de votre site Web. Vous pouvez également utiliser le bloc WPForms pour ajuster les couleurs, les polices et les mises en page.

Comment créer une balise intelligente personnalisée dans WPForms ?

La création d'une balise intelligente personnalisée dans WPForms nécessite un peu de code. Vous devrez vous connecter à WPForms en utilisant wpforms_smart_tag_process et écrire une fonction qui définit le comportement de la balise.

Une fois configurée, vous pouvez utiliser la balise intelligente personnalisée dans les champs de votre formulaire ou dans les notifications pour insérer dynamiquement des informations utilisateur. Consultez ce guide pour plus d'informations sur la création de balises intelligentes personnalisées.

Peut-on personnaliser WPForms ?

Oui, WPForms est hautement personnalisable. Vous pouvez utiliser la logique conditionnelle pour personnaliser l'expérience utilisateur, les thèmes de formulaire pour ajuster le design, et divers modules complémentaires pour personnaliser l'expérience du formulaire.

WPForms offre également des fonctionnalités avancées telles que les formulaires pré-remplis, la géolocalisation et les balises intelligentes pour une personnalisation plus poussée.

Ensuite, découvrez ces fonctionnalités cachées de WPForms

WPForms regorge d'outils et d'options qui ne sont pas immédiatement évidents mais qui peuvent améliorer considérablement votre flux de travail et les formulaires que vous créez. Consultez ce guide pour en savoir plus sur les fonctionnalités qui ont peut-être échappé à votre attention ou ce guide pour quelques autres astuces WordPress.

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.