Möchten Sie die Anmeldeseite auf Ihrer WordPress-Website individuell gestalten? Mit WPForms haben Sie viele Möglichkeiten, Ihre Anmeldeformulare zu gestalten, ohne dass Sie programmieren müssen!

In diesem Beitrag zeigen wir Ihnen 7 verschiedene Beispiele für Anmeldeseiten von beliebten Websites und wie Sie diese nachbilden können. Wir führen Sie durch den Prozess der Erstellung jedes Formulars im gleichen Stil wie die Beispiele, die wir hier vorstellen, mit nur ein paar Mausklicks.

Lasst uns eintauchen!

Erstellen Sie jetzt Ihre Login-Seite

Was schreibt man auf eine Login-Seite?

Ihre Anmeldeseite enthält wahrscheinlich einige Felder, in die die Benutzer ihren Benutzernamen, ihre E-Mail-Adresse, ihr Kennwort und mehr eingeben.

Die Anmeldeseite Ihrer Website ist ein Ort, an dem Website-Benutzer ihre Anmeldedaten eingeben, um Zugang zu Ihrer Website zu erhalten. Diese Besucher haben vielleicht ein Konto auf Ihrer Website oder einen anderen Grund, warum sie sich auf Ihrer Website anmelden müssen.

Wahrscheinlich möchten Sie auch eine Form von Text auf Ihrer Anmeldeseite einfügen, um die Nutzer Ihrer Website zu informieren oder anzuleiten, wie sie auf die Website gelangen können. Sie können auch Bilder wie Logos und Illustrationen auf Ihrer Anmeldeseite einfügen, und Sie können sich für zusätzliche Sicherheitsfunktionen entscheiden, um unerwünschten Spam von Ihrer Anmeldeseite fernzuhalten.

7 Beispiele für Anmeldeseiten

1. Einfaches Anmeldeformular

Diese Anmeldeseite auf der HubSpot-Website ist recht einfach gehalten und enthält nicht viele Details im Formular. Das Formular besteht lediglich aus einer E-Mail-Eingabe, einem Passwort, einem Kontrollkästchen und einer Schaltfläche "Anmelden".

Das Besondere an einem Formular wie diesem ist, dass es so etwas wie die Grundlage für alle anderen Anmeldeformulare ist. Es enthält die grundlegendsten Elemente, die für eine Anmeldeseite benötigt werden.

Und wenn Sie möchten, kann Ihre eigene Anmeldeseite auch auf diese Weise vereinfacht werden. WPForms ist das beste Formularerstellungs-Plugin für WordPress, und es macht es super einfach für Sie, eine benutzerdefinierte Anmeldeseite zu Ihrer Website hinzuzufügen.

Zunächst müssen Sie installieren WPForms und melden Sie sich für die Pro-Plan, um die Benutzer-Registrierung Addon zugreifen.

Nach der Eingabe Ihres Lizenzschlüssels in Ihren WPForms-Einstellungen, gehen Sie zu WPForms " Addons in Ihrem Dashboard. Blättern Sie durch die verfügbaren Addons, um das Addon Benutzerregistrierung zu finden, das Sie auch installieren werden. Vergewissern Sie sich, dass Sie das Addon auch aktivieren, sobald Sie es installiert haben.

Jetzt sind Sie bereit, Ihr Anmeldeformular zu erstellen. Gehen Sie zu WPForms " Add New und suchen Sie die User Login Form-Vorlage aus Ihren verfügbaren Addon-Vorlagen. Klicken Sie auf die Schaltfläche Vorlage verwenden, um diese Vorlage auszuwählen und den Formularersteller zu öffnen.

Der WPForms-Formularersteller macht es Ihnen leicht, diese vorgefertigte Vorlage nach Ihren Wünschen zu bearbeiten. Sie werden eine umfangreiche Auswahl an Formularfeldern finden, die praktisch jedes Element abdecken, das Sie in Ihrem Online-Formular haben möchten. Alles, was Sie tun müssen, ist einfach per Drag & Drop jedes Feld an seinen Platz zu ziehen.

