Comment créer un formulaire logique conditionnel Elementor en 5 étapes

L'ajout d'une logique conditionnelle au formulaire Elementor peut augmenter les taux de soumission des formulaires.

Comment? Eh bien, parce que le formulaire logique conditionnel Elementor peut faire en sorte que vos clients n'aient pas à remplir des champs inutiles. En conséquence, il offre une meilleure expérience utilisateur.

Savez-vous quelle est la meilleure partie de la forme logique conditionnelle d'Elementor ?

Eh bien, la meilleure partie est que la construction de la forme logique conditionnelle Elementor est une tâche vraiment facile. Surtout si vous suivez cet article. Parce que dans ce blog, vous apprendrez à créer un formulaire logique conditionnel Elementor en seulement 5 étapes.

De plus, vous découvrirez les avantages de l'utilisation de la forme logique conditionnelle Elementor et quand l'utiliser.

Alors, continuez à lire….

Qu'est-ce que la logique conditionnelle dans les formulaires ?

La logique conditionnelle dans les formulaires est un moyen de contrôler la façon dont un formulaire agit en fonction de l'entrée de l'utilisateur. Vous pouvez masquer des champs de formulaire spécifiques ou plusieurs champs et les rendre visibles uniquement après que votre utilisateur a effectué une certaine action ou choisi une certaine valeur dans vos formulaires.

C'est une pratique courante dans les formulaires WordPress de nos jours. Passez à la section suivante pour découvrir pourquoi la logique conditionnelle est populaire et quand les gens l'utilisent habituellement dans leurs formulaires.

Pourquoi et quand utiliser la logique conditionnelle sous forme d'élément ?

Les formulaires conditionnels sont en fait très efficaces pour garantir à vos clients la meilleure expérience possible lors du remplissage de vos formulaires. En outre, cela garantit que vous obtenez la quantité exacte de données dont vous avez besoin.

Vous vous demandez comment ?

Eh bien, les clients n'aiment pas particulièrement remplir des formulaires. Avouons-le, ce n'est vraiment le hobby de personne !

En plus de cela, si vous leur demandez de donner des informations qui ne sont pas particulièrement utiles/pertinentes pour eux, il est évident que vos utilisateurs seront ennuyés.

Et c'est exactement là que la logique conditionnelle dans les formulaires devient utile. Parce qu'avec la logique conditionnelle, vous pouvez vous assurer que vos formulaires demanderont aux utilisateurs de ne remplir que les informations pertinentes et non tous les champs du formulaire.

Fondamentalement, la forme conditionnelle dans Elementor suit la logique "Si condition". Par exemple, si la condition A est vraie, alors l'action X aura lieu sinon ce ne sera pas le cas. Vous pouvez également configurer plusieurs conditions pour une seule action. Par exemple, l'action X n'aura lieu que si la condition A et la condition B sont toutes les deux vraies, ou si l'une d'elles est vraie.

Parlons d'un exemple concret, supposons que sous une forme, vous vouliez savoir combien d'enfants on amènera à un événement.

Maintenant, vous n'avez plus besoin de demander à tout le monde de remplir le nombre d'enfants. Vous pouvez d'abord leur demander s'ils prévoient d'amener des enfants, et une fois qu'ils ont dit oui, vous pouvez afficher l'option dans le formulaire pour sélectionner le nombre d'enfants qu'ils amèneront.

De cette façon, les personnes qui n'apporteront aucun enfant n'auront pas à remplir le nombre de champs enfant. En fait, ils auront un formulaire plus court qui les motivera à finir de remplir le formulaire plutôt que de l'abandonner à mi-chemin.

Pour résumer, voici les avantages de l'utilisation de la logique conditionnelle sous forme Elementor :

• Cela fait gagner du temps aux utilisateurs car les utilisateurs ne sont tenus de remplir que les champs qui leur sont destinés.
• Améliore l'expérience utilisateur car les formulaires conditionnels sont plus pratiques.
• Encourage les utilisateurs à remplir le formulaire car ils sont plus courts que ceux sans logique conditionnelle.
• Vous obtenez toutes les informations pertinentes et un taux de soumission de formulaire accru.

