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 wurde speziell für mehrstufige, dialogorientierte Formulare entwickelt. Jede Frage erscheint einzeln, was zu sehr hohen Abschlussraten führt.
Setup:
- Erstelle einen kostenlosen Typeform-Account auf typeform.com
- Baue dein Formular — Typeform ist standardmäßig mehrstufig, jede Frage ist ein separater “Slide”
- Gehe in Typeform auf Share (Teilen) → Embed in a web page (In eine Webseite einbetten) → kopiere den Iframe-Code
- Gehe in Shopify auf Onlineshop → Seiten → wähle deine Seite aus
- Wechsle im Content-Editor in die HTML-Ansicht und füge den Iframe-Code ein
Oder binde es mit der Typeform Shopify App ein — einfacher als die manuelle Iframe-Einbettung.
Vorteile: Schöne, konversionsstarke Formular-UX, kein Design-Aufwand nötig, für Mobile optimiert.
Nachteile: Die Formulardaten liegen in Typeform, nicht in Shopify. Das Design entspricht Typeform — nicht dem exakten Style deiner Marke.
Option 2 — JotForm
JotForm unterstützt mehrstufige Formulare mit einem Fortschrittsbalken und funktioniert ähnlich wie Typeform über eine Iframe-Einbettung.
Setup:
- Erstelle ein Formular in JotForm → gehe zu Form Settings (Formulareinstellungen) → Form layout (Formular-Layout) → Multi-page (Mehrseitig)
- Unterteile deine Felder mit dem Element “Page Break” (Seitenumbruch) 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 Multi-Step, wenn:
- Das Formular mehr als 6 Felder hat
- Von verschiedenen Nutzersegmenten unterschiedliche Informationen gesammelt werden müssen (nutze Conditional Logic mit Schritten)
- Du nach sensiblen Informationen fragst (teile es in einen Kontext auf — baue in Schritt 1 Vertrauen auf, bevor du in Schritt 3 nach Zahlungsinformationen fragst)
- Du Leads qualifizieren möchtest (Schritt 1 erfasst Basisinfos, Schritt 2 qualifiziert Budget/Bedarf)
Bleibe bei Single-Step, wenn:
- Das Formular 3 oder weniger Felder hat (Name, E-Mail, Nachricht)
- Es sich um eine Newsletter-Anmeldung oder ein einfaches Lead-Capture handelt
- Die Geschwindigkeit des Ausfüllens wichtiger ist als die 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
2–4 Schritte sind die praktische Regel. Zwei Schritte teilen ein langes Formular, ohne dass es sich fragmentiert anfühlt. Vier ist in etwa die Obergrenze, bevor die Abschlussrate sinkt. Bei mehr als 4 Schritten ist es besser, das Formular zu kürzen, als noch mehr Schritte hinzuzufügen. Jeder Schritt sollte 2–4 Felder haben, nicht mehr.
Nein, wenn es als natives Formular mit Progressive Disclosure (CSS/JavaScript versteckt die nachfolgenden Schritte) implementiert wird. Die Felder sind beim ersten Laden alle im HTML vorhanden, nur optisch versteckt — Google sieht das komplette 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. Mobile Bildschirme machen Formulare mit 12 Feldern unerträglich; die Aufteilung in Schritte ermöglicht es, dass jeder Schritt mit bequemen Tap-Zielen auf den Bildschirm passt. Zeige den Fortschritt an ("Schritt 2 von 3") und verwende große primäre Buttons. Teste, ob die Tastatur unter iOS den "Weiter"-Button nicht verdeckt.
Hilfreich bei langen Formularen (4+ Schritte mit Pflichtfeldern). Speichere den Status nach jedem Schritt im localStorage; biete bei der Rückkehr an, die Felder vorauszufüllen und "Dort weitermachen, wo du aufgehört hast". Aus Datenschutzgründen solltest du diese Daten nach dem Absenden und beim Logout löschen. Speichere keine sensiblen Felder (Zahlungsdaten, Ausweisnummern) im localStorage.
Ja — das ist die häufigste Anwendung. Beschreibe die Verzweigung für Fudge ("Wenn Schritt 1 'Großhandel' 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 erforderlich. Alternativen: eine Formular-App wie Hulk oder Typeform einbetten. Branching (Verzweigungen) ist genau das, was mehrstufige Formulare für die Qualifizierung so wertvoll macht.
Um die Ergebnisse zu messen, siehe Conversions in Shopify tracken.
Passend dazu: Bedingte Logik (Conditional Logic) zu Shopify-Formularen hinzufügen.
Passend dazu: Shopify Produktempfehlungs-Quiz - Beispiele und Muster — mehrstufige Formulare sind der Grundbaustein für Quiz-basierte Empfehlungs-Flows.
Passend dazu: Ein Datei-Upload-Feld in Shopify hinzufügen.