Brauchen Sie Hilfe? Wir helfen Ihnen weiter.

Startseite der Wissensbank aero-right Anmeldeformulare aero-right Wie erstellt man ein Anmeldeformular?

Wie erstellt man ein Anmeldeformular?

Anmeldeformulare Aktualisiert am 23. März 2022

Es gibt verschiedene Anmeldeformulare: eingebettete oder Pop-Up, kleine oder komplette. In diesem Artikel erfahren Sie, wie Sie für jeden Bedarf das richtige Anmeldeformular erstellen.

Klicken Sie unten auf das Formular, das Sie erstellen möchten.

Bevor Sie beginnen, beachten Sie bitte Folgendes:

  • Kostenlose Testkonten erlauben aus Sicherheitsgründen gegen automatische Anmeldungen nur bis 75 Anmeldungen pro Tag. Anschließend wird das Konto blockiert und Sie müssen den Plan erweitern.
  • Premiumkonten haben keine Anmeldebeschränkungen.
  • Das komplette eingebettete Formular ist für Kunden, die unsere alte Benutzeroberfläche verwenden, nicht verfügbar.
  • Das komplette eingebettete Formular hat unser klassisches Anmeldeformular ersetzt. Es ist flexibler und hat noch mehr Funktionen.
  • Eingebettete Formulare können, wie der Name schon sagt, auf Ihrer Website zwischen anderen inhalten eingefügt werden.
  • Wenn Sie einen Abschnitt in Ihrem Anmeldeformular löschen möchten, öffnen Sie das Formular im Editor und bewegen Sie den Mauszeiger über den jeweiligen Abschnitt. Daraufhin wird ein Papierkorb angezeigt. Klicken Sie darauf, um den Abschnitt aus Ihrem Formular zu löschen.
  • Seit September 2018 wurden viele Google-Dienste auf dem chinesischen Festland blockiert. Aufgrund dieser Einschränkungen funktioniert reCaptcha möglicherweise nicht ordnungsgemäß, wenn Sie sich in den betroffenen chinesischen Regionen befinden. Sie können mehr darüber erfahren, indem Sie hier klicken.


 

Komplette eingebettete Formulare

So erstellen Sie dieses Anmeldeformular:

  1. Wählen Sie Kontakte im Menü auf der linken Seite Ihres Benchmark Dashboards.
  2. Klicken Sie jetzt auf Anmeldeformulare im neuen Menü auf der linken Seite.
  3. Klicken Sie nun auf den Button Anmeldeformular erstellen rechts oben.
  4. Wählen Sie Komplettes eingebettetes Formular und klicken Sie auf Weiter.
  5. Geben Sie Ihrem Formular einen Namen und ordnen Sie es einer Kontaktliste zu. Klicken Sie auf Speichern & weiter.
  6. Erstellen und bearbeiten Sie Ihr Formular
    • Sie können die Opt-In-Nachricht bearbeiten, indem Sie oben links auf die Option Opt-In-Einstellungen klicken.
    • Ändern Sie das Erscheinungsbild Ihres Formulars oder fügen Sie zusätzliche Felder hinzu, indem Sie den Mauszeiger über das Anmeldeformular bewegen und auf das Symbol für Weitere Optionen (3 Punkte) klicken.
  7. Wenn Sie fertig sind, klicken Sie auf Speichern und veröffentlichen.
  8. Dann wird der Code für Ihr Anmeldeformular angezeigt. Wählen Sie den Code entweder als Javascript oder HTML aus. Kopieren Sie ihn und geben Sie ihn auf Ihrer Website ein.

Wichtig

  • Wenn Sie die Pixelbreite nicht festlegen, füllt das Formular 100% der Breite des Felds.
  • Die maximale Breite des Anmeldeformulars für Desktop beträgt 999 Pixel. Wenn das Anmeldeformular jedoch auf einem mobilen Gerät geöffnet wird, wird das Formular automatisch an die Bildschirmgröße angepasst.

 

Was Sie anpassen können
  • Sie können bei Bedarf die Breite selbst definieren. Wir empfehlen jedoch, diese zu belassen, damit sich das Formular besser anpasst.
  • Sie können die Hintergrundfarbe ändern, Ihrem Formular einen Rand hinzufügen und einen Eckenradius festlegen.
  • Klicken Sie auf Ihr Formular, um Bilder, Text und Abstandhalter einzufügen und die Überschrift, Felder und den Button des Anmeldeformulars anzupassen.
  • Im Kompletten eingebetteten Formular können Sie so viele Felder hinzufügen, wie Sie wünschen. Wir empfehlen jedoch, es lieber übersichtlich zu halten.

