Wie Sie mehrstufige Webflow-Formulare erstellen (+ klonbare Vorlagen und Designs)

Kurze Zusammenfassung

Diese Anleitung zeigt Ihnen, wie Sie mit Growform hochkonvertierende Webflow-Mehrschrittformulare erstellen. Da Webflow von Haus aus keine mehrstufigen Formulare unterstützt, bietet Growform eine nahtlose Alternative mit Vorlagen und erweiterten Funktionen. Das ist entscheidend für die Verbesserung der Benutzerfreundlichkeit und der Konversionsrate. Folgen Sie unserer Schritt-für-Schritt-Anleitung und entdecken Sie weitere Tipps, Beispiele und Best Practices im Growform-Blog.

Erste Schritte mit mehrstufigen Formularen in Webflow

Die Erstellung eleganter, hochkonvertierender mehrstufiger Formulare in Webflow kann eine Herausforderung sein, insbesondere wenn Sie sich auf die nativen Formularfunktionen verlassen. Webflow eignet sich zwar hervorragend für visuell beeindruckende Landing Pages, aber es fehlt an integrierten Tools für fortgeschrittene mehrstufige Formulare, ohne dass Sie in komplexen benutzerdefinierten Code eintauchen müssen.

In dieser Growform-Anleitung zeigen wir Ihnen, wie Sie mehrstufige Webflow-Formulare erstellen. Egal, ob Sie ein Webflow-Anfänger oder ein erfahrener Designer sind, diese Anleitung wird Ihnen helfen, bessere Benutzererfahrungen zu liefern und qualitativ hochwertigere Leads zu sammeln.

Warum sollten Sie uns zuhören?

Wir von Growform haben uns auf die Erstellung leistungsstarker mehrstufiger Formulare spezialisiert, die einfach zu erstellen, schön gestaltet und für Konversionen optimiert sind. Wir haben Unternehmen, von Startups bis hin zu großen Agenturen, geholfen, ihre Lead-Generierung mit intelligenten, benutzerfreundlichen Formularen zu verbessern.

Unsere Plattform wurde speziell entwickelt, um die Herausforderungen bei der Erstellung von mehrstufigen Formularen in Tools wie Webflow zu lösen, ohne dass komplexer Code oder Entwicklungsressourcen benötigt werden. Mit jahrelanger praktischer Erfahrung und Tausenden von Formularen, die mit Growform erstellt wurden, wissen wir, was funktioniert, und wir helfen Ihnen, es gleich beim ersten Mal richtig zu machen.

Was ist ein mehrstufiges Webflow-Formular?

Ein mehrstufiges Webflow-Formular ist ein in der Webflow-Plattform erstelltes Webformular, das Fragen oder Eingabefelder in mehrere „Schritte“ oder Seiten aufteilt, anstatt alles auf einmal anzuzeigen. Dieses Design hilft, den Benutzer in kleineren, überschaubaren Abschnitten durch das Formular zu führen, was die Benutzerfreundlichkeit verbessert und oft die Konversionsraten erhöht.

Gründe für die Verwendung eines mehrstufigen Webflow-Formulars sind unter anderem:

• Reduziert die kognitive Belastung: Die Benutzer werden nicht mit zu vielen Feldern auf einmal überschüttet.
• Wirkt interaktiver: Es ahmt einen konversationsähnlichen Ablauf nach, der die Benutzer bei der Stange hält.
• Erhöht die Ausfüllraten: Durch die Anzeige von Fortschrittsindikatoren und die Konzentration auf jeweils eine Aufgabe ist es wahrscheinlicher, dass die Benutzer das Formular abschließen.

Die nativen Einschränkungen von Webflow

Webflow ist zwar eine hervorragende Plattform für die Gestaltung moderner, responsiver Websites, aber der Formularersteller unterstützt keine mehrstufigen Formulare von Haus aus. Wenn Sie ein echtes mehrstufiges Erlebnis schaffen möchten, müssen Sie sich auf benutzerdefinierte Entwicklungen und Workarounds verlassen, einschließlich:

• Benutzerdefinierter Code: JavaScript und CSS sind erforderlich, um Schrittübergänge zu erstellen und den Fluss zu steuern.
• Workarounds für die Formularvalidierung: Die Validierung von Feldern zwischen den Schritten führt zu einer zusätzlichen technischen Komplexität, die Webflow nicht von Haus aus beherrscht.
• Manuelle Ein-/Ausblendlogik: Sie müssen manuell entwerfen und skripten, welche Felder oder Abschnitte bei jedem Schritt angezeigt werden sollen, was fehleranfällig sein kann.

