Möchten Sie die Anmeldeseite auf Ihrer WordPress-Website anpassen? Mit WPForms haben Sie viele Möglichkeiten, Ihre Anmeldeformulare zu gestalten, ganz ohne Code!

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, jedes Formular im gleichen Stil wie die hier vorgestellten Beispiele zu erstellen, mit nur wenigen Mausklicks.

Legen wir los!

Erstellen Sie jetzt Ihre Anmeldeseite

Was schreibt man auf eine Anmeldeseite?

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

Die Anmeldeseite Ihrer Website ist ein Ort, an dem Website-Benutzer ihre Anmeldeinformationen eingeben, um Zugang zu Ihrer Website zu erhalten. Diese Besucher haben möglicherweise ein Konto auf Ihrer Website oder einen anderen Grund, sich auf Ihrer Website anzumelden.

Sie möchten wahrscheinlich auch eine Art Text auf Ihrer Anmeldeseite einfügen, um Ihre Website-Benutzer darüber zu informieren oder anzuleiten, wie sie auf die Website gelangen. Sie können auch Bilder wie Logos und Illustrationen zu Ihrer Anmeldung hinzufügen und 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 und enthält nicht viele Details im Formular. Das Formular besteht lediglich aus einem E-Mail-Feld, einem Passwortfeld, einer Checkbox und einem Anmeldebutton.

Das Besondere an einem solchen Formular ist, dass es wie das Fundament aller anderen Anmeldeformular-Beispiele 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 so vereinfacht werden. WPForms ist das beste Formular-Builder-Plugin für WordPress und macht es Ihnen super einfach, eine benutzerdefinierte Anmeldeseite zu Ihrer Website hinzuzufügen.

Zuerst müssen Sie WPForms installieren und sich für den Pro Plan anmelden, um auf das User Registration Addon zugreifen zu können.

Nachdem Sie Ihren Lizenzschlüssel in Ihren WPForms-Einstellungen eingegeben haben, gehen Sie in Ihrem Dashboard zu WPForms » Addons. Scrollen Sie durch die verfügbaren Addons, um das User Registration Addon zu finden, das Sie ebenfalls installieren werden. Stellen Sie sicher, dass Sie das Addon auch aktivieren, nachdem Sie es installiert haben.

Jetzt sind Sie bereit, Ihr Anmeldeformular zu erstellen. Gehen Sie zu WPForms » Neu erstellen und suchen Sie die Vorlage User Login Form unter Ihren verfügbaren Addon-Vorlagen. Klicken Sie auf die Schaltfläche Vorlage verwenden, um diese Vorlage auszuwählen und den Formular-Builder zu öffnen.

Der WPForms-Formular-Builder macht es Ihnen leicht, diese vorgefertigte Vorlage nach Ihren Bedürfnissen zu bearbeiten. Sie finden eine umfangreiche Auswahl an Formularfeldern, die praktisch jedes Element abdecken, das Sie sich für Ihr Online-Formular wünschen. Alles, was Sie tun müssen, ist, jedes Feld einfach per Drag & Drop an die richtige Stelle zu ziehen.

Sie werden sehen, dass das User Login Formular bereits die notwendigen Felder geladen hat.

Aber wie alle WPForms-Vorlagen ist auch dieses Formular hochgradig anpassbar, sodass Sie Felder auf verschiedene Weise zu Ihrem Formular hinzufügen und bearbeiten können.

Für dieses Formular bearbeiten wir die Schaltfläche „Senden“ am Ende des Formulars, damit sie wie im Beispiel der HubSpot-Anmeldeseite „Anmelden“ lautet.

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

Öffnen Sie dann, um den Text der Schaltfläche zu ändern, den Allgemein-Tab und scrollen Sie zum Feld Text der Schaltfläche „Senden“.

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

Wenn wir uns das Formular noch einmal ansehen, passt die Schaltfläche am Ende des Formulars besser zur Anmeldefunktionalität dieser Seite.

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

Klicken Sie von hier aus auf Speichern, um dieses Formular zu speichern.

Sobald es gespeichert ist, ist dieses Formular auf der Seite Alle Formulare in Ihrem WordPress-Dashboard verfügbar.

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 von Anmeldeseiten erforderlich sind.

2. Anmeldeformular mit Anleitungen

Werfen Sie einen Blick auf die Anmeldeseite von WordPress.org. Wie das erste Beispiel, das wir behandelt haben, ist auch diese ziemlich einfach.

Aber sie enthält einen kurzen instructional Text oben, und Ihr Formular kann das auch haben.

Wie bereits erwähnt, erfordert jedes hier erstellte Formular zuerst die Vorlage „Benutzeranmeldeformular“, auch dieses. Wählen Sie die Vorlage erneut aus.

