Möchten Sie die Anmeldeseite auf Ihrer WordPress-Website anpassen? 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 sie neu erstellen können. Wir führen Sie mit nur wenigen Mausklicks durch den Prozess des Erstellens jedes Formulars im gleichen Stil wie die hier vorgestellten Beispiele.

Tauchen wir ein!

Erstellen Sie jetzt Ihre Anmeldeseite

Was schreiben Sie 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 Zugriff auf Ihre Website zu erhalten. Diese Besucher haben möglicherweise ein Konto auf Ihrer Website oder müssen sich aus einem anderen Grund bei Ihrer Website anmelden.

Sie möchten wahrscheinlich auch eine Art Text auf Ihrer Anmeldeseite einfügen, um Ihre Website-Benutzer zu informieren oder anzuleiten, wie sie auf die Website gelangen. Sie können Ihrem Login auch Bilder wie Logos und Illustrationen hinzufügen, und Sie können sich für zusätzliche Sicherheitsfunktionen entscheiden, um zu verhindern, dass unerwünschter Spam Ihre Login-Seite verstopft.

7 Beispiele für Anmeldeseiten

1. Einfaches Anmeldeformular

Diese Anmeldeseite auf der HubSpot-Website ist ziemlich einfach und enthält nicht viele Details im Formular. Das Formular besteht einfach aus einem E-Mail-Eintrag, einem Passwort, einem Kontrollkästchen und einer Anmeldeschaltfläche.

Die Sache mit einem Formular wie diesem ist, dass es ein bisschen wie die Grundlage aller anderen Beispiele für Anmeldeformulare ist. Es enthält die grundlegendsten Elemente, die für eine Anmeldeseite benötigt werden.

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

Zuerst müssen Sie WPForms installieren und sich für den Pro-Plan anmelden, um auf das Add-on zur Benutzerregistrierung zugreifen zu können.

Nachdem Sie Ihren Lizenzschlüssel in Ihren WPForms-Einstellungen eingegeben haben, gehen Sie zu WPForms » Addons in Ihrem Dashboard. Blättern Sie durch die verfügbaren Add-Ons, um das Add-On zur Benutzerregistrierung zu finden, das Sie ebenfalls installieren werden. Achten Sie darauf, das Addon nach der Installation auch zu aktivieren.

Jetzt können Sie Ihr Anmeldeformular erstellen. Gehen Sie zu WPForms » Neu hinzufügen und suchen Sie die Benutzeranmeldeformularvorlage 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 Form Builder macht es Ihnen leicht, diese vorgefertigte Vorlage an Ihre Bedürfnisse anzupassen. Sie finden eine umfangreiche Auswahl an Formularfeldern, die praktisch jedes gewünschte Element in Ihrem Online-Formular abdecken. Alles, was Sie tun müssen, ist einfach jedes Feld per Drag & Drop an die richtige Stelle zu ziehen.

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

Aber wie alle WPForms-Vorlagen ist dieses Formular hochgradig anpassbar, sodass Sie Felder in Ihrem Formular auf vielfältige Weise hinzufügen und bearbeiten können.

Lassen Sie uns für dieses Formular die Schaltfläche „Senden“ unten im Formular so bearbeiten, dass sie wie im Beispiel der HubSpot-Anmeldeseite „Anmelden“ lautet.

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

Um dann den Text der Schaltfläche zu ändern, öffnen Sie die Registerkarte „ Allgemein “ und scrollen Sie zum Textfeld „Schaltfläche senden“.

Geben Sie nun ein, was Sie für die Schaltfläche lesen möchten, z. B. „Anmelden“.

Wenn Sie sich das Formular noch einmal ansehen, passt die Schaltfläche am unteren Rand des Formulars besser zur Anmeldeart dieser Seite.

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

Fahren Sie von hier aus fort und speichern Sie dieses Formular.

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 oder als Grundlage für die Erstellung detaillierterer Anmeldeseiten verwenden können. Dies sind die grundlegenden Schritte, die für alle hier behandelten Anmeldeseitenbeispiele erforderlich sind.