Sie werden sehen, dass das Benutzeranmeldeformular bereits die erforderlichen Felder geladen hat.

Aber, wie alle WPForms Vorlagen, ist dieses Formular in hohem Maße anpassbar, so können Sie hinzufügen und bearbeiten Felder auf Ihrem Formular in einer Vielzahl von Möglichkeiten.

Für dieses Formular bearbeiten wir die Schaltfläche "Absenden" am unteren Ende des Formulars so, dass sie wie im Beispiel der HubSpot-Anmeldeseite "Anmelden" lautet.

Klicken Sie einfach auf die Schaltfläche, um die Einstellungen zu erweitern.

Um den Text der Schaltfläche zu ändern, öffnen Sie die Registerkarte "Allgemein" und blättern Sie zum Feld " Text der Schaltfläche Senden".

Geben Sie nun ein, was auf der Schaltfläche stehen soll, z. B. "Anmelden".

Wenn man sich das Formular noch einmal anschaut, passt die Schaltfläche am unteren Rand des Formulars besser zu der Art der Anmeldung auf dieser Seite.

Und das ist alles, was Sie tun müssen, um ein einfaches Anmeldeformular wie das auf der HubSpot-Anmeldeseite zu erstellen.

Von hier aus können Sie das Formular speichern.

Sobald es gespeichert ist, steht dieses Formular auf der Seite WPForms All Forms in Ihrem WordPress-Dashboard zur Verfügung.

Jetzt haben Sie ein einfaches Anmeldeformular, das Sie schnell auf Ihrer Website veröffentlichen können oder das Sie als Grundlage für die Erstellung detaillierterer Anmeldeseiten verwenden können. Dies sind die grundlegenden Schritte, die für alle hier behandelten Beispiele für Anmeldeseiten erforderlich sind.

2. Anmeldeformular mit Anweisungstext

Werfen Sie einen Blick auf die Anmeldeseite für WordPress.org. Wie das erste Beispiel, das wir behandelt haben, ist auch diese Seite recht einfach.

Es enthält jedoch einen kurzen Hinweistext am oberen Rand, den auch Ihr Formular enthalten kann.

Wie bereits erwähnt, wird für jedes Formular, das Sie hier erstellen, zunächst die Vorlage für das Benutzeranmeldeformular benötigt, so auch für dieses Formular. Fahren Sie fort und wählen Sie die Vorlage erneut aus.

Ziehen Sie dann im Formularersteller das Feld Inhalt an den oberen Rand des Formulars und legen Sie es dort ab.

Wie bereits erwähnt, können Sie dieses Feld per Drag-and-Drop in Ihr Formular ziehen, wo immer Sie wollen.

Aber um dem Anleitungstext auf der Anmeldeseite oben zu ähneln, setzen wir das Feld an den Anfang.

Klicken Sie auf das Feld, um die anpassbaren Optionen auf der linken Seite des Bildschirms zu öffnen. Verwenden Sie dann den Texteditor, um den Anleitungstext einzugeben, den Sie in diesem Feld anzeigen lassen möchten.

Wie im obigen Beispiel könnten Sie die Nutzer auffordern, ihre Daten einzugeben, um sich bei Ihrer Website anzumelden.

Dank des Texteditors stehen Ihnen zahlreiche Optionen zur Verfügung: Schriftarten, Farben und vieles mehr können Sie in diesem Feld anpassen.

Sehen Sie sich zum Beispiel die HubSpot-Anmeldeseite aus Beispiel 1 noch einmal an. Beachten Sie, dass es einen sehr kurzen Abschnitt mit Anweisungstext gibt. Der Anleitungstext lautet: "Sie haben noch kein Konto? Melden Sie sich an" und enthält einen Link zu einer Seite, auf der Benutzer ein Konto erstellen können.

Dies ist auch mit dem Texteditor des Feldes "Inhalt" in Ihrem Formular möglich.

Geben Sie zunächst Ihren Anweisungstext ein und markieren Sie den Teil, der verlinkt werden soll. Klicken Sie dann auf das Link-Symbol in der Symbolleiste des Texteditors.

