Tous les visiteurs de votre site Web ne sont pas là dans le même but. Vous fournissez très probablement une variété d'articles ou de services aux clients et aux clients, plutôt qu'un seul. C'est pourquoi le fait d'avoir divers formulaires de contact ciblés peut aider à lisser l'expérience utilisateur de votre site afin que vos clients (et futurs clients) puissent vous contacter avec le moins de friction possible concernant exactement ce dont ils ont besoin. Nous vous guiderons dans la construction du pipeline optimal entre vous et vos utilisateurs à l'aide du module de formulaire de contact Divi et de notre fonctionnalité de logique conditionnelle.
Un aperçu du formulaire de contact conditionnel
En fin de compte, vous aurez quelque chose de similaire sur votre site Web, prêt à être utilisé par vos visiteurs.
Qu'est-ce que la logique conditionnelle exactement ?
Pour commencer, nous aimerions définir succinctement la logique conditionnelle. Dans cette leçon, nous allons mettre en place une succession de formulaires de contact qui apparaissent dépendants des choix que l'utilisateur fait ou ne fait pas.
Par exemple, vous pouvez avoir un seul formulaire de contact qui change en fonction du service ou du produit dont le visiteur a besoin. De cette façon, au lieu qu'ils aient à l'écrire, vous pouvez avoir les informations dont vous avez besoin dans le format dont vous avez besoin. La logique conditionnelle du formulaire de contact permet d'améliorer la communication et d'accélérer votre capacité à donner pour vos utilisateurs.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer MaintenantDans cet esprit, commençons par développer les formulaires de contact ciblés.
Comment utiliser la logique conditionnelle pour créer des formulaires de contact
Ouvrez le Divi Builder.
Nous devrons entrer dans le Divi Builder car nous utilisons le module Divi Contact Form. Dans ce didacticiel, nous utiliserons le pack de mise en page Landscape Maintenance comme exemple. Vous pouvez utiliser la mise en page ou le design de votre choix, mais vous devez pouvoir utiliser et styliser le module de formulaire de contact Divi.
Pour commencer, accédez au Divi Builder dans le backend de votre site WordPress. Dans l'éditeur de page, vous remarquerez un bouton violet intitulé "Utiliser Divi Builder" (ou Modifier avec Divi Builder si vous avez déjà créé la page).
Insérez ou localisez le module de formulaire de contact.
Ensuite, identifiez un module de formulaire de contact existant sur la page ou cliquez sur l'icône Cercle noir + et sélectionnez Formulaire de contact dans le menu déroulant.
Remplissez les paramètres du formulaire de contact
Par défaut, le module Formulaire de contact Divi comprend trois champs : Nom, E-mail et Message. Nous créerons un formulaire de contact afin que ces options n'apparaissent pas tant que le visiteur ne nous aura pas fourni suffisamment d'informations pour orienter sa demande.
Ajout de la première question conditionnelle
Remplissez les blancs avec la première question conditionnelle. Le bouton « Ajouter un nouveau champ » se trouve sous l' onglet Contenu , sous tous les champs existants dans le formulaire. Cliquez simplement dessus.
Cela fait apparaître la zone Paramètres du champ, où vous devriez voir les champs ID de champ et Titre . L' ID de champ vous est destiné. C'est ce qui apparaît dans les paramètres du module pour que vous puissiez le surveiller. Le Titre est le texte que vos visiteurs verront sur le front-end du formulaire. (Le titre s'affichera également dans l'e-mail que vous recevrez après avoir soumis le formulaire.)
L'ID de champ est étiqueté « Conditionnel » car c'est la première question que le visiteur verra sur le formulaire. Ce qu'ils verront ensuite sera déterminé par leur réaction. Il s'agit d'un moyen simple de suivre le flux des questions et réponses du formulaire.
Ajouter des options de champ
Faites défiler jusqu'à la section Options de champ sous l'onglet Contenu. C'est là que vous placerez les options parmi lesquelles l'utilisateur pourra choisir. Chacun d'eux servira d'invite pour des questions supplémentaires. Les cases à cocher sont utilisées comme type d'entrée dans cet exemple. Cela signifie que le consommateur a la possibilité d'en sélectionner autant qu'il le souhaite.
En plus des cases à cocher, Divi prend en charge les fonctionnalités supplémentaires suivantes : Champ de saisie et zone de texte pour les réponses saisies par l'utilisateur, Sélection déroulante et boutons radio pour les choix individuels que vous fournissez, et Champ de messagerie pour la saisie de l'adresse e-mail. Le champ Nom par défaut est un champ de saisie, tandis que le champ Message par défaut est une zone de texte.
Avec les cases à cocher cochées, nous entrerons les options que nous souhaitons déclencher par la suite. Ensuite, pour empêcher l'utilisateur de soumettre le formulaire prématurément, nous voulons en faire un champ obligatoire .
Il convient de noter que nous n'utilisons pas la logique conditionnelle à ce stade. Parce que c'est le déclencheur, il apparaîtra à l'utilisateur malgré tout.
Créer de nouveaux champs de réponse conditionnelle
Cependant, pour les nouveaux champs que nous ajoutons en tant que réponses de suivi, nous ajouterons ensuite la logique conditionnelle. Comme nous avons inclus trois options pour la première question, nous ajouterons trois nouveaux champs équivalents au formulaire. Vous devrez répéter les étapes ci-dessous pour chacun.
Nommez les réponses conditionnelles sur les nouveaux champs
Nous avons utilisé la pratique de dénomination du Conditionnel 1 (pour désigner le premier déclencheur conditionnel) suivi de 1a, 1b et 1c pour les réponses de suivi. Nous les avons également étiquetés de manière appropriée afin de savoir ce qu'ils sont.
De la même manière que pour la première question, nous saisirons le Titre comme question que le visiteur verra.
Ajout d'une logique conditionnelle aux champs de réponse.
Après cela, accédez à la section Logique conditionnelle de l' onglet Contenu de ce champ . Activez la bascule Logique conditionnelle . Ensuite, pour celui-ci, sélectionnez la Relation, ce qui signifie que vous pouvez la définir sur n'importe quel (n'importe quel nombre de réponses peut entraîner l'affichage de ce choix) ou sur tous (seule la combinaison spécifique de réponses fait apparaître ce champ).
Si vous n'utilisez qu'une seule règle de déclenchement, comme nous le faisons, tout ou partie fonctionnera.
Vous remarquerez le champ qui active celui-ci sous Règles, et sur la droite, vous pouvez choisir quelle option le déclenchera. Le qualificatif, tel que égal, n'est pas égal, est inférieur à, est supérieur à, et ainsi de suite, est situé au centre. Pour ce champ, nous choisissons la question Conditionnelle 1, puis le choix qu'elle contient qui fait explicitement apparaître ce champ.
Répétez cette étape pour toutes les réponses conditionnelles.
Comme nous avons introduit trois réponses possibles à notre seule question conditionnelle, nous ferons de même pour les autres champs. Seules les réponses corrélatives appropriées pour cette sélection sont créées.
Définissez le « Nom/Email/Message » des champs du formulaire de contact pour qu'ils s'affichent
Une fois que vous avez configuré les réponses pour la logique conditionnelle, nous souhaitons que le visiteur puisse soumettre le formulaire. Pour ce faire, nous allons modifier la logique conditionnelle dans les champs Nom , E - mail et Message . Parce que la préparation pour chacun d'eux est la même, vous répéterez cela trois fois.
Accédez à Logique conditionnelle sous les paramètres des champs Nom, E-mail et Message. Activez-le et saisissez autant de réponses finales à vos questions de suivi conditionnelles que vous en avez. Dans cet exemple, nous avons trois demandes de suivi, donc nous appliquons trois règles.
Sélectionnez la question de suivi comme déclencheur pour chaque règle. Définissez le qualificateur sur n'est pas vide, ce qui signifie que la condition est remplie tant que le visiteur a répondu à la question. La dernière case sera grisée, suggérant que toute réponse est adéquate.
Enregistrez vos modifications, puis répétez l'opération pour tous les autres champs que vous souhaitez voir apparaître pour autoriser la soumission de formulaire. C'est tout ce qu'on peut en dire! Votre formulaire s'adaptera automatiquement aux besoins de vos consommateurs.
Les résultats finaux
Vous pouvez voir comment la logique conditionnelle fonctionne en pratique dans la vidéo ci-dessous.
Dernières pensées
L'une des parties les plus courantes d'un site Web est le formulaire de contact. Presque tous les sites Web en ont un, et presque tous les sites Web en ont besoin. Cependant, toutes les personnes ne visitent pas votre site Web pour la même raison. Vous pouvez transformer vos formulaires de contact en un outil dynamique avec lequel vos utilisateurs peuvent communiquer en utilisant la fonction logique conditionnelle de Divi.