Aufgrund dieser Herausforderungen suchen viele Designer und Marketingfachleute nach einfacheren Alternativen, die es ihnen ermöglichen, mehrstufige Formulare zu erstellen, ohne eine Zeile Code anzufassen.

Growform: Eine bessere Alternative

Für Webflow-Benutzer, die elegante, leistungsstarke mehrstufige Formulare erstellen möchten, ohne in komplexen Code eintauchen zu müssen, ist Growform eine intelligente, codefreie Lösung, die sich nahtlos in jedes Webflow-Projekt integrieren lässt.

Hier ist der Grund, warum er sich auszeichnet:

• Visuelle Formularerstellung: Entwerfen Sie Ihr Formular mit einer übersichtlichen Drag-and-Drop-Oberfläche, für die kein JavaScript oder CSS erforderlich ist.
• Einfaches Einbetten: Kopieren Sie einfach den Einbettungscode Ihres Formulars und fügen Sie ihn in Webflow ein, indem Sie die native Komponente <embed> verwenden.
• Vollständig responsiv: Ihr Formular sieht auf dem Handy, dem Tablet und dem Desktop automatisch gut aus.
• Flexible Styling-Optionen: Verwenden Sie die Themeneinstellungen von Growform, um Schriftarten, Farben und Schaltflächenstile an Ihre Webflow-Website anzupassen.
• Eingebaute intelligente Funktionen: Erstellen Sie bedingte logische Abläufe, mehrseitige Layouts und dynamische Dankeschön-Bildschirme ohne Plugins.
• Nahtlose Integrationen: Senden Sie Leads über native Integrationen oder Zapier ganz einfach an Tools wie HubSpot, Mailchimp, Google Sheets oder jedes andere CRM.

Ein Kunde sagte einmal;

„Als wir zu einer fortschrittlicheren Lösung für mehrstufige Formulare wechselten, konnten wir einen sofortigen Anstieg unserer Konversionsraten feststellen – in einigen Fällen verdoppelten oder verdreifachten wir sie sogar. Unsere Kosten pro Lead haben sich deutlich verbessert, und das System war vom ersten Tag an stabil.“
– Eugen Bachir, Leiter der Abteilung Leistung bei BeMarketable

Ob Sie nun SaaS-, B2B-, Immobilien- oder Lead-Gen-Kampagnen erstellen, Growform bietet Ihnen die Flexibilität und den Feinschliff, den Ihre Webflow-Formulare brauchen, ohne dass Sie auf Benutzerfreundlichkeit verzichten müssen.

Schritt-für-Schritt-Anleitung zum Hinzufügen von mehrstufigen Growform-Formularen zu Webflow

1 – Erstellen Sie ein Formular auf Growform

Erstellen Sie zunächst ein neues Formular in Growform. Sie können eine 14-tägige kostenlose Testversion erhalten, für die keine Kreditkarte erforderlich ist – hier geht’s los.

Der erste Schritt sieht folgendermaßen aus:

Folgen Sie unserem Leitfaden für die ersten Schritte, wenn Sie Hilfe bei der Erstellung Ihres ersten Formulars benötigen.

2 – Holen Sie sich Ihren Growform-Freigabecode

Sobald Sie Ihr Formular erstellt haben, erhalten Sie Ihren Freigabecode, indem Sie auf den Menüpunkt “Formular freigeben” in der oberen Navigation von Growform klicken.

Wählen Sie die Standardoption – klicken Sie auf „Get Code einbetten“, und klicken Sie dann auf die Schaltfläche „Kopieren Code einbetten“ Schaltfläche:

3 – Fügen Sie eine “Embed”-Komponente zu Ihrer Webflow-Seite hinzu

Öffnen Sie nun Ihre Landing Page in Webflow und löschen Sie alle Formulare, die Sie bereits erstellt haben – wir werden sie durch unser neues mehrstufiges Formular ersetzen

Suchen Sie dann die Komponente “Code einbetten” auf der linken Seite. Es sieht aus wie ein Paar Codeklammern mit einem Backslash in ( </> ).

