Die wichtigsten Punkte
- Das native Kontaktformular von Shopify ist rein einstufig (Single-Step). Mehrstufige Formulare (Multi-Step) erfordern eine Drittanbieter-Lösung.
- Mehrstufige Formulare verbessern die Abschlussraten bei längeren Formularen, da sie diese in überschaubare Abschnitte unterteilen.
- Typeform und JotForm sind die einfachsten Embeds – sie sind standardmäßig mehrstufig aufgebaut.
- Fudge kann ein natives Multi-Step-Formular erstellen, das exakt zum Design deines Themes passt.
Ein Formular mit 10 Feldern auf einer einzigen Seite wirkt oft abschreckend. Die gleichen 10 Felder, aufgeteilt auf 3 Schritte, sind plötzlich viel machbarer. Das ist der Grund, warum mehrstufige Formulare bei den Abschlussraten (Conversion Rates) konstant besser abschneiden als einseitige Formulare – und warum jedes Formular-Tool von Typeform bis HubSpot standardmäßig auf ein schrittbasiertes Layout setzt.
In Shopify erfordert das Ganze allerdings ein bisschen 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 ideal. Zwei Schritte unterteilen ein langes Formular, ohne dass es zerstückelt wirkt. Vier Schritte sind in etwa die Obergrenze, bevor die Abschlussrate sinkt. Bei mehr als 4 Schritten bist du besser beraten, das Formular zu kürzen, anstatt noch weitere Schritte hinzuzufügen. Jeder Schritt sollte maximal 2–4 Felder haben.
Nein, solange es als natives Formular mit Progressive Disclosure (CSS/JavaScript blendet die nachfolgenden Schritte nur aus) implementiert ist. Dann sind alle Felder beim ersten Laden im HTML enthalten, nur visuell versteckt – Google sieht also das gesamte Formular. Per Iframe eingebundene Formulare (z. B. Typeform) helfen der SEO nicht, da der Inhalt in einem separaten Dokument liegt, aber sie schaden auch nicht.
Besser als lange einstufige Formulare. Auf kleinen Handy-Displays sind Formulare mit 12 Feldern unerträglich; durch die Aufteilung in Schritte passt jeder Abschnitt bequem auf den Bildschirm und bietet komfortable Touch-Ziele (Tap Targets). Zeige den Fortschritt an ("Schritt 2 von 3") und nutze große, gut sichtbare primäre Buttons. Teste unbedingt, dass die Tastatur unter iOS nicht den Weiter-Button verdeckt.
Das ist sehr hilfreich bei langen Formularen (4+ Schritte mit Pflichtfeldern). Speichere den Zwischenstand nach jedem Schritt im localStorage; wenn der Nutzer zurückkehrt, fülle die Felder im Vorfeld aus und biete an: "Dort weitermachen, wo du aufgehört hast". Aus Datenschutzgründen solltest du den Speicher nach dem Absenden und beim Logout leeren. Speichere niemals sensible Daten (Zahlungsdetails, Ausweise) im localStorage.
Ja – das ist sogar das häufigste Muster. Beschreibe Fudge die Verzweigungen ("wenn Schritt 1 'Großhandel' ist, zeige als Nächstes die Unternehmensfelder; andernfalls springe direkt zur Bestätigung") und es generiert dir das entsprechende JavaScript nativ in deinem Theme – komplett ohne Formular-App. Alternativen: eine Formular-App wie Hulk oder Typeform als Embed. Genau diese Verzweigungen machen Multi-Step-Formulare so unglaublich wertvoll für die Lead-Qualifizierung.
Um die Ergebnisse zu messen, siehe Conversions in Shopify tracken.
Verwandt: Bedingte Logik (Conditional Logic) zu Shopify-Formularen hinzufügen.
Verwandt: Shopify Product Recommendation Quiz – Beispiele und Muster — mehrstufige Formulare sind das Fundament für Quiz-basierte Produktempfehlungen.
Verwandt: Ein Datei-Upload-Feld in Shopify hinzufügen.