Erstellen eines Anmeldeformulars

Überblick

Dieser Guide beschreibt die neue Version des Anmeldeformular-Editors (im November 2018 veröffentlicht). Wenn Sie ein Anmeldeformular mit dem alten Editor erstellen, dann schauen Sie doch bitte in diesem Guide oder erfahren Sie hier mehr über den neuen Editor. 

In diesem Tutorial zeigen wir Ihnen, wie Sie mit wenigen Klicks Ihr Anmeldeformular erstellen können. Sie können das Design, den Inhalt, das Verhalten und die Felder für die gesammelten Daten anpassen.

Mit diesen Shortcuts können Sie zu einem bestimmten Schritt springen:

  1. Erstellen eines Formulars
  2. Anpassen des Formular-Designs
  3. Auswahl von einer oder mehreren Kontaktlisten
  4. Anpassen der Formular-Einstellungen
  5. Anpassen der Formularnachrichten
  6. Teilen des Formulars

1. Erstellen eines Anmeldeformulars

Klicken Sie im Menü oben auf Kontakte.

Forms_1_EN.png

Klicken Sie anschließend auf Formulare.

Create-Form-EN-02.png

Klicken Sie als Erstes auf die Schaltfläche Ein Anmeldeformular erstellen.

Create-Form-EN-03.png

Benennen Sie Ihr Formular, um die Organisation zu vereinfachen und es in Ihrem Konto leicht wiederzufinden.

Create-Form-EN-04.png

2. Gestalten eines Anmeldeformulars

Durch die Anpassung der folgenden Elemente können Sie Ihr Formular genau an Ihre Vorstellungen anpassen:

  • Hintergrund
  • Textschriftgrößen, Größen und Farben
  • Formularfelder (fügt so viele Felder hinzu wie gewünscht)
  • Anweisungstext (leitet Benutzer bei der Anmeldung)
  • Erfolgsmeldung (bestätigt die erfolgreiche Anmeldung eines Benutzers)

Neue Formularfeldtypen

Fügen Sie weitere Formularfelder hinzu, um Informationen über Ihre Abonnenten zu sammeln und vorhandene Kontaktattribute auszufüllen (z. B. einen Text, eine Nummer, ein Datum, eine Kategorie oder boolesche Werte).

Fügen Sie eine Opt-in-Bestätigung zu Ihrem Formular hinzu, um das Einverständnis Ihrer Abonnenten für den Erhalt von Newslettern und Werbe-E-Mails einzuholen.

Sie können außerdem ein Feld für die Anmeldung bei mehreren Listen hinzufügen, damit die Benutzer bei der Anmeldung ihr Interesse oder ihre Präferenzen angeben und zu den entsprechenden Listen hinzugefügt werden können.

Jedes neue Formularfeld entspricht einem Kontaktattribut oder einer Kontaktliste:

  • Text (Kontaktattribut)
  • Nummer (Kontaktattribut)
  • Datum (Kontaktattribut)
  • Anmeldung bei mehreren Listen (Kontaktliste)
  • Double-Opt-in (Kontaktattribut)

Create-Form-EN-05.png

Captcha

Um Sie vor Spam zu schützen, beinhaltet Ihr Formular standardmäßig ein Captcha. Um ein Captcha zu konfigurieren, das zu Ihrer Website passt, besuchen Sie diese Website.

Geben Sie nach der Einrichtung den Website-Schlüssel in das Feld in Ihrem SendinBlue-Formular ein.

Sie können auch ein unsichtbares Captcha einrichten, indem Sie das Kontrollkästchen Unsichtbares Captcha im linken Menü des Formular-Editors aktivieren.

Create-Form-EN-06.png

Anpassen des Formulars

Sie können verschiedene Formularelementblöcke, einschließlich Titel, Text, Bild und Trenner, per Drag & Drop auf Ihr Formular verschieben, ähnlich wie Formularfelder. Um das Design Ihres Formulars noch stärker anzupassen, klicken Sie auf die Registerkarte Formular-Design in der linken Seitenleiste des Formular-Editors.

Create-Form-EN-07.png

Sie können Folgendes anpassen:

  • Hintergrundfarbe oder Bild
  • Text-Schriftart, Format, Farbe, Größe und Ausrichtung eines Titels, Texts, Labels und Hilfetexts
  • Hintergrund, Layout, Breite, Ausrichtung, Rand, Opazität und Ecken des Formular-Containers
  • Schaltflächenfarbe, Schriftgröße des Schaltflächentexts, Größe, Format und Farbe, Schaltflächenausrichtung und Ecken
  • Farbe, Text-Schriftart, Format, Farbe, Größe und Ausrichtung der Erfolgs-/Fehlermeldung, Hintergrundfarbe des Kastens der Fehlermeldung, Randfarbe und Ecken