Sie müssen ein wenig scrollen, um sie zu finden – zum Zeitpunkt der Erstellung dieses Artikels befindet sie sich ganz am Ende der Liste unter “Komponenten”.

Sobald Sie die Komponente “Einbetten” gefunden haben, ziehen Sie sie an die Stelle, an der sie auf Ihrer Seite erscheinen soll.

Fügen Sie den Code für die Growform-Freigabe in dieses Feld ein.

Es ist wirklich einfach – hier ist ein Gif des gesamten Prozesses:

Klicken Sie auf “Veröffentlichen”, um diesen Schritt abzuschließen.

4 – Nehmen Sie einige kosmetische Anpassungen an Ihrer Form vor

Sobald Sie Ihr Formular hinzugefügt und Ihre Seite veröffentlicht haben, werden Sie auf Ihrer Live-Webflow-Domain wahrscheinlich etwas Ähnliches sehen (je nach der von Ihnen gewählten Formularvorlage):

Hier finden Sie einige Anpassungen, die Sie vornehmen können, damit Ihr Webflow-Mehrschrittformular perfekt aussieht:

• Wählen Sie in den “Theme”-Einstellungen von Growform unter Canvas-Einstellungen die Option Minimal – diese Option entfernt die Kopfzeile und die umgebenden Polsterungen.
• Wenn Sie die Leinwandeinstellungen gewählt haben, stellen Sie die Hintergrundfarbe der Leinwand so ein, dass sie mit der Hintergrundfarbe in Unbounce übereinstimmt, oder wählen Sie “Keine”, um sie transparent zu machen.
• Entfernen Sie alle Kopfzeilen, Anweisungen oder Logos am oberen Rand Ihres Growform-Formulars – Sie können diese immer in Unbounce haben.
• Setzen Sie “Schatten anzeigen” auf “Keine” – dies funktioniert am besten auf weißen Hintergründen.
• Passen Sie die Primärfarbe Ihres Formulars (die sich auf Fortschrittsbalken und Akzente auswirkt) sowie die anderen Farbeinstellungen an.

Mit einer 2-3-minütigen Anpassung der Theme-Einstellungen können wir erreichen, dass es wie ein wirklich schönes mehrstufiges Webflow-Formular aussieht, das mit dem Design der restlichen Seite übereinstimmt:

5 – Schicken Sie Ihre Leads irgendwohin!

Jetzt haben wir unser mehrstufiges Webflow-Formular eingerichtet, aber wohin gehen die Leads?

Die Leads erscheinen in Ihrem Growform-Konto und werden Ihnen standardmäßig per E-Mail zugeschickt. Sie können auch Zapier verwenden, um Ihre Leads an eines von Hunderten von Zielen zu senden.

Sie brauchen also nichts mehr in Ihrem Webflow-Konto zu konfigurieren – alles, was mit Ihren Leads zu tun hat, wird nun von Growform übernommen.

Best Practices für das Hinzufügen eines mehrstufigen Growform-Formulars zu Webflow

1. Priorisieren Sie eine reibungslose Benutzererfahrung

• Machen Sie es kurz und bündig: Zerlegen Sie lange Formulare in mundgerechte Schritte mit nur 1-2 Feldern pro Seite, um die Benutzer bei der Stange zu halten.

• Verwenden Sie klare Fortschrittsindikatoren: Ein Fortschrittsbalken zeigt den Nutzern an, wie weit sie sind, und verringert so die Abbruchrate.
• Optimieren Sie Feldbeschriftungen und Anweisungen: Halten Sie die Feldbezeichnungen kurz und verwenden Sie Platzhaltertext, um die Benutzer zu führen, ohne das Formular zu überladen.
• Minimieren Sie Pflichtfelder: Fragen Sie nur die wichtigsten Informationen ab, um Reibungsverluste zu vermeiden und das Ausfüllen zu fördern.

2. Design für nahtlose Webflow-Integration

• Passen Sie das Branding von Webflow an: Verwenden Sie die Themeneinstellungen von Growform, um Farben, Schriftarten und Schaltflächenstile an Ihre Webflow-Website anzugleichen.
• Unnötige Kopfzeilen entfernen: Wenn Webflow bereits einen Titel oder eine Beschreibung über dem Formular hat, entfernen Sie doppelte Kopfzeilen in Growform, um ein saubereres Aussehen zu erreichen.
• Optimieren Sie die Gestaltung von Schaltflächen: Stellen Sie sicher, dass die Größe und die Farben der Schaltflächen mit den anderen CTAs auf Ihrer Webflow-Website übereinstimmen.