Benötigen Sie Inspiration? Hier sind Anmeldeformulare, die mit Benchmark erstellt wurden.

Zurück nach oben


 

Kleine eingebettete Formulare

Bevor Sie beginnen, beachten Sie bitte Folgendes:

  • Die Breite hängt davon ab, wo Sie Ihr Anmeldeformular auf Ihrer Website platzieren möchten.
  • Das kleine eingebettete Formular erfasst nur E-Mail-Adresse, Vorname und Nachname.

 Und so erstellen Sie dieses Formular:

  1. Melden Sie sich bei Ihrem Benchmark Konto an.
  2. Wählen Sie Kontakte im Menü auf der linken Seite.
  3. Klicken Sie jetzt auf Anmeldeformulare im Menü darunter.
  4. Klicken Sie nun auf den Button Anmeldeformular erstellen rechts oben.
  5. Wählen Sie Kleines eingebettetes Formular und klicken Sie auf Weiter.
  6. Geben Sie Ihrem Formular einen Namen und ordnen Sie es einer Kontaktliste zu.
  7. Klicken Sie auf Speichern & weiter.
  8. Erstellen und bearbeiten Sie Ihr Formular.

Wenn Sie fertig sind, klicken Sie auf Speichern und veröffentlichen.

Dann wird der Code für Ihr Anmeldeformular angezeigt. Wählen Sie den Code entweder als Javascript oder HTML aus. Kopieren Sie ihn und geben Sie ihn auf Ihrer Website ein.

Was Sie anpassen können

Da es sich um ein kompaktes Anmeldeformular handelt, haben Sie nur drei Felder zur Verfügung: Vorname, Nachname und E-Mail-Adresse. Dieses Anmeldeformular unterstützt keine Bilder. Wenn Sie mehr Felder benötigen, benutzen Sie das Komplette eingebettete oder das Pop-Up-Formular.

  • Sie können bei Bedarf die Breite selbst definieren. Wir empfehlen jedoch diese zu belassen, damit sich das Formular an den verfügbaren Platz anpasst.
  • Sie können die Hintergrundfarbe, die Kopfzeile und den Stil des Buttons ändern.

Benötigen Sie Inspiration? Hier sind Anmeldeformulare, die mit Benchmark erstellt wurden.

Zurück nach oben


 

Wie Sie das kleine Einbettungsformular horizontal einstellen

Kleine Einbettungsformulare erlauben nur 3 Felder: Vorname, Nachname und E-Mail-Adresse. Deshalb empfehlen wir Ihnen, nur den Code des kleinen Einbettungsformulars zu ändern und mindestens zwei Felder zu verwenden. Wenn Ihr Design es zulässt und Sie es brauchen, können Sie das Feld für den Nachnamen aktivieren.

Führen Sie die folgenden Schritte aus, um das kleine Einbettungsformular horizontal einzurichten.

Wir beginnen mit dem Anmeldeformular-Tool

Um das horizontale Formular zu erstellen, benötigen Sie ein bereits erstelltes kleines eingebettetes Formular.

    1. Sobald Ihr Formular fertig ist, können Sie auf Speichern & Veröffentlichen klicken.

.

  1. Bestätigen Sie die Änderungen und klicken Sie in dem Popup auf das Dropdown-Menü und wählen Sie den HTML-Code.
  2. Klicken Sie auf die Option Kopieren. Mit der Option Kopieren wird der gesamte Code ausgewählt.

  1. Schließen Sie das Popup-Fenster und kehren Sie zum Haupt-Dashboard von Benchmark zurück, indem Sie auf das Benchmark-Logo oben links klicken.

