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

Das Wichtigste in Kürze

• Bedingte Logik blendet Formularfelder basierend auf der vorherigen Antwort eines Nutzers ein oder aus.
• Das native Kontaktformular von Shopify hat keine bedingte Logik – du brauchst dafür eine Formular-App oder eigenen Code.
• Typeform, Hulk Form Builder und Jotform unterstützen bedingte Logik von Haus aus.
• Eigenes JavaScript mit Show/Hide-Logik ist die native Option für Shops, die die volle Design-Kontrolle wollen.

Bedingte Logik macht Formulare intelligenter. Anstatt jedem Besucher jedes Feld zu zeigen, zeigst du nur die Felder, die für seine Situation relevant sind. Bei einer B2B-Anfrage werden Felder für Unternehmensgröße und Branche angezeigt. Ein B2C-Kunde sieht ganz andere Felder. Das Formular passt sich ihm an.

Das Ergebnis: kürzer wirkende Formulare, bessere Datenqualität und höhere Ausfüllraten.

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 bedingte Logik des Hulk Form Builders funktioniert mit Standard-Formularen auf Shopify-Seiten.

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 Abschnitt „Conditional logic“
4. Lege Regeln fest: „Zeige dieses Feld, wenn [Feldname] gleich [Wert] ist“

Für ein Beispiel mit Geschäfts- vs. Privatkunden: Erstelle zuerst das Dropdown „Kundentyp“ und füge dann den geschäftsspezifischen Feldern bedingte Regeln hinzu.

Siehe auch: Eine Quiz-Seite in Shopify erstellen — und unser Deep-Dive zu den Conversion-Mustern hinter Produktempfehlungs-Quizzes.

Siehe auch: UTM-Parameter in Shopify-Formularen erfassen.

Siehe auch: Multi-Step-Formulare in Shopify erstellen.

Siehe auch: Custom JavaScript in Shopify hinzufügen.

Siehe auch: Ein individuelles Kontaktformular in Shopify hinzufügen.

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 bedingte 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-/ausgeblendet werden
3. Übermittle das Formular über jeden Pfad
4. Vergewissere dich, dass die Einsendung die korrekten Daten enthält
5. Teste auf Mobilgeräten — Animationen bei bedingter Logik verhalten sich auf Touch-Geräten manchmal anders

Bei JavaScript-Implementierungen solltest du auch mit deaktiviertem JavaScript testen, um sicherzustellen, dass das Formular nutzbar bleibt (im Idealfall werden alle Felder angezeigt anstatt gar nichts).

FAQ