3. Sorgen Sie für mobile Optimierung

• Testen Sie auf mehreren Geräten: Prüfen Sie, wie das Formular auf verschiedenen Bildschirmgrößen erscheint, um die Reaktionsfähigkeit sicherzustellen.
  
• Padding & Abstände anpassen: Verwenden Sie die Layout-Einstellungen von Growform, um die Abstände für mobilfreundliche Formularelemente zu verfeinern.
  
• Halten Sie den Text lesbar: Achten Sie darauf, dass der Formulartext und die Schaltflächen groß genug sind, um auf mobilen Bildschirmen leicht angetippt werden zu können.

4. Verbessern Sie die Konversionsraten mit intelligenten Formularelementen

• Verwenden Sie bedingte Logik: Blenden Sie Felder basierend auf Benutzereingaben ein/aus, um Formulare relevant und personalisiert zu halten.

• Aktivieren Sie Auto-Save oder Teilübertragungen: Erlauben Sie Benutzern, später zurückzukehren, um die Zahl der Abbrüche zu verringern.
• Experimentieren Sie mit mehrstufigen Layouts: Versuchen Sie Variationen wie eine Willkommensseite oder einen anreizbasierten ersten Schritt (z.B. “Erhalten Sie ein kostenloses Angebot”), um das Engagement zu erhöhen.

5. Optimieren Sie für Lead Management & Tracking

• Integrieren Sie mit CRM- und E-Mail-Tools: Verwenden Sie Zapier, um Leads automatisch an HubSpot, Mailchimp oder Google Sheets zu senden.

• Aktivieren Sie E-Mail-Benachrichtigungen: Stellen Sie sicher, dass Ihr Team in Echtzeit benachrichtigt wird, wenn ein neuer Lead ein Formular absendet.
• Verwenden Sie UTM-Tracking: Fügen Sie UTM-Parameter zu Growform hinzu, um zu verfolgen, welche Traffic-Quellen die meisten Konversionen generieren.

6. Test & Iteration für maximale Wirkung

• A/B-Test Formularvariationen: Probieren Sie verschiedene Formularlängen, CTA-Worte oder Schrittfolgen aus, um zu sehen, was am besten funktioniert.
• Überwachen Sie die Abbruchraten: Verwenden Sie Growform-Analysen, um festzustellen, wo Nutzer das Formular abbrechen, und passen Sie es entsprechend an.
• Verfeinern Sie auf der Grundlage von Feedback: Bitten Sie Besucher oder Kunden um Feedback zur Benutzerfreundlichkeit des Formulars und nehmen Sie bei Bedarf Verbesserungen vor.

Bessere Formulare, kein Code erforderlich

Die Erstellung von mehrstufigen Formularen in Webflow muss nicht bedeuten, dass Sie sich mit benutzerdefiniertem Code herumschlagen oder auf umständliche Workarounds zurückgreifen müssen. Die nativen Tools von Webflow sind zwar leistungsstark für das Design, aber sie sind nicht ausreichend, wenn es darum geht, fortgeschrittene, hochkonvertierende Formulare zu erstellen, die den Benutzer Schritt für Schritt führen.

Genau hier kommt Growform ins Spiel. Mit einer intuitiven Benutzeroberfläche, einer nahtlosen Webflow-Einbettung und Funktionen wie bedingter Logik, mobiler Reaktionsfähigkeit und CRM-Integrationen kümmert sich Growform um die Komplexität, so dass Sie sich auf die Konversion und das Benutzererlebnis konzentrieren können.

Mit Growform ist es ganz einfach, Formulare zu erstellen, die großartig aussehen und perfekt in Webflow funktionieren.

Sind Sie bereit, ein besseres mehrstufiges Formular zu erstellen? Starten Sie Ihre kostenlose 14-tägige Growform-Testversion und überzeugen Sie sich selbst vom Unterschied.

Brauchen Sie mehr? Wir arbeiten aktiv an unserem Webflow-Angebot.

Bitte wenden Sie sich an unser erfahrenes Support-Team, wenn wir Ihnen helfen können, auch bei der Konfiguration Ihres Kontos.