Wichtige Erkenntnisse
- Das native Kontaktformular von Shopify ist nur einstufig. Mehrstufige Formulare erfordern eine Drittanbieter-Lösung.
- Mehrstufige Formulare verbessern die Abschlussraten bei längeren Formularen, indem sie diese in überschaubare Häppchen unterteilen.
- Typeform und JotForm sind am einfachsten einzubetten – sie sind standardmäßig mehrstufig.
- Fudge kann ein natives mehrstufiges Formular erstellen, das exakt zum Design deines Themes passt.
Ein Formular mit 10 Feldern auf einer einzigen Seite wirkt einschüchternd. Dieselben 10 Felder, verteilt auf 3 Schritte, fühlen sich machbar an. Aus diesem Grund übertreffen mehrstufige Formulare bei den Abschlussraten durchweg einseitige Formulare – und deshalb setzen alle Formular-Tools von Typeform bis HubSpot standardmäßig auf ein schrittbasiertes Layout.
In Shopify erfordert dies jedoch ein wenig Arbeit.
So erstellst du ein ausfüllbares Formular in Shopify
Shopifys integriertes Formularsystem ist bewusst einfach gehalten. Die Vorlage für die Kontaktseite bietet dir ein einfaches einstufiges Formular. Für alles Komplexere – mehrere Schritte, bedingte Logik oder eine Fortschrittsanzeige – benötigst du einen Drittanbieter-Ansatz.
Passend dazu: So fügen Sie ein benutzerdefiniertes Kontaktformular in Shopify hinzu (2026).
Option 1 — Typeform (einfachste Lösung, beste UX)
Typeform ist speziell für mehrstufige, konversationsbasierte Formulare konzipiert. Jede Frage erscheint einzeln, was zu sehr hohen Abschlussraten führt.
Einrichtung:
- Erstelle ein kostenloses Typeform-Konto auf typeform.com
- Erstelle dein Formular – Typeform ist standardmäßig mehrstufig, jede Frage ist ein separates “Slide”
- Gehe in Typeform auf Share → Embed in a web page → kopiere den Iframe-Code
- Gehe in Shopify auf Online Store → Pages → wähle deine Seite aus
- Schalte den Content-Editor auf die HTML-Ansicht um und füge den Iframe-Code ein
Zum Messen der Ergebnisse siehe Track Conversions in Shopify.
Verwandt: Add Conditional Logic to Shopify Forms.
Oder bette es mit der Typeform Shopify App ein – einfacher als das manuelle Einbetten per Iframe.
Vorteile: Schöne, hochkonvertierende Formular-UX, kein Designaufwand erforderlich, mobil optimiert.
Nachteile: Die Formulardaten liegen bei Typeform, nicht bei Shopify. Das Design entspricht dem von Typeform – nicht exakt dem Stil deiner Brand.
Option 2 — JotForm
JotForm unterstützt mehrstufige Formulare mit einer Fortschrittsanzeige und funktioniert per Iframe-Einbettung, ähnlich wie Typeform.
Einrichtung:
- Erstelle ein Formular in JotForm → gehe zu Form Settings → Form layout → Multi-page
- Unterteile deine Felder mit dem Element “Page Break” in Seiten
- Bette es per Iframe auf deiner Shopify-Seite ein
Der kostenlose Plan von JotForm unterstützt 100 Einsendungen pro Monat. Bezahlte Pläne beginnen bei etwa 34 $/Monat.
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
Einbettungen und Apps von Drittanbietern haben oft einen visuellen Bruch mit dem Design deines Stores – andere Schriftarten, Farben und Button-Styles. Für ein Formular, das sich wie ein nativer Teil deines Themes anfühlt, baut Fudge es richtig auf.
Beschreibe Fudge, was du brauchst:
“Erstelle ein mehrstufiges Kontaktformular mit 3 Schritten und einer Fortschrittsanzeige. Schritt 1: Name, E-Mail, Unternehmenstyp (Dropdown). Schritt 2: Wonach suchst du? (Textarea, optionaler Dateiupload). Schritt 3: Bevorzugte Kontaktmethode und beste Zeit für einen Rückruf. Passe den Formularstil an mein Theme an.”
Fudge generiert ein natives HTML/CSS/JavaScript-Formular, das das Design deines Themes übernimmt. Keine externen Abhängigkeiten.
Verwandt: Create a Quiz Page in Shopify.
Verwandt: Add a Custom Contact Form in Shopify.
Verwandt: Add a File Upload Field in Shopify.
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 mehrstufige Formulare, wenn:
- Das Formular mehr als 6 Felder hat
- Für verschiedene Nutzersegmente unterschiedliche Informationen gesammelt werden müssen (nutze bedingte Logik mit Schritten)
- Du nach sensiblen Informationen fragst (unterteile es in den Kontext – baue in Schritt 1 Vertrauen auf, bevor du in Schritt 3 nach Zahlungsinfos fragst)
- Du Leads qualifizieren willst (Schritt 1 erfasst Basisinfos, Schritt 2 qualifiziert Budget/Bedarf)
Bleibe bei einstufigen Formularen, wenn:
- Das Formular 3 oder weniger Felder hat (Name, E-Mail, Nachricht)
- Es sich um eine Newsletter-Anmeldung oder eine einfache Lead-Erfassung handelt
- Die Geschwindigkeit beim Ausfüllen wichtiger ist als Gründlichkeit
Tracking von mehrstufigen Formularen
Richte Funnel-Tracking ein, um zu verstehen, wo die Leute abspringen. Sende für jeden Formularschritt ein Custom Event an GA4:
// Wird ausgelöst, wenn der User von Schritt 1 zu Schritt 2 wechselt
gtag('event', 'form_step', {
'form_name': 'wholesale_inquiry',
'step': 2
});Damit kannst du in GA4 unter Entdecken → Trichtererkundung einen Funnel erstellen, der die Abschlussraten bei jedem Schritt zeigt — extrem wertvoll, um herauszufinden, bei welchem Schritt die meisten User verloren gehen.
FAQ
2–4 Schritte sind praktisch sinnvoll. Zwei Schritte teilen ein langes Formular auf, ohne dass es sich zerstückelt anfühlt. Vier ist in etwa die Obergrenze, bevor die Abschlussrate sinkt. Bei mehr als 4 Schritten bist du besser dran, das Formular zu kürzen, anstatt noch mehr Schritte hinzuzufügen. Jeder Schritt sollte 2–4 Felder haben, nicht mehr.
Nein, wenn es als natives Formular mit Progressive Disclosure umgesetzt wird (nachfolgende Schritte per CSS/JavaScript ausgeblendet). Alle Felder sind beim ersten Laden im HTML vorhanden, nur optisch versteckt – Google sieht das gesamte Formular. Per Iframe eingebettete Formulare (Typeform) helfen der SEO nicht, da der Inhalt in einem separaten Dokument liegt, aber sie schaden auch nicht.
Besser als lange Single-Step-Formulare. Auf Smartphone-Displays sind Formulare mit 12 Feldern eine Qual; durch die Aufteilung in Schritte passt jeder Schritt auf den Bildschirm, mit angenehmen Tap-Targets. Zeige den Fortschritt an ("Schritt 2 von 3") und verwende große primäre Buttons. Teste auf iOS, dass die Tastatur den Weiter-Button nicht verdeckt.
Das ist hilfreich bei langen Formularen (4+ Schritte mit Pflichtfeldern). Speichere den Zwischenstand nach jedem Schritt im localStorage; wenn der User zurückkehrt, fülle die Felder vorab aus und biete an: "Da weitermachen, wo du aufgehört hast". Aus Datenschutzgründen solltest du sie beim Absenden und Logout löschen. Speichere keine sensiblen Daten (Zahlungsinfos, Ausweisdaten) im localStorage.
Ja — das ist das gängigste Pattern. Beschreibe Fudge einfach die Verzweigung ("Wenn Schritt 1 'wholesale' ist, zeige als Nächstes die Firmenfelder; ansonsten 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. Gerade diese Verzweigungen (Branching) machen Multi-Step-Formulare so wertvoll für die Qualifizierung.
Um die Ergebnisse zu messen, siehe Conversions in Shopify tracken.
Verwandt: Conditional Logic zu Shopify-Formularen hinzufügen.
Verwandt: Shopify Product Recommendation Quiz - Beispiele und Pattern — Multi-Step-Formulare sind der Grundbaustein für Quiz-basierte Produktempfehlungs-Flows.
Verwandt: Datei-Upload-Feld in Shopify hinzufügen.