Points clés

La logique conditionnelle affiche ou masque les champs de formulaire en fonction de la réponse précédente d’un utilisateur.

Le formulaire de contact natif de Shopify n’a pas de logique conditionnelle — vous aurez besoin d’une application ou de code sur mesure.

Typeform, Hulk Form Builder et Jotform prennent tous en charge la logique conditionnelle nativement.

Le JavaScript sur mesure avec une logique d’affichage/masquage est l’option native pour les boutiques qui veulent un contrôle total du design.

La logique conditionnelle rend les formulaires plus intelligents. Au lieu de montrer chaque champ à chaque visiteur, vous ne montrez que les champs pertinents à leur situation. Une demande B2B affiche les champs de taille d’entreprise et de secteur d’activité. Un client B2C voit des champs complètement différents. Le formulaire s’adapte à eux.

Le résultat : un formulaire qui semble plus court, des données de bien meilleure qualité 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 :

Dans votre éditeur de formulaire Typeform, ajoutez votre question à embranchement (par exemple, un champ à choix multiples)
Allez dans Logic → ajoutez un “Logic Jump”
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 :

Installez Hulk Form Builder depuis l’App Store
Créez votre formulaire, ajoutez tous les champs
Sélectionnez un champ → trouvez la section “Logique conditionnelle” (“Conditional logic”)
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.”

Construisez un formulaire à logique conditionnelle en le décrivant simplement à Fudge.

Try Fudge for Free

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 à travers le formulaire :

Sélectionnez chaque option de votre question à embranchement
Vérifiez que les bons champs s’affichent ou se masquent
Soumettez le formulaire pour chaque scénario
Confirmez que chaque soumission contient bien les bonnes données
Testez sur mobile — les animations de la logique conditionnelle se comportent parfois de façon inattendue sur les appareils tactiles

Pour les implémentations JavaScript, il est aussi conseillé de tester en désactivant le JavaScript afin de s’assurer que le formulaire se dégrade correctement (l’idéal étant de montrer tous les champs plutôt que de ne rien afficher).