Ziehen Sie dann im Formular-Builder das Feld Inhalt an den Anfang des Formulars und lassen Sie es dort fallen.

Wie bereits erwähnt, können Sie dieses Feld per Drag & Drop überall in Ihrem Formular platzieren.

Aber um dem instructional Text auf der obigen Anmeldeseite zu ähneln, platzieren wir das Feld oben.

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

Wie im obigen Beispiel könnten Sie Benutzer anweisen, ihre Informationen einzugeben, um sich bei Ihrer Website anzumelden.

Dank des Texteditors stehen Ihnen viele Optionen zur Verfügung, mit anpassbaren Schriftarten, Farben und vielem mehr, die alle in diesem Feld verfügbar sind.

Schauen Sie sich zum Beispiel noch einmal die HubSpot-Anmeldeseite aus Beispiel 1 an. Beachten Sie, dass es einen sehr kurzen instructional Text gibt. Der instructional Text lautet: „Haben Sie noch kein Konto? Registrieren Sie sich“ und enthält einen Link zu einer Seite, auf der Benutzer ein Konto erstellen können.

Dies ist auch mit dem Texteditor des Inhaltsfeldes in Ihrem Formular möglich.

Geben Sie zuerst Ihren instructional Text ein und markieren Sie den Teil, den Sie verlinken möchten. Klicken Sie dann auf das Link-Symbol in der Symbolleiste des Texteditors.

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

Und das ist alles! Sie haben jetzt instructional Text und einen Link in Ihrem Formular.

Speichern Sie Ihr Formular wie immer für später oder binden Sie es auf einer Seite ein. Wir werden Details zur Veröffentlichung mitteilen, wenn Sie bereit sind, damit die Anmeldeseite am Ende dieses Beitrags auf Ihrer Website live geschaltet werden kann.

3. Anmeldeformular mit Kopfzeilenbild

Eine weitere Möglichkeit, das Benutzeranmeldeformular für Ihre Anmeldeseite anzupassen, ist das Hinzufügen eines Kopfzeilenbilds 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 Kopfzeilenbild hinzuzufügen, verwenden Sie erneut das Feld Inhalt und die Vorlage für das Benutzeranmeldeformular. Ziehen Sie dieses Feld wie zuvor an den Anfang Ihres Formulars per Drag & Drop.

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

Laden Sie nun ein Bild Ihrer Wahl hoch, das über dem Text im Texteditor angezeigt wird.

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

Klicken Sie auf das Bild, um auf seine Anzeigeeinstellungen zuzugreifen und das Bild nach Belieben zu positionieren.

Damit das Bild in unserem Beispiel als echte Kopfzeile fungiert, zentrieren wir die Ausrichtung und wählen die Vollbildversion aus. Sie können diese Einstellungen mehrmals anpassen, um herauszufinden, was Ihnen am besten gefällt.

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

Sie können auch die anderen Einstellungsregisterkarten für weitere Optionen erkunden, z. B. das Ändern der Feldgröße auf der Registerkarte Erweitert.

Probieren Sie die Feldgröße Groß aus, um Ihr Bild noch größer am oberen Rand Ihres Formulars anzuzeigen, ganz im Stil einer Kopfzeile.

Speichern Sie Ihr Formular wie immer für später. Und für weitere Tipps zu diesem Beispiel lesen Sie diesen vollständigen Beitrag über das Hinzufügen einer Kopfzeile zu Ihren Formularen.

4. Anmeldeformular mit Firmenlogo

Werfen wir einen Blick auf die SendLayer-Anmeldeseite. Oben auf dem Formular, über dem von uns zuvor behandelten Anweisungstext, befindet sich ein Logo für die Website.

Sie können Ihrem Formular auch ein Logo hinzufügen, indem Sie erneut das Inhaltsfeld auf Ihrem Benutzeranmeldeformular verwenden.

Erinnern Sie sich, wie Sie das Inhaltsfeld zum Hochladen eines Kopfzeilenbilds verwendet haben? Warum nicht einen ähnlichen Prozess verwenden, um ein Logo anzuzeigen? Dank des Formular-Generators haben Sie mehrere Möglichkeiten, Logos auf Ihrem Formular zu platzieren.

Ziehen Sie einfach das Feld Inhalt per Drag & Drop dorthin, wo Sie es auf Ihrem Formular haben möchten.

Um dem obigen Beispiel zu ähneln, platzieren wir das Logo oben auf dem Formular. Und da dies ein wenig wie eine Kopfzeile ist, sieht ein horizontal gestyltes Logo hier vielleicht am besten aus.

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

Und vergessen Sie nicht die zusätzlichen Einstellungen. Möglicherweise möchten Sie das Logo zentrieren, es in voller Größe anzeigen 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 Anweisungstext behandelt haben, wodurch Ihr Formular hier dem Beispiel sehr ähnlich wird.

