Suche

Landingpages – Teil 4: Hinzufügen eines Formulars und erweiterte Optionen

💡 Gut zu wissen
Landingpages stehen für Business- und Enterprise-Angebote zur Verfügung.

In diesem Artikel erklären wir dir, wie du ein Formular zu deiner Landingpage hinzufügst und wie du die erweiterten Optionen des Landingpage-Editors nutzen kannst. 

Wir haben eine Reihe von Artikeln verfasst, um dir bei der Erstellung deiner Landingpages zu helfen:

Gut zu wissen

Der neue Landingpage-Editor bietet einige Optionen, die sich vom klassischen Landingpage-Editor unterscheiden können. Vergewissere dich, dass du die richtige Registerkarte des Landingpage-Editors wählst, je nach dem, was du verwendest:

mceclip6.png

mceclip5.png
Neuer Landingpage-Editor

Klassischer Landingpage-Editor

Hinzufügen eines Formularelements

Mit Formularen kannst du bestimmte Informationen über deine Kontakte abrufen und sie automatisch zu deinen Kontaktlisten in Brevo hinzufügen.

So fügst du ein Formularelement zu deiner Landingpage hinzu:

Neuer Editor Klassischer Editor
Du kannst entweder einen neuen Bereich unter Sections > Filter pre-made sections > Forms ( Abschnitte > Vorkonfigurierter Bereiche filtern > Formulare) hinzufügen und einen vordefinierten Bereich auswählen, den du nach deinen Bedürfnissen bearbeiten kannst. Oder du fängst ganz von vorne an, indem du ein neues Formularelement zu deiner Landingpage hinzufügst.

Einrichten deines Formulars

Sobald du ein Formularelement zu deiner Landingpage hinzugefügt hast, kannst du auswählen, wie du es einrichten möchtest:

Alignment (Ausrichtung)

Diese Einstellung steht nur im Editor für neue Landingpages zur Verfügung.

Die Einstellung Ausrichtung wird im Bereich Allgemeine Einstellungen in Teil 3: Bearbeiten der Einstellungen für alle Elemente deiner Landingpage beschrieben.

Felder verwalten

In den Einstellungen Felder verwalten kannst du auswählen, wo die Kontakte, die du mit dem Formular sammelst, gespeichert werden sollen und welche Informationen du von ihnen erhalten möchtest. Du kannst das Formular auch selbst konfigurieren: Felder hinzufügen und sortieren, Felder obligatorisch machen oder nicht, Hilfetext hinzufügen usw.

Um zu den Einstellungen Felder verwalten zu gelangen, klicke im Editor der Landingpage auf dein Formular.

Wähle deine Kontaktliste

 
  1. Klicke im Formular auf Edit Form (Formular bearbeiten).
  2. In der Einstellung Manage Fields (Felder verwalten) wählst du aus, in welchem Ordner und in welcher Liste die von dir gesammelten Kontakte in deinem Brevo-Konto gespeichert werden sollen:
    • Wähle einen Listenordner aus der ersten Dropdown-Liste.
    • Wähle eine Kontaktliste aus der zweiten Dropdown-Liste.
❗️ Wichtig
Wenn du bestehende Kontakte aus deiner Liste aktualisieren möchtest, wenn sie das Formular einreichen, markiere die Option Update existing contacts on form submission (Vorhandene Kontakte bei der Übermittlung des Formulars aktualisieren) unter Form Subscription Controls (Steuerelemente Anmeldeformular).

Das Feld einrichten

