Comment créer un formulaire de contact Divi polyvalent avec logique conditionnelle

Tous les visiteurs ne viennent pas sur votre site pour la même raison. Vous proposez probablement une gamme de produits ou de services, pas seulement une option unique pour les clients et les clients. C'est pourquoi le fait d'avoir plusieurs formulaires de contact ciblés peut aider à lisser l'expérience utilisateur de votre site afin que vos clients (et potentiels) puissent vous contacter pour savoir exactement ce dont ils ont besoin avec le moins de frictions possible. À l'aide du module de formulaire de contact Divi et de notre fonction de logique conditionnelle, nous allons vous guider dans la création du meilleur pipeline possible entre vous et vos utilisateurs.

Aperçu du formulaire de contact conditionnel

Lorsque tout est dit et fait, vous aurez quelque chose de similaire sur votre site, prêt à être utilisé par vos visiteurs.

Bureau

Mobile

Qu'est-ce que la logique conditionnelle ?

Tout d'abord, nous voulons aborder brièvement ce que nous entendons par logique conditionnelle . Ce que nous allons faire dans ce didacticiel, c'est configurer une série de formulaires de contact qui apparaissent en fonction des choix que l'utilisateur fait ou ne fait pas.

Par exemple, vous pouvez avoir un formulaire de contact unique qui s'ajuste en fonction du service ou du produit dont le visiteur a besoin. De cette façon, vous pouvez obtenir les informations dans le format dont vous avez besoin au lieu de devoir les écrire. La logique conditionnelle sur les formulaires de contact peut améliorer la communication et accélérer votre capacité à fournir à vos utilisateurs.

Dans cet esprit, examinons la création des formulaires de contact ciblés.

Comment créer des formulaires de contact à l'aide de la logique conditionnelle

Charger le Divi Builder

Puisque nous utilisons le module Divi Contact Form, nous allons devoir entrer dans le Divi Builder. Nous allons utiliser le pack de mise en page Landscape Maintenance comme exemple dans ce didacticiel. Vous pouvez utiliser la mise en page ou le design de votre choix, mais vous devrez pouvoir utiliser et styliser le module de formulaire de contact Divi.

Pour commencer, entrez dans le Divi Builder depuis le backend de votre site WordPress. À l'intérieur de l'éditeur de page, vous verrez un bouton violet indiquant Utiliser Divi Builder (ou Modifier avec Divi Builder si vous avez déjà créé la page).

Ajouter ou rechercher le module de formulaire de contact

Ensuite, vous voudrez trouver le module de formulaire de contact qui existe déjà sur la page ou cliquez sur l'icône Noir + cercle et recherchez le formulaire de contact dans le menu déroulant.

Entrez les paramètres du formulaire de contact

Le module Divi Contact Form est livré avec 3 champs par défaut : Name , Email et Message . Ce que nous allons faire, c'est créer un formulaire de contact où ces options n'apparaissent pas tant que le visiteur ne nous a pas fourni suffisamment d'informations pour pouvoir orienter sa requête.

Ajouter la première question conditionnelle

Sous l'onglet Contenu et sous tous les champs déjà présents dans le formulaire, vous verrez le bouton Ajouter un nouveau champ . Cliquez dessus.

Cela ouvre la fenêtre Paramètres de champ et vous devriez voir des emplacements pour les entrées d' ID de champ et de titre . L' ID de champ est pour vous. C'est ce qui apparaît dans les paramètres du module pour que vous puissiez en garder une trace. Le titre est le texte que vos visiteurs verront au début du formulaire. (Le titre apparaîtra également dans l'e-mail que vous recevrez lorsque le formulaire sera soumis.)

Nous avons étiqueté l' ID de champ avec « Conditionnel » car c'est la première question que le visiteur verra sur le formulaire. Leur réponse déterminera ce qu'ils verront ensuite. Il s'agit d'un moyen simple de suivre le flux des questions et réponses du formulaire.

Ajouter des options de champ

Ensuite, faites défiler sous l' onglet Contenu jusqu'à la section Options de champ . C'est là que vous ajouterez les choix parmi lesquels l'utilisateur pourra choisir. Chacun d'eux sera un déclencheur pour certaines questions de suivi. Pour cet exemple, nous utilisons des cases à cocher comme type d'entrée. Cela signifie que l'utilisateur peut en choisir autant qu'il le souhaite.

En plus des cases à cocher , Divi permet également d'autres options : 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 singuliers que vous fournissez, ainsi que champ de messagerie pour la saisie de l'adresse e-mail. Le champ Nom par défaut est un champ de saisie et le message est une zone de texte .