2. Anmeldeformular mit Anleitungstext

Werfen Sie einen Blick auf die Anmeldeseite für WordPress.org. Wie das erste Beispiel, das wir behandelt haben, ist dieses ziemlich einfach.

Aber es hat oben einen Ausschnitt mit Anleitungstext, und Ihr Formular kann das auch haben.

Wie bereits erwähnt, erfordert jedes hier erstellte Formular zunächst die Vorlage für das Benutzeranmeldungsformular, einschließlich dieser. Fahren Sie fort und wählen Sie die Vorlage erneut aus.

Ziehen Sie dann im Formularersteller das Inhaltsfeld an den Anfang des Formulars und legen Sie es dort ab.

Wie wir bereits gesagt haben, können Sie dieses Feld per Drag-and-Drop auf Ihr Formular ziehen, wo immer Sie möchten.

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

Klicken Sie auf das Feld, um die anpassbaren Optionen zu öffnen, die Sie auf der linken Seite des Bildschirms finden. Verwenden Sie dann den Texteditor, um den Anweisungstext einzugeben, der in diesem Feld angezeigt werden soll.

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

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

Sehen Sie sich zum Beispiel noch einmal die HubSpot-Anmeldeseite aus Beispiel 1 an. Beachten Sie, dass es einen sehr kurzen Ausschnitt mit Anleitungstext gibt. Der Anleitungstext lautet: „Sie haben kein Konto? Registrieren“ und stellt einen Link zu einer Seite bereit, auf der Benutzer ein Konto erstellen können.

Dies ist auch mit dem Texteditor des Felds Inhalt Ihres Formulars möglich.

Geben Sie zuerst Ihren Anleitungstext ein und markieren Sie den Teil, den Sie verknüpfen möchten. Klicken Sie dann auf das Verknüpfungssymbol in der Symbolleiste des Texteditors.

Jetzt fügen Sie die URL zu der Seite ein, auf der Benutzer landen sollen. Klicken Sie abschließend auf OK .

Und das ist es! 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. Wir werden am Ende dieses Beitrags Details darüber mitteilen, wie Sie veröffentlichen können, wenn Sie bereit sind, die Anmeldeseite auf Ihrer Website live zu schalten.

3. Anmeldeformular mit Header-Bild

Eine andere Möglichkeit, das Benutzeranmeldeformular für Ihre Anmeldeseite anzupassen, besteht darin, ein Kopfzeilenbild Ihrer Wahl hinzuzufügen. Die Verwendung eines Bildes oben in Ihrem Formular ist eine gute Möglichkeit, Ihr Formular zu personalisieren oder das Design Ihrer Website zu ergänzen.

Um ein Kopfzeilenbild hinzuzufügen, verwenden Sie wieder das Inhaltsfeld und die Vorlage für das Benutzeranmeldeformular. Fahren Sie fort und ziehen Sie dieses Feld wie zuvor per Drag-and-Drop oben in Ihr Formular.

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

Jetzt laden Sie ein Bild Ihrer Wahl hoch, das im Texteditor über dem Text 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 die Anzeigeeinstellungen zuzugreifen und das Bild nach Belieben zu positionieren.

Damit das Bild in unserem Beispiel als echtes Header-Bild fungiert, zentrieren wir die Ausrichtung und wählen die Version in voller Größe aus. Sie können diese Einstellungen einige Male anpassen, um herauszufinden, was Sie bevorzugen.

Achten Sie darauf, auf die blaue Schaltfläche „ Aktualisieren “ zu klicken, um Änderungen zu übernehmen.

Sie können auch die anderen Einstellungsregisterkarten für weitere Optionen durchsuchen, 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, in echter Header-Bild-Manier.

Denken Sie auch hier daran, Ihr Formular für später zu speichern. Weitere Tipps zu diesem Beispiel finden Sie in diesem vollständigen Beitrag zum Hinzufügen eines Header-Bildes zu Ihren Formularen.

