Wie man ein Growform-Mehrschrittformular zu Unbounce hinzufügt

Unbounce ist mit Abstand unser beliebtester Landing Page Builder, aber die Benutzer möchten oft mehrstufige Formulare erstellen, die sich nicht in der Benutzeroberfläche realisieren lassen.

Anstatt Hunderte von Zeilen JavaScript zusammenzuhacken oder mehrere Landing Pages aneinanderzureihen, zeigt Ihnen dieser Leitfaden, wie Sie Growform – den führenden mehrstufigen Formular-Builder – auf Ihrer Unbounce-Landing Page implementieren.

Wenn Sie diesem Leitfaden folgen, werden Sie am Ende so etwas wie dieses Ergebnis haben:

1 – Erstellen Sie ein Formular auf Growform

Natürlich müssen Sie ein Formular auf Growform erstellen. Es gibt eine 14-tägige kostenlose Testversion (keine Kreditkarte erforderlich) – melden Sie sich hier an.

Der erste Schritt wird etwa so aussehen:

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

2 – Holen Sie sich Ihren Growform-Freigabecode

Um Ihren Growform-Freigabecode zu erhalten, öffnen Sie Growform und stellen Sie sicher, dass Ihr Formular gespeichert ist. Navigieren Sie dann zu “Formular freigeben” in der oberen blauen Leiste.

Wählen Sie die Standardoption – klicken Sie auf “Einbettungscode holen” und dann auf die Schaltfläche “Einbettungscode kopieren”:

3 – Fügen Sie einen benutzerdefinierten HTML-Block zu Unbounce hinzu und fügen Sie Ihren Code ein

Öffnen Sie nun Ihre Unbounce-Seite im Editor und ziehen Sie den Block “Custom HTML” darüber. Sie werden dann aufgefordert, Ihren Code einzufügen.

Fügen Sie den in Schritt 2 erhaltenen Code ein und positionieren Sie den Kasten so, dass er in Ihr Design passt:

Klicken Sie auf “Speichern”, und vergessen Sie nicht, die Positionierung der Box für mobile Geräte anzupassen (wie üblich im Unbounce-Builder).

4 – Vorschau des Formulars und Anpassungen vornehmen

Wenn Sie auf Vorschau klicken, sollten Sie Ihr mehrstufiges Formular erfolgreich in die Unbounce-Seite eingebettet sehen:

Im Folgenden finden Sie einige Anpassungen, die Sie vornehmen können, um Ihre Form perfekt zu gestalten:

• 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 Grundfarbe Ihres Formulars (die sich auf Fortschrittsbalken und Akzente auswirkt) sowie eine Reihe anderer Farbeinstellungen an.

Mit einer kleinen Anpassung können wir ein mehrstufiges Formular erstellen, das so aussieht, als wäre es zu 100 % in die Unbounce-Seite eingebaut”:

5 – Aktivieren Sie Unbounce Conversion Tracking

Schließlich – als optionaler, aber abschließender Punkt – können Sie wählen, ob Growform-Formularausfüllungen als Konversionen in Unbounce verfolgt werden sollen. Dies erhöht einfach die Spalte “Conversions” auf Ihrer Unbounce-Landingpage-Statistik.

Um diese Option zu aktivieren, gehen Sie in Growform auf “Edit form settings” > “Tracking & tagging” > “Enable Unbounce conversion tracking”.

Brauchen Sie mehr? Wir arbeiten aktiv an unserem Unbounce-Angebot, einschließlich der Möglichkeit, Leads in Unbounce erscheinen zu lassen.

Bitte setzen Sie sich mit uns in Verbindung, um uns Feedback zu geben und uns bei der Gestaltung des Fahrplans zu helfen.