Avec les cases à cocher sélectionnées, nous entrerons les choix que nous voulons déclencher différentes options plus tard. Nous voulons ensuite nous assurer qu'il s'agit d'un champ obligatoire afin que l'utilisateur ne puisse pas soumettre le formulaire prématurément.

Il est important de noter ici que nous n'ajoutons pas de logique conditionnelle à cette étape. C'est le déclencheur, il apparaît donc à l'utilisateur malgré tout.

Ajouter de nouveaux champs pour les réponses conditionnelles

Ensuite, cependant, nous ajouterons une logique conditionnelle pour les nouveaux champs que nous ajoutons en tant que réponses de suivi. Comme nous avons inclus 3 options pour la question initiale, nous allons ajouter 3 nouveaux champs correspondants au formulaire . Vous répéterez les étapes suivantes pour chacun.

Nommez les réponses conditionnelles dans les nouveaux champs

Notez que nous avons utilisé une convention de dénomination de Conditionnel 1 (pour indiquer le premier déclencheur conditionnel), puis 1a , 1b et 1c pour les réponses de suivi. Nous les avons également étiquetés de manière appropriée afin que nous puissions garder une trace de ce qu'ils sont.

Comme pour la première question, nous entrerons également le Titre comme question que le visiteur verra.

Ajouter une logique conditionnelle aux champs de réponse

Après cela, faites défiler jusqu'à la section Logique conditionnelle sous l'onglet Contenu de ce champ. Activez la bascule pour la logique conditionnelle . Ensuite, choisissez la Relation pour celle-ci, ce qui signifie que vous pouvez la définir sur n'importe quel (n'importe quel nombre de réponses peut faire apparaître cette option) 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.

Sous Règles , vous verrez le champ qui déclenche celui-ci, et sur la droite, vous pouvez sélectionner quel choix le déclenchera. Le centre est le qualificatif, tel que égal, n'est pas égal, est inférieur à, est supérieur à , et ainsi de suite. Pour ce champ particulier, nous sélectionnons la question que nous définissons comme conditionnelle 1 , puis l'option qu'elle contient qui déclenche spécifiquement l'apparition de ce champ.

Répétez cette opération pour toutes les réponses conditionnelles

Puisque nous avons ajouté trois réponses différentes à notre seule question conditionnelle, nous allons également répéter ce processus exact pour les autres champs. Créer uniquement les réponses corrélatives appropriées pour cette sélection.

Définir les Fiends du formulaire de contact 'Nom/Email/Message' pour qu'ils s'affichent

Une fois que vous avez configuré les réponses pour la logique conditionnelle, nous voulons que le visiteur puisse réellement soumettre le formulaire. Pour cela, nous allons ajuster la logique conditionnelle dans les champs Nom , E - mail et Message . La configuration de chacun d'entre eux est exactement la même, donc encore une fois, vous répéterez cela 3 fois.

Dans les paramètres des champs Nom , E - mail et Message , accédez à Logique conditionnelle . Activez-le et ajoutez-en autant que vous avez de réponses finales à vos questions de suivi conditionnelles. Dans notre cas, nous avons 3 questions de suivi, nous utilisons donc 3 règles.

Pour chaque règle, choisissez la question de suivi comme déclencheur. Définissez le qualificateur sur n'est pas vide , ce qui signifie que tant que le visiteur a répondu à la question, la condition est remplie. Cela grisera la dernière case, indiquant que toute réponse est suffisante.

Enregistrez vos modifications et répétez cette opération pour tous les champs que vous souhaitez voir apparaître pour autoriser la soumission de formulaire . Et c'est tout! Votre formulaire s'adaptera immédiatement aux besoins de vos utilisateurs.

Résultats finaux

Vous pouvez voir ci-dessous comment la logique conditionnelle fonctionne dans la pratique.

Bureau

Mobile

Emballer

Le formulaire de contact est l'un des éléments les plus omniprésents d'un site Web. Presque tous les sites en ont un, et pratiquement tous les sites en ont besoin. Mais tous les utilisateurs ne viennent pas sur votre site pour la même raison. En utilisant la fonction de logique conditionnelle de Divi, vous pouvez personnaliser vos formulaires de contact en un outil polyvalent avec lequel vos utilisateurs peuvent communiquer.

Quels types de formulaires avez-vous créés à l'aide de la fonctionnalité Divi Conditional Logic ?

Article présenté en image par Kubko / shutterstock.com