Der Prozess wird nun im Code-Editor fortgesetzt. Dieser Teil ist optional, Sie können auch eine Textdatei verwenden.

  1. Wechseln wir nun zum Dashboard E-Mails.
  2. Klicken Sie auf die Schaltfläche Neue E-Mail erstellen und wählen Sie dann Reguläre E-Mail-Kampagne.
  3. Ein sehr wichtiger Schritt: Wählen Sie den CODE-EDITOR.

  1. Schreiben Sie einen Namen für Ihre E-Mail. Dies dient nur zu Testzwecken, denn Sie werden diese Kampagne nicht versenden, und wenn Sie fertig sind, empfehlen wir Ihnen, die E-Mail zu löschen oder unverändert zu lassen, da sich der Code ändern könnte.
  2. Sie brauchen die Checkliste nicht auszufüllen, gehen Sie direkt zur Option E-Mail designen.

  1. Ersetzen Sie den vorhandenen Text des Code-Editors auf der linken Seite durch den HTML-Code, den Siezuvor aus Ihrem kleinen eingebetteten Anmeldeformular kopiert haben. Sie sehen Ihr Anmeldeformular auf dem rechten Bildschirm.

Machen Sie sich keine Gedanken über die Fußzeile, die Sie jetzt sehen. Diese wird nicht angezeigt, wenn Sie Ihren Code am Ende kopieren.

  1. Verwenden Sie nun Ihre Tastatur, um die Felder zu durchsuchen. Wenn Sie einen Mac haben, cmd+f, oder Windows ctrl+f.

Dies ist ein Beispiel dafür, wonach wir eigentlich suchen:

  1. Geben Sie in der Suchleiste ein: fieldset ODER den Namen des Feldes (z.B. Vorname). Wenn Sie nach fieldset suchen, finden Sie mehrere fieldsets, aber wir suchen nach diesem einen:

<fieldset class=“formbox-field

Das erste, gefolgt von: class=

Sie erkennen es, weil es den Namen des Feldes enthält. Sehen Sie sich das Bild oben an, der Feldname ist blau hervorgehoben.

  1. Jetzt können wir es bearbeiten. VOR dem Tag <fieldset fügen Sie Folgendes ein (Sie können kopieren und einfügen):

<table><tr><td>

  1. Danach müssen Sie den Tag schließen, indem Sie am Ende des Feldes hinzufügen:

</td>

Kennzeichnen Sie das Ende des Feldes mit diesem Tag: </fieldset>.

  1. Gehen Sie zum nächsten Feld und fügen Sie vor dem Tag hinzu:

 <td>

  1. Wenn Sie ein weiteres Feld haben (Feld für den Nachnamen), fügen Sie das <td> am Anfang hinzu und schließen mit </td>
  2. Am Ende Ihres letzten Feldes schließen Sie mit den Tags ab:

 </td></tr></table>

  1. Sie werden sehen, dass Ihr Formular jetzt waagerecht ist, und als letztes müssen Sie >die Breite> löschen.
  2. Lassen Sie uns die Suchleiste wieder herausnehmen und nach der Breite suchen, und zwar so:

width: 320px;

Sobald Sie es gefunden haben, LÖSCHEN Sie es aus dem Code, löschen Sie nichts anderes.

So wird der Code am Ende aussehen:

Beachten Sie, dass wir die hinzugefügten Tags blau hervorgehoben haben. Außerdem wurde das Attribut Breite bereits entfernt und Sie können das Formular horizontal sehen.

  1. Das Formular ist fertig! Kopieren Sie den gesamten Code und fügen Sie ihn in Ihre Website ein.

Wenn Sie eher visuell veranlagt sind, folgen Sie den Schritten im Code-Editor aus diesem Video:

Zurück nach oben


 

Pop-Up-Anmeldeformulare

Diese Art von Formularen taucht auf, wenn jemand Ihre Website besucht. Sie erscheinen automatisch vor dem eigentlichen Inhalt und lassen diesen momentan hinter einem grauen Schleier erscheinen.

Und so erstellen Sie dieses Anmeldeformular:

  1. Wählen Sie Kontakte im Menü auf der linken Seite.
  2. Klicken Sie jetzt auf Anmeldeformulare im Menü darunter.
  3. Klicken Sie nun auf den Button Anmeldeformular erstellen rechts oben.
  4. Wählen Sie Pop-Up-Formular und klicken Sie auf Weiter.
  5. Geben Sie Ihrem Formular einen Namen und ordnen Sie es einer Kontaktliste zu.

  1. Klicken Sie auf Speichern & weiter.
  2. Erstellen und bearbeiten Sie Ihr Anmeldeformular nach Ihren Bedürfnissen.
      • Sie können die Opt-In-Nachricht bearbeiten, indem Sie oben links auf die Option Opt-In-Einstellungen klicken.
      • Legen Sie Ihre Popup-Einstellungen fest, indem Sie auf Globale Einstellungen klicken und dann die verfügbaren Optionen bearbeiten.
  3. Wenn Sie fertig sind, klicken Sie auf Speichern und veröffentlichen.