Ihre Anmeldeseite zeigt nun deutlich Ihr Logo auf Ihrem Formular an. Fügen Sie gerne ein weiteres Logo unten hinzu oder wo auch immer Sie das Inhaltsfeld per Drag & Drop ziehen möchten!

5. Anmeldeformular mit Illustration

Nun wollen wir uns die Anmeldeseite von TrustPulse ansehen. Dieses Anmeldeformular hat Anmeldedaten auf einer Seite des Bildschirms mit einem kleinen Logo darüber und einer großen Abbildung auf der anderen Seite.

Sie können auch ein Formular erstellen, das so aussieht, indem Sie das Layout-Feld und das Inhaltsfeld zusammen verwenden.

Ziehen Sie zuerst das Layout-Feld in Ihr Benutzeranmeldeformular.

Es spielt im Moment keine große Rolle, wohin Sie das Layout-Feld ziehen, da Sie die vorab geladenen Felder des Formulars schließlich in das Layout-Feld selbst ziehen werden.

Ziehen wir es vorerst zur Organisation an den Anfang des Formulars. Sie wählen auch die Ausrichtung der Spalten innerhalb des Layouts, die die Größe und Platzierung des Inhalts in diesem Feld bestimmen.

Ziehen Sie nun das Inhalts-Feld in die erste Spalte des Layout-Feldes in Ihrem Formular, um hier wie im TrustPulse-Beispiel ein Logo anzuzeigen.

Verwenden Sie die Schaltfläche "Medium hinzufügen", um erneut Ihr Logo hochzuladen, und stellen Sie dann sicher, dass die Einstellungen des Bildes es so ausrichten und dimensionieren, wie Sie es wünschen.

Ziehen Sie als Nächstes die anderen Felder des Formulars in diese Seite des Layout-Feldes.

Greifen Sie einfach jedes Feld mit der Maus, ziehen Sie es in die Layout-Spalte und lassen Sie es los. Das E-Mail-Feld, das Passwortfeld und die Checkbox befinden sich nun in der linken Spalte Ihres Formulars.

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

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

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

Klicken Sie auf die Schaltfläche "Medium hinzufügen", wie Sie es auf der anderen Seite getan haben, um eine Abbildung hochzuladen.

Und stellen Sie wieder sicher, dass Sie die Feldeinstellungen anpassen, um die Größe und Platzierung Ihrer Abbildung anzupassen.

Für eine große Abbildung wie im Beispiel möchten Sie möglicherweise zusätzlichen Text aus dem Inhaltsfeld entfernen.

Und nun hat Ihr Formular das kleine Logo und die Anmeldedaten auf einer Seite und eine große Abbildung auf der anderen Seite.

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

6. Anmeldeformular mit CTA

Als Nächstes sehen wir uns die Anmeldeseite von ExactMetrics an, die der vorherigen Anmeldung etwas ähnlich ist, aber anstelle einer Abbildung einen Call-to-Action-Button auf einer Seite des Formulars hat.

Eine Seite hat ein kleines Logo, ein E-Mail-Eingabefeld, ein Passwort-Eingabefeld und eine Anmeldeschaltfläche, und die andere Seite hat ziemlich viel Text, gefolgt von einem klickbaren CTA.

Um ein ähnliches Aussehen mit Ihrem eigenen Formular zu erzielen, müssen Sie einfach die Schritte befolgen, die wir im vorherigen Beispiel behandelt haben: zuerst das Layout-Feld zu Ihrem Benutzeranmeldeformular hinzufügen und Felder auf eine Seite oder Spalte des Layouts ziehen.

Denken Sie daran, Sie ziehen einfach das Inhaltsfeld in das Layout, um Ihr Logo hochzuladen, und ziehen dann die restlichen Felder des Formulars ebenfalls in diese Seite des Layouts.

Aber dann, für die andere Seite des Layoutfelds, in der zweiten Spalte, laden Sie nichts hoch. Sie bearbeiten einfach den Text, der bereits vorhanden ist.

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

Dies erleichtert die Gestaltung Ihres Textes wie im Beispiel, aber vergessen Sie nicht alle anderen Möglichkeiten, den Texteditor zu Ihrem Vorteil zu nutzen. Sie können die Größe, Ausrichtung, Farbe und mehr des Textes nach Belieben ändern.

Und innerhalb des Texteditors des Inhaltsfelds können Sie sogar einen Codeausschnitt einfügen, um eine CTA-Schaltfläche zu erstellen.

Klicken Sie auf die Registerkarte Text des Texteditorfelds, um den Code, den Sie zum Erstellen einer Schaltfläche verwenden möchten, zu kopieren und einzufügen.