Anzeige auf Mobilgeräten

Alle Formulare sind standardmäßig reaktionsfähig. Sie können eine Vorschau des Renderings Ihres Formulars auf einem Mobilgerät anzeigen, indem Sie die Ansicht oben im Formulareditor von "Desktop" auf "Mobilgerät" umschalten.

Create-Form-EN-08.png

3. Listenauswahl

Wenn Sie mit der Gestaltung Ihres Formulars fertig sind, müssen Sie eine oder mehrere Listen wählen, in denen neue Kontakte nach dem Einsenden des Formulars gespeichert werden. Sie können nach Listen suchen, indem Sie den Namen der Liste oder des Ordners eingeben, in dem sich die Liste befindet.

Create-Form-EN-09.png

In diesem Schritt können Sie außerdem neue Listen erstellen.

Create-Form-EN-10.png

4. Formulareinstellungen

In diesem Bereich können Sie (sofern gewünscht) festlegen, welche Art von Bestätigungsnachricht Ihre Abonnenten erhalten.

Create-Form-EN-11.png

4.1 Keine Bestätigung Wählen Sie diese Option, wenn nach der Anmeldung keine E-Mail gesendet werden soll.

Nach dem Klick auf die Anmeldeschaltfläche auf dem Formular werden Ihre Kontakte automatisch an die eingegebene URL weitergeleitet, z. B. http://www.meine-website.com oder auf eine Bestätigungsseite. Wenn Sie keine URL oder Bestätigungsseite auswählen, wird oben im Formular eine Nachricht angezeigt, die die Anmeldung bestätigt, ohne dass sich die Seite ändert. Um eine Weiterleitungs-URL oder Bestätigungsseite einzurichten, aktivieren Sie das Kontrollkästchen Bestätigungsseite.

Create-Form-EN-12.png

4.2 Einfache Bestätigung Wählen Sie diese Option, wenn Sie eine Bestätigungs-E-Mail an neue Abonnenten senden möchten, um zu bestätigen, dass sie Ihre E-Mails ab sofort erhalten. Wählen Sie als nächstes das SMTP-Template, das für die Bestätigung verwendet werden soll. Sie können das verfügbare Standard-Template "Standard-Template – Einfache Bestätigung" anpassen oder ein anderes Bestätigungstemplate erstellen.

Gut zu wissen: Um ein neues SMTP-Template zu erstellen, navigieren Sie zu der Transaktionsregisterkarte und klicken Sie auf Templates und dann auf die Schaltfläche Neues Template. Wenn Sie ein neues SMTP-Template erstellen, denken Sie daran, es zu aktivieren, damit es beim Einrichten eines Formulars mit einfacher Bestätigung als Option angezeigt wird.

Diese Option ermöglicht es Ihnen auch, eine Weiterleitungs-URL oder Bestätigungsseite zu wählen.

4.3 Double Opt-in-Bestätigung Beim Double-Opt-in-Anmeldeverfahren muss der Abonnent zwei Schritte abschließen, um zu Ihrer E-Mail-Liste hinzugefügt zu werden:

  1. Ihr neuer Abonnent gibt seine E-Mail-Adresse in Ihr Anmeldeformular ein.
  2. Nach der Einreichung des Formulars muss er auf den Link in einer Bestätigungs-E-Mail klicken.

Die Double-Opt-in-Bestätigungsfunktion ermöglicht es den Abonnenten, zu bestätigen, dass sie Ihre E-Mails erhalten können. Diese Funktion verhindert versehentliche Anmeldungen und potenzielle Ärgernisse. Für die Einhaltung der DSGVO wird diese Option empfohlen. Vorteile der Double-Opt-in-Bestätigung:

  • Für Ihre Kontakte:
    • Sie können bestätigen, dass sie bei der Registrierung keinen Fehler gemacht haben.
  • Für Sie:
    • Sie erhalten die Gewissheit, dass ein Abonnent tatsächlich am Erhalt Ihrer E-Mails interessiert ist.
    • Da der Abonnent seine E-Mail-Adresse zweimal bestätigt hat, wird die Zahl der Hardbounces (ungültige E-Mail-Adressen) in Ihren Kampagnen erheblich reduziert.
    • Sie sind gegen böswillige Wettbewerber geschützt, die falsche E-Mail-Adressen angeben, um Ihrer Reputation zu schaden.
    • Sie halten die Gesetze und Vorschriften in bestimmten Ländern ein: Das Double-Opt-in ist in mehreren Ländern obligatorisch, einschließlich der Europäischen Union.

