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

Wichtigste Erkenntnisse

• Bedingte Logik (Conditional Logic) blendet Formularfelder basierend auf der vorherigen Antwort eines Nutzers ein oder aus.
• Das native Shopify-Kontaktformular verfügt über keine bedingte Logik – du benötigst dafür eine Formular-App oder eigenen Code.
• Typeform, Hulk Form Builder und Jotform unterstützen bedingte Logik von Haus aus.
• Custom JavaScript mit Show/Hide-Logik ist die native Option für Shops, die die volle Kontrolle über das Design behalten wollen.

Um einem Shopify-Formular bedingte Logik hinzuzufügen, nutzt du am besten ein Formular-Tool, das diese Funktion unterstützt (Typeform, Hulk Form Builder oder Jotform), oder du fügst ein paar Zeilen JavaScript hinzu, die Felder basierend auf einer früheren Antwort ein- oder ausblenden. Das native Kontaktformular von Shopify bietet von sich aus keine bedingte Logik.

Anstatt jedem Besucher jedes Feld zu zeigen, zeigst du nur die Felder, 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 Ergebnis: eine scheinbar kürzere Formularlänge, eine bessere Datenqualität und höhere Abschlussraten.

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)

Der Hulk Form Builder fügt den Formularen, die du in der App erstellst (nicht dem nativen Shopify-Kontaktformular), bedingte Logik hinzu.

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 nach dem Abschnitt “Conditional logic” (Bedingte Logik).
4. Lege Regeln fest: “Show this field when [field name] equals [value]” (Zeige dieses Feld, wenn [Feldname] gleich [Wert] ist).

Für ein Beispiel “Geschäftlich vs. Privat”: Erstelle zuerst das Dropdown-Menü “Kundentyp” (Customer type) und füge dann bedingte Regeln zu den geschäftsspezifischen Feldern hinzu.

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 die volle Kontrolle über das Design wollen und auf Third-Party-Apps verzichten möchten, lässt sich bedingte Logik ganz einfach mit JavaScript umsetzen.

Beispiel-Setup:

HTML-Struktur:

<select id="customer-type" name="contact[Customer Type]">
    <option value="">Select...</option>
    <option value="business">Business</option>
    <option value="personal">Personal</option>
</select>

<div id="business-fields">
    <input type="text" name="contact[Company Name]" placeholder="Company name" />
    <input type="text" name="contact[Industry]" placeholder="Industry" />
</div>

JavaScript:

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

// Verstecke die Geschäftsfelder, sobald JavaScript läuft, damit Besucher ohne JavaScript sie weiterhin sehen
businessFields.style.display = 'none'

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

Benenne die Felder in einem Shopify-Kontaktformular contact[...], damit sie in der E-Mail angezeigt werden, die du erhältst.

Das ist sauber, schnell und erfordert keine externen Abhängigkeiten. Der Nachteil: Du schreibst und pflegst den Code selbst, und er muss den Section- oder Snippet-Dateien deines Themes hinzugefügt werden.

Beschreibe dies stattdessen einfach Fudge, dem AI-Operator für Shopify-Stores: “Erstelle ein Kontaktformular mit bedingter Logik – wenn der Kunde ‘Geschäftlich’ wählt, zeige Felder für Firmenname und Branche an. Wenn er ‘Privat’ wählt, blende diese Felder aus.” Kontaktformulare, Angebotsanfragen und Großhandelsanträge sind Teil des Popup and Form Builders, sodass das Formular als Section in deinem Theme erstellt und als Arbeitsentwurf angezeigt wird, bevor es live geht.

Um stattdessen ein langes Formular in mehrere Schritte zu unterteilen, lies Multi-Step-Formulare in Shopify erstellen.

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

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

Produktspezifisches Routing von Anfragen. “Auf welche Produktkategorie bezieht sich deine Frage?” → jede Antwort führt zu anderen Folgefeldern und sendet die Einsendung an eine andere Abteilungs-E-Mail.

Anmeldeformulare für den Großhandel. “Welcher Art ist dein Unternehmen?” (Einzelhandel, Online, Großhandel) → zeige jeweils die entsprechenden Felder.

Retouren und Supportanfragen. “Wähle deine Art des Problems aus” (beschädigter Artikel, falscher Artikel, nicht geliefert, Sonstiges) → jede Problemart zeigt unterschiedliche Folgefelder.

Event- oder Service-Buchung. “Service-Art auswählen” → zeige für jeden Service unterschiedliche Planungs- und Detailfelder.

Um das Kontaktformular selbst zu erstellen, lies Benutzerdefiniertes Kontaktformular in Shopify hinzufügen.

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