Bitte beachten Sie Folgendes:

  • Das Pop-Up-Formular ist standardmäßig 400px breit, mit einem Abstand von 40px auf beiden Seiten, d.h. dass die maximale Bildfläche 320px beträgt. Wenn die Grafik jedoch die volle Breite einnimmt, können Sie das bei Bedarf ändern.
Was Sie anpassen können

In diesem Formular können Sie viel mehr als nur das eigentliche Formular anpassen. Sie können auch die Anmeldebestätigung bearbeiten. Denken Sie daran, dass dies ein Formular ist, das Sie als Pop-Up festlegen, wenn ein neuer Besucher Ihre Website besucht. Obwohl Sie dem Formular viele Felder hinzufügen können, empfehlen wir, das Popup-Formular kurz zu halten, um die Anmeldung zu vereinfachen.

  • Sie können die Position des Pop-Ups auswählen, an der Ihr Formular angezeigt wird, wobei zentriert vorausgewählt ist.
  • Sie können die Breite anpassen.
  • Sie können eine Animation auswählen, die bestimmt, wie das Formular erscheint.
  • Die Verzögerung bestimmt die Zeit (von 0 bis 60 Sekunden), die verstreicht, bevor das Formular erscheint..
  • Ähnlich wie bei den anderen Formularen können Sie auch Farbe, Rand und Eckenradius anpassen. Für diesen Formulartyp können Sie einen Schatten sowie die Opazität und Größe auswählen.
  • Besucher können das Pop-Up-Fenster schließen, wenn sie nicht interessiert sind. Passen Sie in Bezug auf das Symbol zum Schließen die Position, Farbe, Art des Symbols, den Hintergrund, den Rand etc. an.
  • Die Überlappung ist standardmäßig schwarz mit einer Deckkraft von 70%. Dies ist der Hintergrund hinter Ihrem Formular, wenn es angezeigt wird. Sie können die Farbe und Deckkraft anpassen und sogar deaktivieren, wenn Sie sie nicht benötigen. Wir empfehlen, dass Sie die Überlagerung beibehalten, um Ihrem Formular ein deutlicheres Erscheinungsbild zu verleihen.
  • Klicken Sie auf Ihr Formular, um Bilder, Text und Abstandhalter einzufügen und die Überschrift, Felder und den Button des Anmeldeformulars anzupassen.
  • Klicken Sie auf die Option Anmelden, um die Nachricht bei erfolgreicher Anmeldung anzupassen. Sie können die Schriftart, den Farbstil, den Text und den Hintergrund ändern.

Benötigen Sie Inspiration? Hier sind Anmeldeformulare, die mit Benchmark erstellt wurden.

Zurück nach oben


 

Erscheint das Popup-Formular mehr als einmal für bereits angemeldete Benutzer?

Unsere Popup-Formulare werden standardmäßig nur angezeigt, wenn sich ein Besucher noch nicht angemeldet hat. Sobald sich ein Besucher anmeldet, wird das Popup-Formular nicht mehr angezeigt. Wenn der wiederkehrende Besucher jedoch seine Browser-Cache löscht oder den Inkognito-Modus oder einen anderen Browser oder Computer verwendet, wird das Pop-Up-Formular erneut angezeigt.

Wie kann ich mein Pop-Up-Anmeldeformular so einstellen, dass es bei jedem Benutzer nur einmal erscheint?

  1. Klicken Sie im Schritt Design Ihres Anmeldeformulars auf Globale Einstellungen.
  2. Klicken Sie dann auf die Option Schließen.
  3. Wählen Sie nun die Option Pop-Up den Besuchern nur einmal anzeigen.
  4. Klicken Sie zuletzt auf Speichern und veröffentlichen.

Wenn das Anmeldeformular auf mehreren Seiten verwendet wird, gilt weiterhin die Regel, dass es nur einmal angezeigt wird.

Zurück nach oben


 

Klassisches Anmeldeformular