Nun fügen Sie die URL der Seite ein, auf der die Benutzer landen sollen. Klicken Sie auf OK, wenn Sie fertig sind.

Und das war's! Sie haben jetzt einen Anleitungstext und einen Link in Ihrem Formular.

Speichern Sie Ihr Formular wie immer für später oder betten Sie es in eine Seite ein. Am Ende dieses Beitrags erfahren Sie, wie Sie die Anmeldeseite veröffentlichen können, wenn Sie bereit sind, sie auf Ihrer Website zu veröffentlichen.

3. Anmeldeformular mit Kopfzeilenbild

Eine weitere Möglichkeit, das Benutzeranmeldeformular für Ihre Anmeldeseite anzupassen, ist das Hinzufügen eines Kopfbildes Ihrer Wahl. Die Verwendung eines Bildes am oberen Rand Ihres Formulars ist eine gute Möglichkeit, Ihr Formular zu personalisieren oder das Design Ihrer Website zu ergänzen.

Um ein Kopfbild hinzuzufügen, verwenden Sie wieder das Feld Inhalt und die Vorlage für das Benutzeranmeldeformular. Ziehen Sie dieses Feld per Drag-and-Drop an den Anfang des Formulars wie zuvor.

Klicken Sie diesmal jedoch auf die Schaltfläche Medien hinzufügen über dem Texteditor.

Nun laden Sie ein Bild Ihrer Wahl hoch, das über dem Text im Texteditor erscheint.

Wenn Sie möchten, können Sie diesmal auch den Text löschen und nur mit dem Bild arbeiten.

Klicken Sie auf das Bild, um die Anzeigeeinstellungen aufzurufen und das Bild nach Ihren Wünschen zu positionieren.

Damit das Bild in unserem Beispiel als echte Kopfzeile fungiert, werden wir die Ausrichtung zentrieren und die Version in voller Größe auswählen. Sie können diese Einstellungen ein paar Mal anpassen, um herauszufinden, was Sie bevorzugen.

Klicken Sie auf die blaue Schaltfläche Aktualisieren, um alle Änderungen zu übernehmen.

Sie können auch die anderen Einstellungsregisterkarten erkunden, um weitere Optionen zu erhalten, wie z. B. das Ändern der Feldgröße auf der Registerkarte Erweitert.

Probieren Sie die Feldgröße Groß aus, um Ihr Bild noch größer im oberen Bereich Ihres Formulars anzuzeigen, wie es sich für ein Kopfzeilenbild gehört.

Auch hier gilt: Speichern Sie Ihr Formular für später. Weitere Tipps zu diesem Beispiel finden Sie in diesem vollständigen Beitrag über das Hinzufügen eines Kopfzeilenbildes zu Ihren Formularen.

4. Anmeldeformular mit Firmenlogo

Werfen wir einen Blick auf die Anmeldeseite von SendLayer. Am oberen Rand des Formulars, über dem Anleitungstext, den wir zuvor behandelt haben, befindet sich ein Logo für die Website.

Sie können Ihrem Formular auch ein Logo hinzufügen, indem Sie wieder das Feld Inhalt auf Ihrem Benutzeranmeldeformular verwenden.

Erinnern Sie sich daran, wie Sie das Feld Inhalt zum Hochladen eines Kopfzeilenbildes verwendet haben? Warum nicht ein ähnliches Verfahren verwenden, um ein Logo anzuzeigen? Dank des Formularerstellers haben Sie mehrere Möglichkeiten, Logos in Ihrem Formular zu platzieren.

Ziehen Sie das Feld Inhalt einfach an die gewünschte Stelle in Ihrem Formular.

Um dem obigen Beispiel zu entsprechen, platzieren wir das Logo am oberen Rand des Formulars. Und da dies ein bisschen wie ein Header-Bild ist, könnte ein horizontal gestyltes Logo hier am besten aussehen.

Denken Sie daran, einfach auf die Schaltfläche Medien hinzufügen des Inhaltsfeldes zu klicken, um Ihr Logo hochzuladen.

