Die wichtigsten Erkenntnisse
- Das native Kontaktformular von Shopify ist einstufig. Multi-Step-Formulare (mehrstufig) erfordern eine Drittanbieter-Lösung.
- Mehrstufige Formulare verbessern die Abschlussraten bei längeren Formularen, indem sie in machbare Abschnitte unterteilt werden.
- Typeform und JotForm sind die einfachsten Embeds – sie sind standardmäßig mehrstufig.
- Fudge kann ein natives Multi-Step-Formular erstellen, das genau zum Design deines Themes passt.
Um ein mehrstufiges Formular in Shopify zu erstellen, bettest du ein Tool wie Typeform oder JotForm ein, installierst eine Formular-App, die Seitenumbrüche unterstützt, oder baust ein natives Multi-Step-Formular direkt in dein Theme ein. Das eigene Kontaktformular von Shopify ist nur einstufig.
Ein Formular mit 10 Feldern auf einer einzigen Seite wirkt abschreckend. Die gleichen 10 Felder, aufgeteilt auf 3 Schritte, fühlen sich machbar an. Ein langes Formular in Schritte aufzuteilen, hilft normalerweise bei der Abschlussrate – deshalb zeigen Tools wie Typeform immer nur eine Frage auf einmal.
So erstellst du ein ausfüllbares Formular in Shopify
Shopifys integriertes Formularsystem ist absichtlich einfach gehalten. Das Vorlagen-Template für die Kontaktseite bietet dir ein einfaches, einstufiges Formular. Für alles Komplexere – mehrere Schritte, Conditional Logic (bedingte Logik) oder eine Fortschrittsanzeige – brauchst du einen Drittanbieter-Ansatz.
Für die einstufige Version, sieh dir an, wie man ein benutzerdefiniertes Kontaktformular in Shopify hinzufügt.
Option 1 — Typeform
Typeform wurde speziell für mehrstufige, konversationelle Formulare entwickelt. Jede Frage erscheint einzeln, was sich gut für lange Formulare eignet.
Einrichtung:
- Erstelle einen kostenlosen Typeform-Account auf typeform.com
- Erstelle dein Formular – Typeform ist standardmäßig mehrstufig, jede Frage ist eine separate “Folie”
- Gehe in Typeform auf Share → Embed in a web page → kopiere den iframe-Code
- Gehe in Shopify zu Onlineshop → Seiten → wähle deine Seite aus
- Wechsle im Content-Editor in die HTML-Ansicht und füge den iframe-Code ein
Oder nutze die Typeform Shopify App zum Einbetten – das ist einfacher als das manuelle Einbetten per iframe.
Vorteile: Polierte Formular-UX, kein Designaufwand nötig, für Mobile optimiert.
Nachteile: Die Formulardaten liegen bei Typeform, nicht in Shopify. Das Design ist das von Typeform – nicht der exakte Style deiner Marke.
Option 2 — JotForm
JotForm unterstützt mehrstufige Formulare mit Fortschrittsbalken und funktioniert via iframe-Embed, ähnlich wie Typeform.
Einrichtung:
- Erstelle ein Formular in JotForm → gehe zu Form Settings → Form layout → Multi-page
- Teile deine Felder mit dem Element “Page Break” in Seiten auf
- Bette es per iframe auf deiner Shopify-Seite ein
Der kostenlose Plan von JotForm unterstützt 100 Einsendungen (Submissions) pro Monat. Kostenpflichtige Pläne beginnen bei etwa 34 $/Monat (Stand Oktober 2026).
Option 3 — Shopify Formular-Apps
Mehrere Formular-Builder im Shopify App Store unterstützen mehrstufige Formulare:
Hulk Form Builder – verfügt über eine mehrstufige Option. Füge ein “Page Break”-Feld zwischen Feldgruppen hinzu, um das Formular in Schritte zu unterteilen. Inklusive Fortschrittsanzeige.
Multi Step Form von MakeProSimp – speziell für mehrstufige Formulare auf Shopify entwickelt. Beinhaltet bedingte Logik und Fortschrittsanzeigen.
Diese Apps speichern die Formulardaten in ihrem Shopify-Dashboard und können mit E-Mail-Marketing-Tools integriert werden.
Verwandt: Fudge Page Builder.
Option 4 — Natives mehrstufiges Formular mit Fudge
Embeds von Drittanbietern und Apps passen optisch oft nicht zum Design deines Shops – unterschiedliche Schriftarten, Farben und Button-Styles. Für ein Formular, das sich nahtlos in dein Theme einfügt, baut es Fudge, der KI-Operator für Shopify-Shops, mit seinem Tool für Popups und Formulare direkt in dein Theme ein.
Beschreibe, was du brauchst:
“Baue ein mehrstufiges Kontaktformular mit 3 Schritten und einem Fortschrittsbalken. Schritt 1: Name, E-Mail, Unternehmenstyp (Dropdown). Schritt 2: Wonach suchst du? (Textarea). Schritt 3: Bevorzugte Kontaktmethode und beste Erreichbarkeit. Passe das Formular-Design an mein Theme an.”
Fudge generiert ein natives HTML/CSS/JavaScript-Formular, das das Design deines Themes übernimmt. Keine externen Abhängigkeiten. Das Formular startet als Entwurf, den du ausfüllen und testen kannst, bevor es live geht. Wenn es deine E-Mail-Liste füttern soll, bitte Fudge, Klaviyo zu verbinden, und die Anmeldungen landen in der von dir gewählten Liste, während Klaviyo weiterhin die E-Mails verschickt.
Warum mehrstufige Formulare besser konvertieren
Reduzierung der kognitiven Belastung. 12 Felder auf einmal zu sehen, ist überwältigend. 3 Felder im ersten Schritt wirken machbar.
Commitment und Konsistenz. Sobald jemand Schritt 1 abgeschlossen hat, ist die Wahrscheinlichkeit höher, dass er das Formular beendet. Dies ist ein dokumentiertes psychologisches Muster.
Fortschrittsanzeigen. “Schritt 2 von 4” sagt den Nutzern genau, wo sie stehen. Das reduziert Formularabbrüche, weil die Leute wissen, dass das Ende in Sicht ist.
Bessere Validierung. Du kannst jeden Schritt validieren, bevor es zum nächsten geht, und so Fehler frühzeitig abfangen, wenn sie noch leicht zu korrigieren sind.
Wann mehrstufige Formulare sinnvoll sind
Nutze Multi-Step, wenn:
- Das Formular mehr als 6 Felder hat
- Von verschiedenen Nutzersegmenten unterschiedliche Informationen abgefragt werden sollen (nutze Conditional Logic in den Schritten)
- Du nach sensiblen Informationen fragst (frage zuerst nach Kontaktdaten und die sensiblen Details zuletzt)
- Du Leads qualifizieren möchtest (Schritt 1 erfasst Basisinfos, Schritt 2 qualifiziert Budget/Bedarf)
Bleibe bei Single-Step, wenn:
- Das Formular 3 Felder oder weniger hat (Name, E-Mail, Nachricht)
- Es sich um eine Newsletter-Anmeldung oder eine einfache Lead-Erfassung handelt
- Schnelles Ausfüllen wichtiger ist als Gründlichkeit
Tracking von mehrstufigen Formularen
Richte ein Funnel-Tracking ein, um zu verstehen, wo Nutzer abspringen. Sende für jeden Formularschritt ein Custom Event an GA4:
// Auslösen, wenn der Nutzer von Schritt 1 zu Schritt 2 wechselt
gtag('event', 'form_step', {
form_name: 'wholesale_inquiry',
step: 2,
})Dadurch kannst du in GA4 unter Entdecken → Trichtererkundung (Funnel Exploration) einen Funnel erstellen, der die Abschlussraten für jeden Schritt anzeigt — extrem wertvoll, um herauszufinden, bei welchem Schritt du die meisten Nutzer verlierst.
FAQ
Wie viele Schritte sollte ein Shopify Multi-Step-Formular haben?
2–4 Schritte sind ideal. Zwei Schritte unterteilen ein langes Formular, ohne dass es zerstückelt wirkt. Vier ist in etwa die Obergrenze, bevor die Abschlussrate sinkt. Bei mehr als 4 Schritten ist es besser, das Formular zu kürzen, als weitere Schritte hinzuzufügen. Jeder Schritt sollte nicht mehr als 2–4 Felder haben.
Schadet ein mehrstufiges Formular meinem Shopify SEO?
Nein, wenn es als natives Formular mit Progressive Disclosure (CSS/JavaScript verstecken die nachfolgenden Schritte) implementiert wird. Die Felder sind beim ersten Laden alle im HTML vorhanden, nur visuell ausgeblendet – Google sieht das gesamte Formular. Per iframe eingebettete Formulare (Typeform) helfen dem SEO nicht, da der Inhalt in einem separaten Dokument liegt, sie schaden aber auch nicht.
Funktionieren mehrstufige Formulare gut auf dem Smartphone?
Besser als lange einstufige Formulare. Auf mobilen Bildschirmen sind Formulare mit 12 Feldern unerträglich; durch die Aufteilung in Schritte passt jeder Schritt auf den Bildschirm und bietet komfortable Tippflächen. Zeige den Fortschritt an ("Schritt 2 von 3") und verwende große primäre Buttons. Teste, ob die Tastatur auf iOS nicht den Weiter-Button verdeckt.
Sollte ich unvollständige Formulardaten speichern, wenn der Nutzer mittendrin abbricht?
Das ist hilfreich bei langen Formularen (4+ Schritte mit Pflichtfeldern). Speichere den Zwischenstand nach jedem Schritt im localStorage; fülle die Felder bei Rückkehr im Voraus aus und biete "Da weitermachen, wo du aufgehört hast" an. Aus Datenschutzgründen sollte er beim Absenden und beim Logout gelöscht werden. Speichere keine sensiblen Felder (Zahlungsdaten, Ausweisnummern) im localStorage.
Kann ich Conditional Logic (bedingte Logik) zwischen den Formularschritten hinzufügen?
Ja – das ist das häufigste Muster. Beschreibe Fudge die Verzweigung ("wenn Schritt 1 'Großhandel' ist, zeige als Nächstes die Unternehmensfelder; andernfalls springe zur Bestätigung") und es generiert das bedingte JavaScript nativ in deinem Theme – keine Formular-App nötig. Alternativen: eine Formular-App wie Hulk oder Typeform einbetten. Branching (Verzweigungen) macht mehrstufige Formulare erst so richtig wertvoll für die Qualifizierung. Weitere Muster findest du unter wie man Conditional Logic zu Shopify-Formularen hinzufügt.