4. Anmeldeformular mit Firmenlogo

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

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

Erinnern Sie sich, wie Sie das Inhaltsfeld verwendet haben, um ein Kopfzeilenbild hochzuladen? Warum nicht einen ähnlichen Prozess verwenden, um ein Logo anzuzeigen? Dank des Form Builders haben Sie mehrere Möglichkeiten, Logos auf Ihrem Formular zu platzieren.

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

Um dem obigen Beispiel zu ähneln, platzieren wir das Logo oben im Formular. Und da dies ein bisschen wie ein Header-Bild ist, könnte ein horizontal gestaltetes Logo hier am besten aussehen.

Denken Sie daran, einfach auf die Schaltfläche „ Medien hinzufügen“ im Feld „Inhalt“ 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 Anleitungstextbeispiel behandelt haben, wodurch Ihr Formular hier dem Beispiel sehr ähnlich wäre.

Auf Ihrer Anmeldeseite wird Ihr Logo jetzt deutlich auf Ihrem Formular angezeigt. Fühlen Sie sich frei, ein weiteres Logo unten hinzuzufügen, oder wo auch immer Sie das Inhaltsfeld ziehen möchten!

5. Anmeldeformular mit Illustration

Nehmen wir nun die Anmeldeseite für TrustPulse zur Kenntnis. Dieses Anmeldeformular enthält auf einer Seite des Bildschirms eingegebene Anmeldeinformationen mit einem kleinen Logo darüber und einer großen Abbildung auf der anderen Seite.

Auch Sie können ein Formular erstellen, das so aussieht, indem Sie das Layoutfeld und das Inhaltsfeld zusammen verwenden.

Ziehen Sie zuerst das Layout -Feld auf Ihr Benutzer-Anmeldeformular.

Es spielt keine Rolle, wohin Sie das Layout-Feld jetzt ziehen und ablegen, da Sie die vorinstallierten Felder des Formulars schließlich in das Layout-Feld selbst ziehen werden.

Lassen Sie uns es vorerst einfach an den Anfang des Formulars ziehen, um organisiert zu bleiben. Sie wählen auch die Ausrichtung der Spalten innerhalb des Layouts aus, wodurch die Größe und Platzierung des Inhalts in diesem Feld bestimmt wird.

Ziehen Sie nun das Inhaltsfeld in die erste Spalte des Layoutfelds auf 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 stellen Sie dann sicher, dass die Einstellungen des Bildes es so ausgerichtet und skaliert haben, wie Sie es möchten.

Ziehen Sie als Nächstes die anderen Felder des Formulars per Drag & Drop auf diese Seite des Layout-Felds.

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

Nun fügen Sie der anderen Spalte im Feld „Layout“ Inhalt 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ßflächig 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.

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

Bei einer großen Illustration wie dem Beispiel möchten Sie eventuell zusätzlichen Text aus dem Feld „Inhalt“ entfernen.

Und jetzt hat Ihr Formular das kleine Logo und die Anmeldeinformationen auf der einen Seite und eine große Illustration auf der anderen Seite.

Wie immer müssen Sie dieses Formular speichern, um es in WPForms auf Ihrem Dashboard zu behalten, und es dann in eine 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 Anmeldung etwas ähnlich ist, aber mit einer Schaltfläche zum Handeln auf einer Seite des Formulars anstelle einer Illustration.

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

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

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

Aber für die andere Seite des Layout-Felds, in der zweiten Spalte, müssen Sie sich keine Gedanken darüber machen, etwas hochzuladen. Sie bearbeiten einfach den bereits vorhandenen Text.

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

Das macht es einfach, Ihren Text wie im Beispiel zu gestalten, aber vergessen Sie nicht all die 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 im Texteditor des Inhaltsfelds können Sie sogar ein Code-Snippet einfügen, um eine CTA-Schaltfläche zu erstellen.

