Benchmark Email Hilfe-Center

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

Wie erstellt man ein Anmeldeformular?

Anmeldeformulare Aktualisiert am 31. August 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.

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.
  • 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.
  • Javascript-Formulare (einschließlich Website-Tracking): Änderungen oder Aktualisierungen, die an einem Javascript-Formular vorgenommen werden, erscheinen automatisch in dem Formular auf Ihrer Website.
  • HTML-Formulare (Website-Tracking inbegriffen): Änderungen oder Aktualisierungen, die an einem HTML-Formular vorgenommen werden, erscheinen nicht automatisch in dem Formular auf Ihrer Website. Um die neuen Änderungen zu sehen, müssen Sie das Formular erneut speichern und veröffentlichen, den neuen HTML-Code kopieren und zuletzt den neuen Code auf Ihrer Website einfügen.
  • Wenn Sie sich mit CSS auskennen, können Sie auch Ihren eigenen Code hinzufügen und Ihren Anmeldeformularen eine besondere Note verleihen.
  • Wenn die Änderungen nicht übernommen werden, leeren Sie den Browser-Cache und versuchen Sie es erneut.
  • Wenn ein Anmeldeformular keine neuen Kontakte erfasst, stellen Sie sicher, dass das richtige Formular auf Ihrer Website vorhanden ist.

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.

Um die Breite zu ändern, gehen Sie wie folgt vor:

  1. Klicken Sie im Schritt 2 auf Globale Einstellungen.
  2. Klicken Sie dann auf die Option Benutzerdefinierte Breite.
  3. Geben Sie die neue Breite ein.
  • 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.

Um die Breite zu ändern, gehen Sie wie folgt vor:

  1. Klicken Sie im Schritt 2 auf Globale Einstellungen.
  2. Wählen Sie dann Blockeinstellungen.
  3. Geben Sie die neue Breite ein.
  • 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.
  1. 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 ↑


Kann sich mein Pop-Up-Anmeldeformular mit einer zeitlichen Verzögerung öffnen?

Pop-Up-Formulare können mit einer kleinen Verzögerung programmiert werden, wenn ein Besucher die Seite mit dem Formular besucht. Sie können dies bereits einstellen, wenn Sie das Formular erstellen. Folgen Sie der dieser Anleitung:

  1. Wechseln Sie zu einem vorhandenen Popup-Formular.
  2. Klicken Sie oben links auf Globale Einstellungen und dann auf Blockeinstellungen. Ändern Sie die Zeit der Verzögerung.

Sie können Ihr Anmeldeformular weiter bearbeiten. Wenn Sie fertig sind, klicken Sie auf die Option Speichern und veröffentlichen.

Zurück nach oben ↑


Formulare von Drittanbietern

Formulare, die Sie über Plugin-Integrationen erstellen können:

  • Facebook – Erstellen Sie ein Anmeldeformular für Ihre Facebook-Profil oder Ihre Fanseite.
  • Unbounce – Nutzen Sie Ihr Anmeldeformular auf einer beliebigen Unbounce-Zielseite.
  • WordPress – Fügen Sie mit unserer Plugin-App ein Anmeldeformulare auf Ihrer WordPress-Site ein.
  • Twitter – Veröffentlichen Sie ganz einfach Ihr Benchmark-Anmeldeformular als Link in Ihrem Twitter-Profil.

Zurück nach oben ↑


Wenn Sie Fragen haben, wenden Sie sich bitte an unser Support-Team.