Füge die verschiedenen Kontaktfelder mit den Informationen, die du mit deinem Formular sammeln möchtest, hinzu und sortiere sie. 
  1. Kontakt-Attribute hinzufügen: Füge deinem Formular bereits vorhandene Kontakt-Attribute hinzu.
  2. Ein neues Feld erstellen: Wenn das Kontakt-Attribut noch nicht existiert, kannst du es hier erstellen.
  3. Felder neu anordnen: Klicke auf das Symbol = und ziehe ein Feld per Drag & Drop, um es neu anzuordnen.
    Feld löschen: Klicke auf das Papierkorb-Symbol, um ein Feld zu entfernen.

    Klicke auf ein Feld, um seine Einstellungen auszuwählen:
  4. Label: Zeigt das Label oberhalb des Feldes an.
  5. Hidden (Versteckt): Wähle aus, ob das Feld im Formular sichtbar oder ausgeblendet sein soll.
    Du kannst ein ausgeblendetes Formularfeld hinzufügen, wenn du möchtest, dass Daten automatisch ausgefüllt werden, indem du die Daten in der URL mit Abfrageparametern übergibst.
  6. Required (Erforderlich): Wähle aus, ob das Feld zum Einreichen des Formulars erforderlich ist oder nicht.

  7. Je nachdem, welches Feld du ausgewählt hast, hast du unterschiedliche Einstellungen:

    • Label: Ändere den Namen des Labels, das über dem Feld angezeigt wird.
    • Platzhalter: Gib den Text ein, der in deinem Feld angezeigt wird. Normalerweise ist es derselbe Text wie dein Label.
    • Hilfetext: Gib den Text ein, der unter deinem Feld angezeigt wird. Das kann nützlich für Vorschläge sein.
    • Default value (Standardwert): Gib den Wert ein, der in deiner Brevo-Kontaktliste synchronisiert wird, wenn dein:e Besucher:in das Feld nicht ausfüllt.
    • URL Param: Gib den Wert ein, der automatisch in das Formularfeld eingefügt werden soll. Dein Kontakt kann ihn bei Bedarf überschreiben. Weitere Informationen findest du in unserem Artikel Ein Formular auf einer Landingpage mit Kontakt-Attributen vorausfüllen.
❗️ Wichtig
Wenn du eine Telefonnummer in dein Formular einträgst, funktioniert nur das internationale Format mit einem +-Zeichen und der Landesvorwahl: +447911123456 für Großbritannien, +12025550101 in den USA oder +33655678834 in Frankreich. Verwende einen Platzhalter, um deinen Benutzer:innen zu helfen, das richtige Format zu verwenden.

Redirect Options (Weiterleitungsoption)

Mit den Optionen für die Weiterleitung kannst du auswählen, wohin deine Benutzer:innen weitergeleitet werden sollen, wenn sie ihre Daten übermittelt haben: 

Verwende die Aktion Formularweiterleitung, um deine Kontakte auf eine Seite im Trichter (eine Unterseite deiner Landingpage) oder auf eine bestimmte URL umzuleiten:

  • Page in the funnel (Seite im Trichter): Wähle aus, zu welcher Trichterseite du deine Kontakte weiterleiten möchtest.
  • Link to a URL (Link zu einer URL): Gib den Link zu der externen Seite ein, auf die du deine Kontakte weiterleiten möchtest.

Double-Opt-in

Mit der Double-Opt-In-Einstellung kannst du auswählen, welche Opt-In-Methode du in deinem Formular verwenden möchtest:

  • Single-Opt-in
    1. Dein neuer Kontakt gibt seine E-Mail Adresse in dein Formular ein.
    2. Sie werden zu deiner Brevo-Kontaktliste hinzugefügt.
  • Double-Opt-in
    1. Dein neuer Kontakt gibt seine E-Mail Adresse in dein Formular ein.
    2. Der Kontakt muss auf den Link in der Bestätigungs-E-Mail, die er erhält, klicken, um zu deiner Brevo-Kontaktliste hinzugefügt zu werden.
❗️ Wichtig
Es gibt zwei Möglichkeiten, eine Double-Opt-In-Anmeldung zu erstellen. Achte darauf, dass du nur eine der beiden verfügbaren Methoden verwendest: Double-Opt-In-Anmeldung durch Marketing-Automatisierung ODER durch ein Brevo-Anmeldeformular. Andernfalls erhalten deine Kontakte doppelte Double-Opt-In-E-Mails.

Design

Mit der Einstellung Design kannst du das Design deiner Felder auswählen: keins, umrandet, geschwungene Umrandung, unterstrichen mit Hintergrund, unterstrichen ohne Hintergrund.

Dein Formular kann auch als horizontales Formular angezeigt werden. Wenn du ein horizontales Formular auswählst, empfehlen wir dir, die Beschriftungen deiner Felder zu entfernen.

Um die Hintergrundfarbe zu ändern, gehst du zu den Spalteneinstellungen, wie in Teil 3 erklärt: Bearbeiten der Einstellungen für alle Elemente deiner Landingpage.

Hier sind einige Beispiele für die verschiedenen Formularentwürfe:

Style_form_gif.gif

Spacing (Abstand)

Die Einstellung Abstand wird im Bereich Allgemeine Einstellungen in Teil 3: Bearbeiten der Einstellungen für alle Elemente deiner Landingpage beschrieben.

Steuerelemente Anmeldeformular

