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 Implementierungen von bedingter Logik. Jede Frage kann basierend auf vorherigen Antworten verzweigen, was einen vollständig personalisierten Formularablauf erstellt.

So richtest du es ein:

1. Füge in deinem Typeform-Formulareditor deine Verzweigungsfrage hinzu (z. B. ein Multiple-Choice-Feld)
2. Gehe zu Logik → füge einen Logiksprung hinzu
3. Lege die Bedingung fest: „Wenn die Antwort ‘Business’ ist, gehe zur Frage nach dem Unternehmensnamen. Wenn die Antwort ‘Personal’ ist, gehe zur Frage nach der Nachricht.“

Typeform übernimmt die UX automatisch – es werden nacheinander nur die relevanten Fragen angezeigt.

Option 2 — Hulk Form Builder (Shopify App)

Die bedingte Logik des Hulk Form Builders funktioniert mit standardmäßigen Shopify-Seitenformularen.

Einrichtung:

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“ (Bedingte Logik)
4. Lege Regeln fest: „Zeige dieses Feld, wenn [Feldname] gleich [Wert] ist“

Für ein Beispiel mit Business vs. Personal: Erstelle zuerst das Dropdown „Customer type“ (Kundentyp) und füge dann bedingte Regeln zu geschäftsspezifischen Feldern hinzu.

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

Verwandt: UTM-Parameter in Shopify-Formularen erfassen.

Verwandt: Mehrstufige Formulare in Shopify erstellen.

Verwandt: Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Verwandt: Ein benutzerdefiniertes Kontaktformular in Shopify hinzufügen.

Option 3 — Jotform

Jotform bietet eine robuste bedingte Logik, darunter:

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

Einrichtung: Wähle im Formulareditor von Jotform 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 Shops, die volle Designkontrolle und keinen Overhead durch Drittanbieter-Apps wollen, kann bedingte Logik mit einfachem JavaScript implementiert werden.

Beispiel-Einrichtung:

HTML-Struktur:

<select id="customer-type" name="properties[Customer Type]">
    <option value="">Auswahl...</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="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 kommt komplett ohne externe Abhängigkeiten aus. Der Nachteil: Du schreibst und pflegst den Code selbst, und er muss in die Section- oder Snippet-Dateien deines Themes eingefügt werden.

Beschreibe dies stattdessen Fudge: „Erstelle ein Kontaktformular mit bedingter Logik – wenn der Kunde ‘Business’ auswählt, zeige Felder für Firmenname und Branche. Wenn er ‘Personal’ auswä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