So fügst du Bedingungslogik zu Shopify-Formularen hinzu (2026)

Key Takeaways

• Bedingungslogik (Conditional Logic) zeigt oder verbirgt Formularfelder basierend auf der vorherigen Antwort eines Nutzers.
• Das native Shopify-Kontaktformular bietet keine Bedingungslogik – du benötigst eine Formular-App oder eigenen Code.
• Typeform, Hulk Form Builder und Jotform unterstützen Bedingungslogik direkt ab Werk.
• Eigenes JavaScript mit Show/Hide-Logik ist die native Option für Stores, die volle Kontrolle über das Design wollen.

Bedingungslogik macht Formulare intelligenter. Anstatt jedem Besucher jedes Feld zu zeigen, blendest du nur die Felder ein, die für seine Situation relevant sind. Eine B2B-Anfrage zeigt Felder für Unternehmensgröße und Branche. Ein B2C-Kunde sieht ganz andere Felder. Das Formular passt sich an.

Das Ergebnis: Das Formular wirkt kürzer, die Datenqualität steigt und die Abschlussraten sind höher.

Was ist Bedingungslogik in einem Formular?

Bedingungslogik bedeutet: “Zeige Feld B nur an, wenn der Nutzer X bei Feld A geantwortet hat.”

Ein praktisches Beispiel für einen Shopify-Store:

• Frage 1: “Sind Sie ein Geschäfts- oder Privatkunde?” (Dropdown: Geschäftskunde / Privatkunde)
• Wenn Geschäftskunde: Zeige Felder für Firmenname, Unternehmensgröße, Branche
• Wenn Privatkunde: Überspringe diese Felder und gehe direkt zur Nachricht

Ohne Bedingungslogik müsstest du jedem alle Felder zeigen und die meisten als optional markieren – eine unübersichtlichere Experience.

Option 1 — Typeform (beste UX für Bedingungslogik)

Typeform bietet eine der saubersten Umsetzungen von Bedingungslogik. Jede Frage kann basierend auf vorherigen Antworten abzweigen, was einen voll personalisierten Formularfluss ermöglicht.

So richtest du es ein:

1. Füge im Typeform-Editor deine Verzweigungsfrage hinzu (z. B. ein Multiple-Choice-Feld).
2. Gehe zu Logic → füge einen Logic Jump hinzu.
3. Lege die Bedingung fest: “Wenn die Antwort ‘Geschäftskunde’ ist, gehe zur Frage nach dem Firmennamen. Wenn die Antwort ‘Privatkunde’ ist, gehe zur Frage nach der Nachricht.”

Typeform übernimmt die UX automatisch – es zeigt nacheinander nur die relevanten Fragen an.

Option 2 — Hulk Form Builder (Shopify App)

Die Bedingungslogik vom Hulk Form Builder funktioniert mit Standard-Shopify-Seitenformularen.

Setup:

1. Installiere den Hulk Form Builder aus dem App Store.
2. Erstelle dein Formular und füge alle Felder hinzu.
3. Wähle ein Feld aus → suche den Bereich “Bedingungslogik” (Conditional Logic).
4. Lege Regeln fest: “Zeige dieses Feld, wenn [Feldname] gleich [Wert] ist.”

Für das Beispiel Geschäftskunde vs. Privatkunde: Erstelle zuerst das Dropdown “Kundentyp” und füge dann die Bedingungsregeln zu den geschäftsspezifischen Feldern hinzu.

Option 3 — Jotform

Jotform bietet robuste Bedingungslogik, darunter:

• Felder basierend auf Antworten ein-/ausblenden
• Zu verschiedenen Formularseiten springen (bei mehrstufigen Formularen)
• Werte basierend auf Eingaben berechnen
• Unterschiedliche Benachrichtigungs-E-Mails je nach Antwort senden

Setup: Wähle im Jotform Form Builder ein beliebiges Feld aus → Einstellungen → Bedingungen → Neue Bedingung hinzufügen.

Bette das fertige Formular per Iframe auf deiner Shopify-Seite ein.

Option 4 — Eigener JavaScript-Code (keine App-Abhängigkeit)

Für Stores, die das Design komplett selbst kontrollieren wollen und keine Kosten durch Drittanbieter-Apps haben möchten, kann Bedingungslogik mit einfachem JavaScript umgesetzt werden.

Beispiel-Setup:

HTML-Struktur:

<select id="customer-type" name="properties[Customer Type]">
  <option value="">Bitte wählen...</option>
  <option value="business">Geschäftskunde</option>
  <option value="personal">Privatkunde</option>
</select>

<div id="business-fields" style="display: none;">
  <input type="text" name="properties[Company Name]" placeholder="Firmenname" />
  <input type="text" name="properties[Industry]" placeholder="Branche" />
</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';
  }
});

Das ist sauber, schnell und hat keine externen Abhängigkeiten. Der Nachteil: Du schreibst und pflegst den Code selbst, und er muss in die Theme-Sektionen oder Snippet-Dateien eingefügt werden.

Beschreibe dies stattdessen Fudge: “Erstelle ein Kontaktformular mit Bedingungslogik – wenn der Kunde ‘Geschäftskunde’ auswählt, zeige Felder für Firmenname und Branche an. Wenn er ‘Privatkunde’ wählt, blende diese Felder aus.”

Häufige Anwendungsfälle für Bedingungslogik in Shopify

B2B- vs. B2C-Anfrageformulare. Zeige Felder für Unternehmensinformationen nur für Geschäftskunden an.

Produktspezifisches Anfrage-Routing. “Auf welche Produktkategorie bezieht sich Ihre Frage?” → Jede Antwort führt zu anderen Folgefeldern und sendet das Formular an die E-Mail einer anderen Abteilung.

Händler-Anmeldeformulare. “Was ist Ihr Geschäftstyp?” (Einzelhandel, Online, Großhandel) → Zeige die jeweils relevanten Felder.

Retouren und Support-Anfragen. “Problemtyp auswählen” (Beschädigter Artikel, falscher Artikel, nicht geliefert, Sonstiges) → Jeder Problemtyp öffnet unterschiedliche Folgefelder.

Event- oder Service-Buchung. “Service-Typ wählen” → Zeige unterschiedliche Planungs- und Detailfelder für jeden Service an.

Testen der Bedingungslogik

Nachdem du die Logik eingerichtet hast, teste jeden Pfad durch das Formular:

1. Wähle jede Option in deiner Verzweigungsfrage aus.
2. Überprüfe, ob die richtigen Felder ein- oder ausgeblendet werden.
3. Sende das Formular über jeden Pfad ab.
4. Bestätige, dass die Übermittlung die korrekten Daten enthält.
5. Teste auf Mobilgeräten – Animationen der Bedingungslogik verhalten sich auf Touch-Geräten manchmal anders.

Bei JavaScript-Lösungen solltest du auch mit deaktiviertem JavaScript testen, um sicherzustellen, dass das Formular funktionsfähig bleibt (idealerweise alle Felder zeigt, statt gar nichts).