Und vergessen Sie nicht die zusätzlichen Einstellungen. Vielleicht möchten Sie das Logo zentrieren, es in voller Größe darstellen oder die Feldgröße in den erweiterten Einstellungen ändern.

Sie können auch den Text unter dem Logo bearbeiten, wie wir es im Beispiel für den Anleitungstext beschrieben haben, so dass Ihr Formular dem Beispiel sehr ähnlich ist.

Auf Ihrer Anmeldeseite wird Ihr Logo nun deutlich auf Ihrem Formular angezeigt. Fügen Sie unten ein weiteres Logo hinzu, oder wo auch immer Sie das Inhaltsfeld hinziehen möchten!

5. Anmeldeformular mit Illustration

Schauen wir uns nun die Anmeldeseite für TrustPulse an. Bei diesem Anmeldeformular werden die Anmeldedaten auf der einen Seite des Bildschirms eingegeben, darüber befindet sich ein kleines Logo, und auf der anderen Seite wird eine große Abbildung angezeigt.

Auch Sie können ein Formular erstellen, das wie dieses aussieht, indem Sie das Feld Layout und das Feld Inhalt zusammen verwenden.

Ziehen Sie zunächst das Feld Layout auf Ihr Benutzeranmeldeformular.

Es spielt keine Rolle, wohin Sie das Layout-Feld jetzt ziehen, da Sie später die vorgeladenen Felder des Formulars in das Layout-Feld selbst ziehen werden.

Ziehen Sie es einfach an den oberen Rand des Formulars, um die Übersichtlichkeit zu wahren. Sie werden auch die Ausrichtung der Spalten innerhalb des Layouts auswählen, die die Größe und die Platzierung des Inhalts in diesem Feld bestimmen wird.

Ziehen Sie nun das Feld " Inhalt" in die erste Spalte des Feldes "Layout" in Ihrem Formular, damit Sie hier ein Logo wie im TrustPulse-Beispiel anzeigen können.

Verwenden Sie die Schaltfläche Medien hinzufügen, um Ihr Logo erneut hochzuladen, und vergewissern Sie sich dann, dass die Einstellungen des Bildes die gewünschte Ausrichtung und Größe aufweisen.

Ziehen Sie dann die anderen Felder des Formulars per Drag & Drop auf die Seite des Feldes Layout.

Greifen Sie einfach jedes Feld mit der Maus, ziehen Sie es in die Layoutspalte und legen Sie es ab. Das E-Mail-Feld, das Passwortfeld und das Kontrollkästchen befinden sich nun in der linken Spalte Ihres Formulars.

Nun fügen Sie der anderen Spalte im Feld Layout Inhalte hinzu.

Wählen Sie das Feld Inhalt erneut aus und ziehen Sie es in die größere Spalte auf der rechten Seite Ihres Formulars.

Jetzt können Sie eine Illustration Ihrer Wahl hinzufügen, die groß auf dieser Seite Ihres Formulars angezeigt wird.

Klicken Sie wie auf der anderen Seite auf die Schaltfläche Medien hinzufügen, um eine Illustration hochzuladen.

Und auch hier gilt: Passen Sie die Feldeinstellungen an, um die Größe und Platzierung Ihrer Illustration anzupassen.

Bei einer großen Abbildung wie in diesem Beispiel sollten Sie den zusätzlichen Text aus dem Feld Inhalt entfernen.

Und jetzt hat Ihr Formular auf der einen Seite das kleine Logo und die Angaben zum Nachweis und auf der anderen Seite eine große Abbildung.

Wie immer müssen Sie dieses Formular speichern, um es in WPForms auf Ihrem Dashboard aufzubewahren, und es dann auf einer WordPress-Seite einbetten, wenn Sie bereit sind, es zu verwenden.

6. Anmeldeformular mit CTA

Als Nächstes sehen wir uns die Anmeldeseite von ExactMetrics an, die der vorherigen Anmeldeseite sehr ähnlich ist, allerdings mit einer Call-to-Action-Schaltfläche auf einer Seite des Formulars anstelle einer Illustration.

