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

Wir empfehlen dringend, die reCAPTCHA-Bestätigung zu verwenden, um Spambots daran zu hindern, falsche Daten zu Ihren Listen hinzuzufügen.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Google ein reCaptcha erstellen und reCaptcha dann zu Ihrem Sendinblue-Formular hinzufügen können.

Erstellen Ihres reCaptchas in Google

  1. Gehen Sie zu https://www.google.com/recaptcha/admin/create und melden Sie sich bei Ihrem Google-Konto an.
  2. Fügen Sie eine Bezeichnung zu Ihrem Formular hinzu.
  3. Wählen Sie reCAPTCHA v2.
    Hinweis: reCAPTCHA v3 wird in Sendinblue nicht unterstützt.
  4. Wählen Sie die Art des benötigten reCaptchas
    recaptcha_en.png
  5. Das Feld Domains muss gemäß der Methode, mit der Sie Ihr Formular teilen, ausgefüllt werden (Formular > Schritt 6 Teilen).
    Share.png
    • Wenn Sie Ihr Formular mit Quick Share oder Iframe teilen: fügen Sie die Domain sibforms.com hinzu. Sendinblue verwendet diese Domain, um das Formular zu hosten.
    • Wenn Sie Ihr Formular mit HTML oder Einfaches HTML integrieren: fügen Sie die Domain der Website hinzu, auf das Formular angezeigt wird. Beispiel: Wenn Sie das Formular auf http://www.website.com hinzufügen möchten, müssen Sie website.com in dieses Feld eingeben.
      Hinweis: Wenn Sie nicht sicher sind, wie das Formular geteilt wird, können Sie beide Domains hinzufügen.
  6. (Optional) Bei Bedarf können Sie weitere Besitzer hinzufügen. Besitzer haben Besitzerrechte für den Standort-Schlüssel. Jede E-Mail-Adresse muss mit einem Google-Konto verbunden sein.
  7. Akzeptieren Sie die reCAPTCHA-Servicebedingungen.
  8. Klicken Sie auf Senden.

Ihr reCaptcha wurde erstellt! Sie sehen jetzt eine Seite, auf der der Standort-Schlüssel und der Geheimschlüssel angezeigt werden. Sie benötigen diesen Schlüssel im nächsten Schritt, um reCaptcha im Formular zu konfigurieren.

Hinzufügen von reCaptcha zu Ihrem Sendinblue-Formular

  1. Legen Sie den Captcha-Block per Drag und Drop in Ihrem Formular ab.
  2. Kopieren Sie den Standort-Schlüssel und den Geheimschlüssel aus dem vorherigen Schritt in die jeweiligen Felder.
  3. Wählen Sie Name des Labels, um eine Bezeichnung zu Ihrem reCaptcha hinzuzufügen.
  4. Wählen Sie Hilfetext, um Ihr reCaptcha mit Hilfetext zu versehen.
  5. Wählen Sie Unsichtbares Captcha nur, wenn Sie bei der Erstellung Ihres reCaptacha in Google "Unsichtbares reCaptcha Badge" gewählt haben.

Captcha_SIB.png

Möglicherweise erhalten Sie diese Fehlermeldungen, wenn Sie das Formular teilen:

Error_messages.png

  • Ungültige Domain für Standort-Schlüssel: Bitte überprüfen Sie Ihr Domain-Feld.
  • Ungültiger Schlüsseltyp: Wenn Sie reCAPTCHA v3 wählen, erhalten Sie möglicherweise diese Fehlermeldung in Ihrem Formular. Nur reCAPTCHA v2 wird unterstützt. 

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.

  • Klicken Sie zuerst auf Erweiterte Optionen und fügen Sie den Tag mit dem folgenden Text hinzu:
optin

Create-Form-EN-19.png

  • 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:
{{ doubleoptin }}
  • 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 Yopmail, 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!