Maintenant que vous savez à quel point la logique conditionnelle peut être utile, passons à la section suivante où vous apprendrez à ajouter une logique conditionnelle au formulaire Elementor.

Comment créer un formulaire Elementor à logique conditionnelle : guide étape par étape

Suivez toutes les étapes correctement pour créer votre formulaire Elementor à logique conditionnelle en quelques instants.

Étape 1 : Installez les plugins nécessaires

Pour ajouter une logique conditionnelle à un formulaire Elementor, ainsi que la version gratuite d'Elementor, vous devez installer un générateur de formulaires Elementor MetForm. Vous aurez besoin des deux

1. MetForm (Gratuit)
2. MetForm Pro

Vous pouvez consulter la documentation si vous avez besoin d'aide pour le processus d'installation et d'activation de MetForm.

Remarque : Vous n'avez pas besoin de la version Elementor Pro pour suivre ce processus.

Étape 2 : faites glisser et déposez le widget MetForm sur votre page Elementor

Allez maintenant à la page où vous souhaitez ajouter votre formulaire de logique conditionnelle Elementor. Vous pouvez ajouter le formulaire conditionnel à une page existante ou créer une nouvelle page. Cependant, assurez-vous que vous êtes en mode Éditer avec Elementor .

Maintenant, recherchez MetForm, une fois que vous avez trouvé le widget, faites-le glisser et déposez -le sur la page.

Étape 3 : Créer/Ajouter un formulaire à votre page

Maintenant, vous pouvez choisir un formulaire existant ou en créer un nouveau. Pour créer un nouveau formulaire ou en ajouter un déjà existant, cliquez sur le bouton Modifier le formulaire.

J'ai déjà créé un formulaire de réservation de démonstration, je vais donc

• Choisissez "Sélectionner le formulaire"
• Sélectionnez mon formulaire existant nommé "Formulaire d'élément logique conditionnel" dans le menu déroulant
• puis cliquez sur Modifier le formulaire.

Étape 4 : Ajouter une logique conditionnelle aux champs de formulaire Elementor

À l'aide de la fonction conditionnelle MetForm, vous pouvez masquer/afficher un champ de formulaire en fonction de plusieurs conditions , telles que si le champ dépendant est vide, non vide, égal (correspond à une valeur), non égal, supérieur à, supérieur à égal, inférieur à , etc. De plus, vous pouvez personnaliser si toutes les conditions doivent être vraies ou si l'une d'entre elles doit être vraie pour que l'action ait lieu.

Dans cet article, je vais appliquer quelques-unes de ces conditions, vous pouvez suivre les mêmes étapes pour appliquer toutes les conditions. Pour appliquer une condition , vous devez suivre les étapes suivantes :

Modifier le champ et activer la logique conditionnelle

Pour cela, sur le champ du formulaire, cliquez sur l'icône d'édition dans le coin supérieur droit , puis sur le panneau des paramètres de gauche et faites défiler un peu, puis développez l'option Condition Logic et enfin activez le bouton Enable.

  Définir les critères et l'action

Maintenant, choisissez les critères de correspondance de condition comme ET/OU et le type d'action comme Afficher ce champ/masquer ce champ dans la liste déroulante.

Définir la condition

Il est maintenant temps de définir la condition, de définir une condition

• Cliquez sur le + AJOUTER UN NOUVEAU élément
• Dans le champ Si , ajoutez le nom du champ auquel vous souhaitez ajouter la condition
• Dans la liste déroulante Correspondance (comparaison) , choisissez la condition.

Par exemple, je souhaite que le champ E-mail ne soit visible que lorsque le champ Nom complet n'est pas vide. Par conséquent, lorsque quelqu'un remplit uniquement son nom, le champ E-mail apparaîtra visible. Pour cela, je vais

• Copiez le nom du champ de texte du nom complet
• Revenez à la section logique conditionnelle du champ e-mail et collez-la sur le champ "Si"
• Enfin, choisissez non vide dans le menu déroulant Correspondance (comparaison).

Suivez ces étapes exactes pour ajouter une logique conditionnelle à tous les champs de formulaire de votre formulaire conditionnel Elementor ou à quelques-uns en fonction de vos besoins.