Auf der einen Seite befinden sich ein kleines Logo, eine E-Mail-Eingabe, eine Passworteingabe und eine Anmeldeschaltfläche, auf der anderen Seite ein umfangreicher Text, gefolgt von einem klickbaren CTA.

Um ein ähnliches Aussehen mit Ihrem eigenen Formular zu erreichen, müssen Sie nur die Schritte befolgen, die wir im vorherigen Beispiel beschrieben haben: Fügen Sie zunächst das Feld Layout zu Ihrem Benutzeranmeldeformular hinzu und ziehen Sie Felder auf eine Seite oder Spalte des Layouts.

Denken Sie daran, dass Sie einfach das Feld "Inhalt" in das Layout ziehen, um Ihr Logo hochzuladen, und dann die übrigen Felder des Formulars ebenfalls in diese Seite des Layouts ziehen.

Auf der anderen Seite des Layoutfeldes, in der zweiten Spalte, brauchen Sie nichts hochzuladen. Sie werden einfach den Text bearbeiten, der bereits hier steht.

Beachten Sie, dass ein Teil des vorgeladenen Textes größer und fetter ist als der darunter liegende Text, ähnlich wie der Textstil im Beispiel.

Das macht es einfach, Ihren Text wie im Beispiel zu gestalten, aber vergessen Sie nicht die vielen anderen Möglichkeiten, den Texteditor zu Ihrem Vorteil zu nutzen. Sie können die Größe des Textes, die Ausrichtung, die Farbgebung und vieles mehr nach Belieben ändern.

Und im Texteditor des Inhaltsfeldes können Sie sogar ein Codeschnipsel einfügen, um eine CTA-Schaltfläche zu erstellen.

Klicken Sie auf die Registerkarte Text des Texteditors, um den Code zu kopieren und einzufügen, den Sie für die Erstellung einer Schaltfläche verwenden möchten.

Sie können Ihr Code-Snippet bearbeiten, um das Erscheinungsbild Ihrer CTA-Schaltfläche nach Ihren Wünschen zu gestalten.

Sie haben jetzt eine CTA-Schaltfläche in Ihrem Formular!

Auch hier müssen Sie das Formular speichern und es dann auf einer WordPress-Seite einbetten, wenn Sie es verwenden möchten.

7. Anmeldeformular mit einem reCAPTCHA

Nachdem wir uns nun durch die komplexeren Möglichkeiten zur Gestaltung eines Anmeldeformulars durchgearbeitet haben, wollen wir uns nun eines der einfachsten Sicherheitselemente ansehen, das Sie Ihrem Formular hinzufügen können, wo immer Sie es wollen.

Die reCAPTCHA-Verifizierung schützt Ihre WordPress-Website vor Bots und Spam, die versuchen würden, über Ihre Formulare auf Ihre Website zu gelangen.

Wie Sie sehen können, verwenden wir es auf unserer eigenen Login-Seite hier bei WPForms.

Sie können auch ganz einfach ein reCAPTCHA-Feld zu jedem Ihrer Anmeldeformulare hinzufügen. Aber zuerst müssen Sie es in Ihren WPForms-Einstellungen konfigurieren.

Navigieren Sie in Ihrem WordPress-Dashboard zu WPForms und dann zu Einstellungen. Vergewissern Sie sich dann, dass Sie auf dem CAPTCHA-Bildschirm sind.

Wählen Sie in der Mitte des Bildschirms die Option reCAPTCHA.

Sie wählen dann die Art der reCAPTCHA-Verifizierung, die Sie verwenden möchten.

Wählen wir die Checkbox reCAPTCHA v2.

Als nächstes müssen Sie auf dieser Einstellungsseite einen Site Key und einen Secret Key eingeben, die von Google bereitgestellt werden. Um diese Schlüssel zu erhalten, müssen Sie dem Einrichtungsprozess in der reCAPTCHA-Verwaltungskonsole von Google folgen.

Weitere Informationen und eine ausführliche Anleitung dazu finden Sie in unserem Artikel über die Einrichtung und Verwendung von reCAPTCHA mit Ihren WordPress-Formularen.