Klicken Sie auf die Registerkarte Text des Texteditorfelds, um den Code zu kopieren und einzufügen, den Sie zum Erstellen 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 einen CTA-Button auf Ihrem Formular!

Auch hier müssen Sie dieses Formular speichern und es dann in eine WordPress-Seite einbetten, wenn Sie bereit sind, es zu verwenden.

7. Anmeldeformular mit einem reCAPTCHA

Nachdem wir uns nun durch die komplexeren Möglichkeiten zur Gestaltung eines Anmeldeformulars gearbeitet haben, schauen wir uns eines der einfachsten Sicherheitselemente an, die Sie Ihrem Formular hinzufügen können, wo immer Sie es möchten.

Die reCAPTCHA-Überprüfung hilft, Ihre WordPress-Website vor Bots und Spam zu schützen, die versuchen würden, Ihre Formulare zu verwenden, um auf Ihre Website zu gelangen.

Wie Sie sehen können, verwenden wir es auf unserer eigenen Anmeldeseite 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 Settings . Stellen Sie dann sicher, dass Sie sich auf dem CAPTCHA -Bildschirm befinden.

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

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

Lassen Sie uns das Kontrollkästchen reCAPTCHA v2 auswählen.

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

Weitere Informationen sowie ein ausführliches Tutorial dazu finden Sie in unserem Artikel zum Einrichten und Verwenden 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 können Sie Ihrem Formular die reCAPTCHA-Bestätigung hinzufügen.

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

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

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

So fügen Sie eine benutzerdefinierte Anmeldeseite zu WordPress hinzu

Das Hilfreiche am Form Builder von WPForms ist, dass alle anpassbaren Optionen und Gestaltungsmöglichkeiten, die von diesen Beispielen inspiriert sind, auf dem Formular selbst erstellt werden können.

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

Weitere ausführliche Tipps, wie Sie mit WPForms auf Ihrer WordPress-Seite noch mehr Styling erzielen können, finden Sie in diesem vollständigen Artikel zum Stylen von Formularen mit CSS.

Denken Sie auch daran, dass Sie bei all Ihren erstellten Formularen und den Beispielen, die wir hier behandelt haben, das Formular speichern müssen, wenn Sie mit der Bearbeitung fertig sind. Dann, vielleicht später bei Bedarf, können Sie das Formular in eine Seite einbetten und veröffentlichen, wenn Sie fertig sind.

Oder Sie können Ihr Formular jetzt über den Formularersteller in eine Seite einbetten.

Durch Klicken auf Einbetten können Sie Ihr Login-Formular entweder auf einer Seite einbetten, die Sie bereits für Ihre Website erstellt haben, oder Sie können jetzt eine neue Seite für dieses Login-Formular erstellen.

Wenn Sie sich entscheiden, eine neue Seite zu erstellen, müssen Sie die Seite so benennen, 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! weitermachen. WPForms fügt Ihr Anmeldeformular automatisch zu Ihrer neuen Seite hinzu.

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 Stilelemente der Seite bearbeiten.

In diesem Artikel finden Sie weitere Ideen zum Bearbeiten und Anpassen Ihrer WordPress-Anmeldeseite.

Und denken Sie daran, dass Sie, wie alle Ihre 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.

Weitere Informationen zu diesem Thema finden Sie in diesem Tutorial zum Anzeigen von Anmelde- und Registrierungsformularen.

Erstellen Sie jetzt Ihre Anmeldeseite

Erstellen Sie als Nächstes ein Registrierungsformular mit PayPal

Nachdem Sie nun alles über das Erstellen von Anmeldeformularen für Ihre WordPress-Website gelernt haben, warum versuchen Sie nicht, ein WordPress-Registrierungsformular mit PayPal zu erstellen? Auf diese Weise können Sie Ihre Website-Benutzer registrieren und mit dem Einziehen von Zahlungen beginnen.

Sind Sie bereit, Ihr Formular zu erstellen? Beginnen 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 Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.