Bei der Bestätigungs-E-Mail muss es sich um eines Ihrer SMTP-Templates handeln, das für das Double-Opt-in formatiert wurde (für Details siehe unten). Sie können:

  • das von uns bereitgestellte Template "Standard-Template - Double Opt-in-Bestätigung"
  • oder ein neues, von Ihnen erstelltes Template verwenden.

Create-Form-EN-13.png

a. Opt-in-E-Mail Sie können außerdem ein eigenes Template für die Opt-in-E-Mail erstellen oder wählen. Gehen Sie hierfür zu SMTP-Templates und klicken Sie auf Ein Template erstellen.

  • Erstellen Sie Ihr Template mit einem der verschiedenen Newsletter-Editors.
  • Bearbeiten Sie das Template wie gewünscht und fügen Sie diesen exakten Text als Double-Opt-in-Link ein:
{{ params.optin_url }}
  • Speichern Sie Ihr Template anschließend, aktivieren Sie es und kehren Sie zu Ihrem Anmeldeformular zurück.

Create-Form-EN-14.png

b. Bestätigungsseite (optional) Verwenden Sie dieses Tool, wenn Sie Ihre Abonnenten nach der Registrierung auf eine spezifische Seite weiterleiten möchten (zum Beispiel auf eine Bestätigungsseite oder die Homepage Ihrer Website).

c. Abschließende Bestätigungs-E-Mail (optional) Verwenden Sie dieses Tool, wenn Sie Ihren Abonnenten eine letzte Bestätigungs-E-Mail senden möchten, nachdem sie den Double-Opt-in-Prozess abgeschlossen haben. Wie bei den anderen Bestätigungs-E-Mails heißt das Standard-Template "Standard-Template - Letzte Bestätigung". Sie können es in Ihren SMTP-Templates ändern.

Gut zu wissen: SendinBlue erstellt automatisch eine vorläufige Double-Opt-in-Liste, um die Kontaktinformationen der Abonnenten zu speichern, die den zweiten Schritt des Double-Opt-in-Verfahrens noch nicht abgeschlossen haben (Bestätigung ihrer E-Mail-Adressen).

Außerdem wird Ihre SendinBlue-Kontakt-Datenbank aktualisiert und ein neues Attribut (Spalte) mit der Bezeichnung "Double-Opt-in" hinzugefügt. Für Kontakte, die via Double-Opt-in hinzugefügt werden, wird in dieser Spalte der Wert "Ja" angezeigt. Wenn sich der Kontakt über einen anderen Formulartyp angemeldet hat, ist in diesem Feld der Wert "Nein" enthalten. Wenn Sie kein SendinBlue-Anmeldeformular verwendet haben, um Kontakte zu Ihrer Datenbank hinzuzufügen, bleibt dieses Feld leer.

Create-Form-EN-15.png

4.4 Erweiterte Einstellungen (optional)

a. Temporäre E-Mail-Adressen Wählen Sie dieses Kontrollkästchen unter Erweiterte Einstellungen, um temporäre, bei Anbietern von Wegwerf-Adressen wie Ypomail, MyTrashMail usw. erstellte E-Mail-Adressen abzulehnen. Diese Adressen werden durch das Einsenden von Formularen nicht in Ihrer Kontaktdatenbank gespeichert.

b. Verhalten des ausgefüllten Formulars Mit dieser Option kann das Formular verborgen werden, nachdem es vom Abonnenten eingesendet wurde. Wenn Sie dieses Kontrollkästchen nicht auswählen, wird das Formular für den Benutzer weiterhin im Eingabemodus angezeigt, auch wenn es bereits ausgefüllt und erfolgreich eingesendet wurde.

Create-Form-EN-16.png

5. Formularmeldungen

Hier können Sie die Standard-Erfolgs- und Fehlermeldungen anpassen/bearbeiten, die auf Ihrem Formular angezeigt werden.

Create-Form-EN-17.png

6. Teilen Ihres Formulars

Nach dem Speichern müssen Sie das Formular teilen, um den Code für die Integration des Formulars in Ihre Website oder einen Link zum schnellen Teilen zu erhalten. Es gibt drei Arten von Codes:

    • Iframe: Dieser leicht zu integrierende Code ermöglicht es Ihnen, das Formular in einem Pop-up oder einer Seite in Ihre Website einzubetten.
    • HTML: Dieser Code kann stärker angepasst werden, mit Ajax-Animation für Nachrichten.
    • Einfache HTML: Diese vereinfachte Version des HTML-Formularcodes erfordert keinen Aufruf von JavaScript-Funktionen.

Gut zu wissen: Es ist nicht möglich, ein Captcha, das den Aufruf von JavaScript-Funktionen erfordert, in diesen Formularcode zu integrieren.

Create-Form-EN-18.png

Fügen Sie den Code einfach in Ihre Website ein, damit das Formular angezeigt wird!