Points clés
- La logique conditionnelle affiche ou masque les champs d’un formulaire en fonction de la réponse précédente de l’utilisateur.
- Le formulaire de contact natif de Shopify n’intègre aucune logique conditionnelle — il vous faut une application ou du code personnalisé.
- Typeform, Hulk Form Builder et Jotform supportent tous la logique conditionnelle par défaut.
- Du JavaScript personnalisé avec une logique pour afficher/masquer est la meilleure option native pour les boutiques voulant un contrôle total sur leur design.
La logique conditionnelle rend les formulaires plus intelligents. Au lieu d’afficher tous les champs à chaque visiteur, vous ne montrez que ceux qui sont pertinents pour leur situation. Une demande B2B affiche les champs de taille d’entreprise et de secteur d’activité. Un client B2C, lui, voit des champs complètement différents. Le formulaire s’adapte à eux.
Le résultat : un formulaire qui paraît plus court, une meilleure qualité de données et des taux de complétion plus élevés.
Qu’est-ce que la logique conditionnelle dans un formulaire ?
La logique conditionnelle signifie : “Afficher le champ B uniquement si l’utilisateur a répondu X au champ A.”
Un exemple pratique pour une boutique Shopify :
- Question 1 : “Êtes-vous un client professionnel ou un particulier ?” (menu déroulant : Pro / Particulier)
- Si Pro : afficher les champs Nom de l’entreprise, Taille de l’entreprise, Secteur d’activité
- Si Particulier : ignorer ces champs, passer directement au message
Sans logique conditionnelle, vous devriez montrer tous les champs à tout le monde et en marquer la plupart comme facultatifs — une expérience brouillonne.
Option 1 — Typeform (la meilleure UX pour la logique conditionnelle)
Typeform propose l’une des implémentations de logique conditionnelle les plus propres. Chaque question peut créer des branches en fonction des réponses précédentes, permettant de créer un flux de formulaire entièrement personnalisé.
Comment le configurer :
- Dans votre éditeur de formulaire Typeform, ajoutez votre question d’embranchement (par ex. un champ à Choix multiple)
- Allez dans Logic → ajoutez un Logic Jump
- Définissez la condition : « Si la réponse est ‘Business’, aller à la question Nom de l’entreprise. Si la réponse est ‘Personnel’, aller à la question Message. »
Typeform gère l’UX automatiquement : il n’affiche que les questions pertinentes à la suite.
Option 2 — Hulk Form Builder (application Shopify)
La logique conditionnelle de Hulk Form Builder fonctionne avec les formulaires de page Shopify standards.
Configuration :
- Installez Hulk Form Builder depuis l’App Store
- Créez votre formulaire, ajoutez tous les champs
- Sélectionnez un champ → trouvez la section « Conditional logic »
- Définissez des règles : « Afficher ce champ quand [nom du champ] est égal à [valeur] »
Pour un exemple Business vs Personnel : créez d’abord le menu déroulant « Type de client », puis ajoutez des règles conditionnelles aux champs spécifiques au compte Business.
À lire aussi : Créer une page Quiz sur Shopify — et notre analyse approfondie sur les modèles de conversion derrière les quiz de recommandation de produits.
À lire aussi : Capturer les valeurs UTM dans les formulaires Shopify.
À lire aussi : Créer des formulaires à plusieurs étapes sur Shopify.
À lire aussi : Ajouter du JavaScript personnalisé sur Shopify.
À lire aussi : Ajouter un formulaire de contact personnalisé sur Shopify.
Option 3 — Jotform
Jotform possède une logique conditionnelle robuste, incluant :
- Afficher/masquer des champs en fonction des réponses précédentes
- Passer à différentes pages du formulaire (pour les formulaires à plusieurs étapes)
- Calculer des valeurs en fonction des saisies
- Envoyer différents e-mails de notification selon les réponses
Configuration : Dans le constructeur de formulaire de Jotform, sélectionnez n’importe quel champ → Paramètres → Conditions → Ajouter une nouvelle condition.
Intégrez le formulaire obtenu sur votre page Shopify via une iframe.
Option 4 — JavaScript sur mesure (sans dépendre d’une application)
Pour les boutiques qui souhaitent un contrôle total du design sans la surcharge d’une application tierce, la logique conditionnelle peut être implémentée avec du JavaScript simple.
Exemple de configuration :
Structure HTML :
<select id="customer-type" name="properties[Customer Type]">
<option value="">Select...</option>
<option value="business">Business</option>
<option value="personal">Personal</option>
</select>
<div id="business-fields" style="display: none;">
<input type="text" name="properties[Company Name]" placeholder="Company name" />
<input type="text" name="properties[Industry]" placeholder="Industry" />
</div>JavaScript :
document.getElementById('customer-type').addEventListener('change', function () {
var businessFields = document.getElementById('business-fields')
if (this.value === 'business') {
businessFields.style.display = 'block'
} else {
businessFields.style.display = 'none'
}
})C’est propre, rapide et sans aucune dépendance externe. L’inconvénient : vous devez écrire et maintenir le code, et il doit être ajouté aux fichiers de section ou de snippet de votre thème.
Décrivez plutôt ceci à Fudge : « Créez un formulaire de contact avec une logique conditionnelle — si le client sélectionne ‘Business’, affichez les champs Nom de l’entreprise et Secteur d’activité. S’il sélectionne ‘Personnel’, masquez ces champs. »
Cas d’usage courants de la logique conditionnelle sur Shopify
Formulaires de demande B2B vs B2C. Affichez les champs d’information de l’entreprise uniquement pour les clients professionnels.
Routage des demandes par produit. “À quelle catégorie de produits se rapporte votre question ?” → chaque réponse oriente vers des champs de suivi différents et envoie la soumission vers l’e-mail d’un service différent.
Formulaires de demande d’accès Revendeur. “Quel est votre type d’entreprise ?” (vente au détail, en ligne, gros) → montrez les champs pertinents pour chaque type.
Demandes de retours et de support client. “Sélectionnez votre type de problème” (article endommagé, mauvais article, non livré, autre) → chaque type de problème révèle des champs de suivi différents.
Réservation d’événement ou de service. “Sélectionnez la prestation” → montrez des champs de planification et de détails adaptés à chaque prestation.
Tester la logique conditionnelle
Après avoir configuré la logique conditionnelle, testez chaque chemin possible dans le formulaire :
- Sélectionnez chaque option dans votre question à embranchement
- Vérifiez que les bons champs s’affichent ou se masquent
- Soumettez le formulaire via chaque chemin
- Confirmez que la soumission contient les bonnes données
- Testez sur mobile — les animations de la logique conditionnelle se comportent parfois différemment sur les appareils tactiles
Pour les intégrations JavaScript, testez également avec le JavaScript désactivé afin de vous assurer que le formulaire se dégrade correctement (idéalement, il affiche tous les champs plutôt que de ne rien afficher).
FAQ
Non. Le formulaire intégré de Shopify (modèle page.contact) affiche un ensemble fixe de champs sans logique d'affichage/masquage conditionnel. La solution la plus propre : décrivez les règles d'embranchement à Fudge et il créera une section de formulaire Liquid personnalisée avec du JavaScript conditionnel, native à votre thème — pas de surcharge d'application, pas de frais mensuels. Alternatives : une application de formulaire comme Hulk ou Jotform, ou intégrer un Typeform.
Généralement de manière positive. Les formulaires semblent plus courts lorsque les champs non pertinents sont masqués, et les taux de complétion s'améliorent - nous constatons généralement des hausses de 10 à 25 % sur les formulaires de demande B2B après l'introduction de la logique conditionnelle. Faites juste attention à ne pas masquer les champs nécessaires à l'aiguillage (Type de client, etc.) car l'utilisateur ne pourrait pas répondre aux questions suivantes sans eux.
Oui. La plupart des applications de formulaire (Jotform, Hulk Form Builder) vous permettent de configurer des pages ou des messages de remerciement conditionnels en fonction des réponses soumises. Pour les formulaires personnalisés, vous pouvez le gérer dans le submit handler du formulaire : vérifiez la réponse et redirigez ou affichez un message différent en conséquence.
Oui, dans Jotform et Hulk Form Builder. Ajoutez une règle de notification telle que "Si le département est égal à 'Ventes', envoyer à sales@votre-boutique.com ; si le département est égal à 'Support', envoyer à support@votre-boutique.com." Le formulaire natif de Shopify envoie vers un seul e-mail de notification, cela nécessite donc une application ou un backend personnalisé.
Non, si elle est correctement implémentée. L'affichage/masquage est instantané dans le navigateur : l'utilisateur voit les champs apparaître ou disparaître immédiatement lorsqu'il fait ses sélections. Le seul cas où cela devient lent est lorsqu'un formulaire basé sur une application récupère de nouveaux champs depuis un serveur à chaque changement, ce qui est rare.
