Comment ajouter une logique conditionnelle aux formulaires Shopify (2026)

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 les plus propres de la logique conditionnelle. Chaque question peut créer des branches en fonction des réponses précédentes, créant ainsi un parcours de formulaire entièrement personnalisé.

Comment le configurer :

1. Dans votre éditeur de formulaire Typeform, ajoutez votre question à embranchement (par exemple, un champ à choix multiples)
2. Allez dans Logic → ajoutez un “Logic Jump”
3. Définissez la condition : “Si la réponse est ‘Pro’, aller à la question Nom de l’entreprise. Si la réponse est ‘Particulier’, aller à la question Message.”

Typeform gère l’UX de manière automatique — il ne montre les questions pertinentes que l’une après l’autre.

Option 2 — Hulk Form Builder (application Shopify)

La logique conditionnelle de Hulk Form Builder fonctionne avec les formulaires standard des pages Shopify.

Configuration :

1. Installez Hulk Form Builder depuis l’App Store
2. Créez votre formulaire, ajoutez tous les champs
3. Sélectionnez un champ → trouvez la section “Logique conditionnelle” (“Conditional logic”)
4. Définissez les règles : “Afficher ce champ quand [nom du champ] correspond à [valeur]”

Pour un exemple Pro vs Particulier : créez d’abord la liste déroulante “Type de client”, puis ajoutez des règles conditionnelles aux champs spécifiques aux pros.

Sur le même sujet : Créer une page Quiz dans Shopify — et notre analyse détaillée des motifs de conversion derrière les quiz de recommandation de produits.

Sur le même sujet : Capturer les valeurs UTM dans les formulaires Shopify.

Sur le même sujet : Créer des formulaires à plusieurs étapes dans Shopify.

Sur le même sujet : Ajouter du JavaScript sur mesure dans Shopify.

Sur le même sujet : Ajouter un formulaire de contact sur mesure dans Shopify.

Option 3 — Jotform

Jotform dispose d’une logique conditionnelle robuste, incluant :

• L’affichage ou le masquage de champs basés sur les réponses précédentes
• Le saut vers différentes pages du formulaire (pour les formulaires à plusieurs étapes)
• Le calcul de valeurs basées sur les saisies
• L’envoi de différents e-mails de notification en fonction des 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 balise iframe.

Option 4 — JavaScript sur mesure (sans dépendre d’une application)

Pour les boutiques qui souhaitent un contrôle total sur le design et éviter de dépendre d’une application tierce, la logique conditionnelle peut être mise en place 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 il n’y a 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 composant de votre thème.

Demandez-le plutôt à Fudge : “Construis un formulaire de contact avec une logique conditionnelle — si le client sélectionne ‘Pro’, montre les champs Nom de l’entreprise et Secteur d’activité. S’il sélectionne ‘Particulier’, cache 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 :

1. Sélectionnez chaque option dans votre question à embranchement
2. Vérifiez que les bons champs s’affichent ou se masquent
3. Soumettez le formulaire via chaque chemin
4. Confirmez que la soumission contient les bonnes données
5. 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