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
Das integrierte Formularsystem von Shopify ist absichtlich einfach gehalten. Die Kontaktseiten-Vorlage bietet dir ein grundlegendes einstufiges Formular. Für alles Komplexere – mehrere Schritte, bedingte Logik oder eine Fortschrittsanzeige – benötigst du einen Drittanbieter-Ansatz.
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
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.
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.
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 ein Funnel-Tracking ein, um zu verstehen, wo die Leute abbrechen. Sende für jeden Formularschritt ein benutzerdefiniertes Event an GA4:
// Wird ausgelöst, wenn der Nutzer von Schritt 1 zu Schritt 2 wechselt
gtag('event', 'form_step', {
'form_name': 'wholesale_inquiry',
'step': 2
});Auf diese Weise kannst du in GA4 unter “Explorative Datenanalyse” → “Trichteruntersuchung” einen Funnel erstellen, der die Abschlussraten für jeden Schritt anzeigt – unbezahlbar, um zu identifizieren, bei welchem Schritt du die meisten Nutzer verlierst.