Remarque : Si vous souhaitez définir des conditions pour les champs de formulaire tels que Radio ou Case à cocher où vous avez plusieurs options, vous devez mettre le nom du champ dans le champ Si et définir la valeur des options de la radio/case à cocher dans le champ Valeur de correspondance.

Par exemple, pour que le champ Autre statut n'apparaisse que lorsque certains en choisissent d'autres comme statut matériel, vous devez  

• Choisissez Match (comparaison) comme égal
• Copiez le nom du champ État civil
• Collez -le dans l' option "Si" de la logique conditionnelle d'Autre statut
• Copiez la valeur de l'option Autres à partir du champ Rapport d'état civil
• puis collez-le dans l'option "Match value" de la logique conditionnelle d'Autre statut

J'ai suivi les mêmes étapes pour rendre le formulaire Besoin de gardiens d'animaux visible uniquement lorsque le nombre d'animaux est supérieur à 1 .

Étape 5 : Personnalisez les paramètres du formulaire liés à la confirmation, la notification à compléter

Une fois que vous avez terminé d'ajouter toute la logique conditionnelle à votre formulaire Elementor, cliquez sur PARAMÈTRES DU FORMULAIRE pour personnaliser différents paramètres. Tu peux

• Personnalisez le titre, le message de réussite, la connexion requise, le nombre de vues, etc. dans les paramètres généraux.
• Vous pouvez personnaliser des options telles que Activer la confirmation, définir Objet de l'e-mail, E-mail de, De l'e-mail et Message de remerciement, etc. sous Paramètres de confirmation.
• Sous Paramètres de notification, vous obtiendrez des options de notification par e-mail telles que Activer l'e-mail de notification à l'administrateur, Objet de l'e-mail, E-mail à, E-mail de, Note d'administration, etc.

Vous pouvez également définir les différentes intégrations de paiement et de CRM si vous le souhaitez. Pour plus de détails sur ces sujets, consultez la documentation. Après avoir effectué toutes les modifications, faites défiler vers le bas et cliquez sur Enregistrer les modifications.

Cliquez sur METTRE À JOUR & FERMER pour enregistrer le formulaire conditionnel que vous venez de créer.

Maintenant, si vous cliquez sur le bouton de prévisualisation, vous devriez voir votre formulaire conditionnel Elementor comme celui illustré ci-dessous :

Comment utiliser le modèle pré-construit de MetForm pour ajouter un formulaire conditionnel dans Elementor

Maintenant, si vous recherchez un modèle prédéfini de formulaire logique conditionnel Elementor, vous ne pouvez pas trouver une meilleure option que MetForm. Parce que ce générateur de formulaires WordPress fournit plus de 6 modèles de formulaires logiques conditionnels Elementor prédéfinis.

Pour utiliser les formes conditionnelles prédéfinies de MetForm, lorsque vous atteignez la troisième étape du processus mentionné ci-dessus , faites défiler un peu vers le bas pour trouver toutes les formes conditionnelles. Pour choisir le formulaire que vous préférez, cliquez sur le formulaire , puis cliquez sur Modifier le formulaire.

Lorsque le formulaire se charge, cliquez sur METTRE À JOUR ET FERMER, et enfin enregistrez votre page. Voici un aperçu du formulaire logique conditionnel préfabriqué Elementor par MetForm :

Derniers mots

Toutes nos félicitations! Vous savez maintenant comment ajouter une logique conditionnelle aux formulaires Elementor. J'espère que vous utiliserez maintenant ce processus pour créer une forme logique conditionnelle Elementor conviviale dans votre site Web WordPress.

Gardez à l'esprit que votre travail consiste à vous assurer que les utilisateurs doivent faire le minimum d'efforts pour remplir votre formulaire. Et c'est ce que les fonctionnalités conditionnelles de MetForm fonctionnent à merveille. En outre, MetForm prend également en charge le shortcode.

N'oubliez pas les modèles de formulaires logiques conditionnels prédéfinis d'Elementor. De plus, je vous recommande vivement de découvrir toutes les fonctionnalités étonnantes de MetForm. Les fonctionnalités avancées de ce plugin WordPress vous aideront à créer des formulaires Elementor plus optimisés.