Vergessen Sie nicht, am Ende dieses Bildschirms auf Speichern zu klicken, um diese Einstellungen für Ihr reCAPTCHA-Feld zu übernehmen.

Jetzt können Sie die reCAPTCHA-Überprüfung zu Ihrem Formular hinzufügen.

Zurück auf der Formularerstellungsseite müssen Sie nur auf das reCAPTCHA-Feld klicken, um es für Ihr Benutzeranmeldeformular zu aktivieren.

Und das war's! Ihr Anmeldeformular ist jetzt vor Bots und Spam geschützt, die sonst Ihre Website infiltrieren könnten.

Außerdem wird das reCAPTCHA-Symbol in Ihrem Formular angezeigt, was Ihren Nutzern signalisiert, dass ihre Daten sicher sind.

Hinzufügen einer benutzerdefinierten Login-Seite zu WordPress

Die hilfreiche Sache über die Form Builder von WPForms ist, dass alle anpassbaren Optionen und Styling-Entscheidungen durch diese Beispiele inspiriert können auf dem Formular selbst erstellt werden.

Einige der in diesen Beispielen erzielten Stile können jedoch das Ergebnis einer zusätzlichen Bearbeitung der Anmeldeseite sein.

Also, für zusätzliche eingehende Tipps, wie man noch mehr Styling mit WPForms auf Ihrer WordPress-Seite zu erreichen, lesen Sie diesen vollständigen Artikel über die Gestaltung von Formularen mit CSS.

Denken Sie auch daran, dass Sie bei allen von Ihnen erstellten Formularen und den hier behandelten Beispielen das Formular speichern müssen, wenn Sie es fertig bearbeitet haben. Dann können Sie das Formular bei Bedarf später in eine Seite einbetten und veröffentlichen, wenn Sie bereit sind.

Sie können Ihr Formular auch über den Formularersteller auf einer Seite einbetten.

Wenn Sie auf Einbetten klicken, können Sie Ihr Anmeldeformular entweder in eine Seite einbetten, die Sie bereits für Ihre Website erstellt haben, oder Sie können jetzt eine neue Seite für dieses Anmeldeformular erstellen.

Wenn Sie sich entscheiden, eine neue Seite zu erstellen, müssen Sie der Seite einen Namen geben, so wie die anderen Seiten Ihrer Website benannt sind, damit Sie sie im WordPress-Dashboard leicht finden können.

Klicken Sie auf Let's Go! um fortzufahren. WPForms wird automatisch Ihr Anmeldeformular zu Ihrer neuen Seite hinzufügen.

Nachdem Ihr Formular eingebettet ist, können Sie immer noch ein paar Dinge auf der WordPress-Seite selbst bearbeiten, indem Sie auf die Einstellungen des WPForms-Blocks zugreifen und andere Styling-Elemente der Seite bearbeiten.

In diesem Artikel finden Sie weitere Ideen, wie Sie Ihre WordPress-Anmeldeseite bearbeiten und anpassen können.

Und denken Sie daran, dass Sie die Seite mit dem eingebetteten Formular, wie alle Ihre WordPress-Seiten, veröffentlichen müssen, um sie auf Ihrer Website live zu schalten.

Sie können auch eine Vorschau der Seite vor der Veröffentlichung anzeigen oder den Entwurf für später speichern.

Weitere Informationen zu diesem Thema finden Sie in diesem Tutorial, in dem Sie erfahren , wie Sie Anmelde- und Registrierungsformulare anzeigen können.

Erstellen Sie jetzt Ihre Login-Seite

Erstellen Sie als nächstes ein Registrierungsformular mit PayPal

Nachdem Sie nun alles über die Erstellung von Anmeldeformularen für Ihre WordPress-Website gelernt haben, sollten Sie sich an der Erstellung eines WordPress-Registrierungsformulars mit PayPal versuchen. Auf diese Weise können Sie Ihre Website-Benutzer registrieren und mit dem Einzug von Zahlungen beginnen.

Wenn Sie Ihre Formulareinträge ausdrucken möchten, empfehlen wir Ihnen unsere Anleitung zum Drucken von WordPress-Formularen im PDF-Format.

Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.