Sie können Ihren Codeausschnitt bearbeiten, um das Erscheinungsbild Ihrer CTA-Schaltfläche nach Belieben zu gestalten.

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

Speichern Sie dieses Formular erneut und betten Sie es dann auf einer WordPress-Seite ein, wenn Sie es verwenden möchten.

7. Anmeldeformular mit reCAPTCHA

Nachdem wir uns nun mit den komplexeren Möglichkeiten zur Gestaltung eines Anmeldeformulars beschäftigt haben, werfen wir einen Blick auf eines der einfachsten Sicherheitselemente, das Sie überall zu Ihrem Formular hinzufügen können.

Die reCAPTCHA-Überprüfung schützt Ihre WordPress-Website vor Bots und Spam, die versuchen könnten, Ihre Formulare zu nutzen, um auf Ihre Website zuzugreifen.

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

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. Stellen Sie dann sicher, dass Sie sich auf dem Bildschirm CAPTCHA befinden.

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

Anschließend wählen Sie die Art der reCAPTCHA-Überprüfung aus, die Sie verwenden möchten.

Wählen wir das Checkbox reCAPTCHA v2.

Als Nächstes müssen Sie auf dieser Einstellungsseite einen Website-Schlüssel und einen geheimen Schlüssel eingeben, die von Google bereitgestellt werden. Um diese Schlüssel zu erhalten, müssen Sie den Einrichtungsprozess in Googles reCAPTCHA Admin-Konsole befolgen.

Weitere Informationen sowie eine detaillierte Anleitung zur Vorgehensweise finden Sie in unserem Artikel über  die Einrichtung und Verwendung von reCAPTCHA mit Ihren WordPress-Formularen.

Vergessen Sie nicht, unten auf diesem Bildschirm auf Speichern zu klicken, um diese Einstellungen auf Ihr reCAPTCHA-Feld anzuwenden.

Jetzt sind Sie bereit, die reCAPTCHA-Überprüfung zu Ihrem Formular hinzuzufügen.

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

Und das ist alles! Ihr Anmeldeformular ist jetzt vor Bots und Spam geschützt, die sonst in Ihre Website eindringen könnten.

Außerdem wird das reCAPTCHA-Symbol auf Ihrem Formular angezeigt, was Ihren Benutzern mitteilt, dass ihre Informationen sicher sind.

So fügen Sie eine benutzerdefinierte Anmeldeseite zu WordPress hinzu

Das Hilfreiche am Formular-Builder von WPForms ist, dass alle anpassbaren Optionen und Styling-Möglichkeiten, die von diesen Beispielen inspiriert sind, direkt am Formular selbst erstellt werden können.

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

Für zusätzliche, tiefgehende Tipps, wie Sie mit WPForms noch mehr Styling auf Ihrer WordPress-Seite erzielen können, lesen Sie diesen vollständigen Artikel darüber, wie Sie Formulare mit CSS gestalten.

Beachten Sie auch, dass Sie bei allen erstellten Formularen und den hier behandelten Beispielen das Formular speichern müssen, wenn Sie mit der Bearbeitung fertig sind. Dann können Sie das Formular vielleicht später, falls nötig, auf einer Seite einbetten und veröffentlichen, wenn Sie bereit sind.

Oder Sie können direkt aus dem Formular-Builder heraus Ihr Formular auf einer Seite einbetten.

Durch Klicken auf Einbetten können Sie entweder Ihr Anmeldeformular auf einer bereits erstellten Seite für Ihre Website einbetten 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, genau wie die anderen Seiten auf Ihrer Website benannt sind, damit Sie sie im WordPress-Dashboard leicht finden können.

Klicken Sie auf Los geht's!, um fortzufahren. WPForms fügt Ihr Anmeldeformular automatisch zu Ihrer neuen Seite hinzu.

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

Lesen Sie diesen Artikel für weitere Ideen, wie Sie Ihre WordPress-Anmeldeseite bearbeiten und anpassen.

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

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

Für noch mehr Leseempfehlungen zu diesem Thema lesen Sie dieses Tutorial, das behandelt, wie man Anmelde- und Registrierungsformulare anzeigt.

Erstellen Sie jetzt Ihre Anmeldeseite

Als Nächstes: Erstellen Sie ein Registrierungsformular mit PayPal

Nachdem Sie nun alles über die Erstellung von Anmeldeformularen für Ihre WordPress-Website gelernt haben, warum versuchen Sie nicht, ein WordPress-Registrierungsformular mit PayPal zu erstellen? So können Sie Ihre Website-Benutzer registrieren und mit dem Sammeln von Zahlungen beginnen.

Wenn Sie einen Ausdruck Ihrer Formulareinträge wünschen, empfehlen wir Ihnen, sich unseren Leitfaden zum Drucken von WordPress-Formularen als PDF anzusehen.

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

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