Mit der Einstellung Steuerelemente Anmeldeformular kannst du auswählen, wie dein Formular bei der Übermittlung funktionieren soll:

  • Update existing contacts on form submission (Bestehende Kontakte beim Übermitteln des Formulars aktualisieren): Diese Option ist nützlich, wenn du die Informationen bestehender Kontakte aktualisieren möchtest, wenn sie ihre Formulare übermitteln. 
  • Disable reCAPTCHA (reCAPTCHA deaktivieren): Deaktiviert das standardmäßig eingebaute Google reCaptcha auf deiner veröffentlichten Landingpage.
  • Disable URL Parameters on form submission (URL-Parameter bei der Formularübermittlung deaktivieren):
    Standardmäßig werden die URL-Parameter bei der Übermittlung des Formulars angezeigt. Zusätzliche Daten über den Kontakt, wie z.B. /dankeschön.html/?firstName=Jane, können dann in der URL angezeigt werden. Diese Funktion ist nützlich, da deine Kontakte auf der zweiten Seite nicht dieselben Informationen ausfüllen müssen, wenn du mit einer Reihe von Landingpages in deinem Trichter mehrere Datensätze sammelst. Wenn du jedoch Google-Anzeigen schaltest und eine Benachrichtigung von Google über die Anzeige von URL-Parametern bei der Formularübermittlung erhältst, kannst du diese Funktion deaktivieren und deine Landingpage erneut veröffentlichen.

Style

Diese Einstellung steht nur im Editor für neue Landingpages zur Verfügung.

Mit der Einstellung Style kannst du das Aussehen deines Formulars festlegen:

  • Border style and color (Rahmenstil und -farbe): Fügt dem Symbol einen Rahmen hinzu und legt die Rahmenfarbe fest.
  • Border width (Rahmenbreite): Legt fest, wie breit der Rand deines Formulars sein soll.
  • Border radius (Rahmenradius): Legt fest, wie abgerundet der Rand deines Formulars sein soll.

Aktivieren des JavaScript-Trackings (Facebook Pixel/Google Analytics)

Die Einstellung Tracking deiner Landingpage ermöglicht es dir, Tracking-Skripte in bestimmte Teile der Seite einzufügen.

Ein Tracking-Skript ist ein Code, der verwendet wird, um die Anzahl der Benutzer:innen zu überwachen, die eine Seite besuchen. Mit Tracking-Skripten kannst du analysieren, wie lange Besucher:innen auf der Seite bleiben, was ihre Aufmerksamkeit erregt und wie sie mit dem Inhalt interagieren.

💡 Gut zu wissen
Google Analytics und Facebook Pixel sind die am häufigsten verwendeten Tracking-Skripte. Du kannst allerdings jedes Tracking-Skript zu einer Landingpage von Brevo hinzufügen.

So fügst du ein Tracking-Skript zu deiner Landingpage hinzu:

  1. Im Landingpage-Editor klickst du unten links auf Settings (Einstellungen).

  2. Wähle Tracking aus.

  3. Schreibe das Tracking-Skript in das entsprechende Tag. Du kannst entweder ein Skript einfügen:

    • das Head-Tag <head>,

    • das After opening (nach dem öffnen) <body>-Tag ,

    • oder das Vor dem Schließen </body>-Tag.

      💡 Gut zu wissen

      Bei Diensten wie Facebook Pixel und Google Analytics muss das Skript in den Head-Tag eingefügt werden, während es bei anderen Diensten in den Textkörper (Body) gehört. Überprüfe in den Anweisungen deines Tracking-Dienstes, wo das Skript eingefügt werden soll.

  4. Klicke auf Done (Fertig).

Mehrseitige Landingpage

Wenn du deiner Landingpage weitere Seiten hinzufügen möchtest, um einen Trichter zu erstellen, gehst du zum Bedienfeld Pages (Seiten) und klickst auf + Create a blank page (+ Eine leere Seite erstellen). Weitere Informationen findest du in unserem Artikel Verwalten von Unterseiten auf deiner Landingpage.

Gerätebasiertes Rendering

Mit den Optionen Desktop und Mobile oben auf deiner Landingpage kannst du die Darstellung deiner Landingpage auf verschiedenen Geräten testen.
❗️ Wichtig
Du kannst bestimmte Bereiche oder Elemente deiner Landingpage ausblenden, je nachdem, auf welchem Gerät sie angezeigt werden. Weitere Informationen findest du in unserem speziellen Bereich Visibility (Sichtbarkeit) in Teil 3: Bearbeiten der Einstellungen aller Elemente deiner Landingpage.

⏩ Nächste Schritte

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit der richtigen zertifizierten Brevo-Partneragentur verbinden.

💬 War dieser Beitrag hilfreich?

15 von 37 fanden dies hilfreich