Comment ajouter une logique conditionnelle aux formulaires Shopify (2026)

Points clés à retenir

• La logique conditionnelle affiche ou masque des champs de formulaire en fonction de la réponse précédente de l’utilisateur.
• Le formulaire de contact natif de Shopify n’a pas de logique conditionnelle — tu as besoin d’une application de formulaire ou de code personnalisé.
• Typeform, Hulk Form Builder et Jotform intègrent tous la logique conditionnelle par défaut.
• Du JavaScript personnalisé avec une logique d’affichage/masquage (show/hide) est l’option native pour les boutiques qui veulent un contrôle total du design.

Pour ajouter une logique conditionnelle à un formulaire Shopify, utilise un outil de formulaire qui la prend en charge (Typeform, Hulk Form Builder ou Jotform) ou ajoute quelques lignes de JavaScript qui affichent ou masquent des champs en fonction d’une réponse précédente. Le formulaire de contact natif de Shopify n’a aucune logique conditionnelle propre.

Au lieu de montrer chaque champ à chaque visiteur, tu ne montres que les champs pertinents pour sa 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 résultat : un formulaire qui paraît plus court, une meilleure qualité des 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 :

1. Dans votre éditeur de formulaire Typeform, ajoutez votre question d’embranchement (par ex. un champ à Choix multiple)
2. Allez dans Logic → ajoutez un Logic Jump
3. 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)

Hulk Form Builder ajoute la logique conditionnelle aux formulaires que tu crées dans l’application (et non au formulaire de contact natif de Shopify).

Configuration :

1. Installe Hulk Form Builder depuis l’App Store
2. Crée ton formulaire, ajoute tous les champs
3. Sélectionne un champ → trouve la section “Conditional logic”
4. Définis les règles : “Afficher ce champ quand [nom du champ] est égal à [valeur]”

Pour un exemple Professionnel vs Personnel : crée d’abord la liste déroulante “Type de client”, puis ajoute les règles conditionnelles aux champs spécifiques aux Professionnels.

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 veulent un contrôle total du design et sans la lourdeur d’une application tierce, la logique conditionnelle peut être implémentée avec du JavaScript très simple.

Exemple de configuration :

Structure HTML :

<select id="customer-type" name="contact[Customer Type]">
    <option value="">Sélectionner...</option>
    <option value="business">Professionnel</option>
    <option value="personal">Personnel</option>
</select>

<div id="business-fields">
    <input type="text" name="contact[Company Name]" placeholder="Nom de l'entreprise" />
    <input type="text" name="contact[Industry]" placeholder="Secteur d'activité" />
</div>

JavaScript :

var customerType = document.getElementById('customer-type')
var businessFields = document.getElementById('business-fields')

// Masque les champs professionnels une fois le JavaScript exécuté, pour que les visiteurs sans JavaScript puissent toujours les voir
businessFields.style.display = 'none'

customerType.addEventListener('change', function () {
    if (this.value === 'business') {
        businessFields.style.display = 'block'
    } else {
        businessFields.style.display = 'none'
    }
})

Dans un formulaire de contact Shopify, nomme les champs contact[...] pour qu’ils apparaissent dans l’e-mail que tu reçois.

C’est propre, rapide et sans aucune dépendance externe. Le compromis : c’est toi qui écris et maintiens le code, et il doit être ajouté aux fichiers de section ou de snippet de ton thème.

Sinon, tu peux simplement décrire cela à Fudge, l’opérateur IA pour les boutiques Shopify : “Crée un formulaire de contact avec une logique conditionnelle — si le client sélectionne ‘Professionnel’, affiche les champs Nom de l’entreprise et Secteur d’activité. S’il sélectionne ‘Personnel’, masque ces champs.” Les formulaires de contact, les demandes de devis et les candidatures B2B (wholesale) font partie de son constructeur de popups et formulaires, le formulaire sera donc une section de ton thème, visible sous forme de brouillon fonctionnel avant sa mise en ligne.

Pour plutôt diviser un long formulaire en plusieurs étapes, consulte Créer des formulaires à plusieurs étapes dans Shopify.

Cas d’usage courants de la logique conditionnelle sur Shopify

Formulaires de demande B2B vs B2C. N’affiche les champs d’informations sur l’entreprise que pour les clients professionnels.

Routage des demandes spécifiques à un produit. “À quelle catégorie de produits se rapporte ta question ?” → chaque réponse redirige vers différents champs de suivi et envoie la soumission à un e-mail de service différent.

Formulaires de candidature B2B (wholesale). “Quel est ton type d’entreprise ?” (vente au détail, en ligne, grossiste) → affiche les champs pertinents pour chaque cas.

Demandes de retours et d’assistance. “Sélectionne ton 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énements ou de services. “Sélectionne le type de service” → affiche des champs de planification et de détails différents pour chaque service.

Pour créer le formulaire de contact en lui-même, voir Ajouter un formulaire de contact personnalisé dans Shopify.

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