Bitte beachten Sie Folgendes:

  • Das klassische Formular ist ein älteres Formular, das dem Kompletten eingebetteten Formularen ähnelt. Der Stil der klassischen Form ist jedoch veraltet.
  • >Unser Komplettes eingebettetes Formular hat das klassische Anmeldeformular ersetzt.
  • Sie können vorhandene klassische Anmeldeformulare duplizieren, aber keine neuen erstellen.
  • Das klassische Anmeldeformular erscheint nur Benutzern, die unsere alte Benutzeroberfläche verwenden.

Zurück nach oben


 

Wie kann ich ein DSGVO-konformes Anmeldeformular gestalten

Um Ihr Anmeldeformular DSGVO-konform mit einem Kontrollkästchen zur Annahme Ihrer Datenschutzerklärung zu gestalten, folgen Sie diesen beiden Schritten:

  • Bearbeiten Sie ein Extra-Feld Ihrer Kontaktliste.
  • Fügen Sie ein Kontrollkästchen zum annehmen Ihrer Datenschutzerklärung in das Formular ein.

Extra-Feld

  1. Erstellen Sie eine Liste, die mit dem Anmeldeformular verbunden werden soll.
  2. Öffnen Sie die Liste und klicken Sie auf Bearbeiten.
  3. Sie können jetzt alle Felder der Liste sehen. Gehen Sie ganz nach rechts bis zu den “Extra”-Feldern und wählen Sie eines davon aus. Sie können den Namen beispielsweise auf ‘Datenschutzerklärung’ umbenennen.
  4. Ändern Sie den Feldtyp auf Richtig / Falsch. Damit kann der neue Abonnent die Datenschutzerklärung annehmen oder nicht.

 

Wenn das Feld bearbeitet wurde, können Sie das DSGVO-konforme Anmeldeformular erstellen.

Kontrollkästchen beim Anmeldeformular einfügen

Sie können dafür das Komplette eingebettete oder Pop-Up-Anmeldeformular verwenden.

  1. Erstellen Sie ein Anmeldeformular oder öffnen Sie ein bestehendes.
  2. Wählen Sie die Liste aus, die Sie eben mit dem bearbeiteten Feld erstellt haben. Im zweiten Schritt des Erstellungsprozesses des Anmeldeformulars fügen Sie das Feld ein, das wir im vorherigen Schritt bearbeitet haben.
  3. Bewegen Sie den Mauszeiger über das Anmeldeformular zwischen dem Feld Name und E-Mail-Adresse und klicken Sie auf die 3 Punkte, wo Sie das Feld hinzufügen möchten.
  4. Klicken Sie dann auf Felder auswählen und wählen Sie das Extra-Feld, das Sie erstellt haben.
  5. Klicken Sie nun auf den Zurückpfeil und Sie sehen Ihr ausgewähltes Feld.
  6. Klicken Sie auf das Feld.
  7. Geben Sie Ihrem Feld einen Namen (optional, da Sie den Feldnamen in der Liste bereits geändert haben), zum Beispiel ”Datenschutzrichtlinie”.
  8. Ändern Sie den Typ auf Prüfen.
  9. Markieren Sie dieses Feld als Erforderlich.
  10. Geben Sie im Antwortfeld den folgenden Code ein: <a target=“blank“ href=“https://www.IhreDomain.com“> <u> Datenschutzrichtlinie </ u> </a> 

Hinweis: Ersetzen Sie https://www.IhreDomain.com durch den Link der Datenschutzrichtlinie Ihrer Website.

Bearbeiten Sie Ihr Formular weiter oder klicken Sie auf die Option Speichern und veröffentlichen, wenn Sie fertig sind.

Wichtig

  • Der in Punkt 8 erwähnte Link muss der Link Ihrer Datenschutzrichtlinie sein.
  • Die Möglichkeit ein Kontrollkästchen einzufügen ist im Kleinen eingebetteten Formular NICHT enthalten.

 

Weitere Informationen finden Sie in diesem Video:

  • Komplettes eingebettetes Anmeldeformular

Zurück nach oben


Wenn Sie noch weitere Fragen haben, setzen Sie sich bitte über E-Mail, LiveChat oder Telefon mit unserem Kundendienst in Verbindung.


Haben wir Ihre Frage beantwortet?
Du hast bereits abgestimmt!