So erstellen Sie benutzerdefinierte WordPress-Benutzeranmeldung, -Registrierung und -Profil

Wenn Sie über eine WordPress-Site verfügen, denken Sie möglicherweise darüber nach, benutzerdefinierte Anmelde- und Registrierungsseiten für Benutzer zu erstellen, um weitere Informationen zu sammeln. Beispielsweise können Sie Benutzer bitten, ihren Standort anzugeben oder eine kurze Biografie einzureichen. Sie fragen sich jedoch wahrscheinlich, wie Sie dies tun können, ohne eine Codezeile zu berühren.

Glücklicherweise können Sie ein WordPress-Benutzerregistrierungs-Plugin wie Profile Builder Pro verwenden. Dadurch können Sie Ihre Anmelde- und Registrierungsformulare ganz einfach anpassen. Außerdem haben Sie dadurch mehr Kontrolle über das Benutzerprofil.

In diesem Beitrag werfen wir einen genaueren Blick darauf, warum Sie möglicherweise Ihre Benutzeranmeldungs-, Registrierungs- und Profilformulare für WordPress anpassen möchten. Anschließend zeigen wir Ihnen Schritt für Schritt, wie Sie dies mit Profile Builder Pro tun. Lass uns anfangen!

Warum Sie möglicherweise eine benutzerdefinierte Benutzeranmeldung, Registrierung und ein benutzerdefiniertes Profil erstellen möchten

Standardmäßig sind die WordPress-Benutzerregistrierungs-, Anmelde- und Profilformulare sehr einfach. Das Gleiche gilt für die WooCommerce-Formulare:

Diese Formulare können einen guten Ausgangspunkt bieten, aber als Geschäftsinhaber sind Sie möglicherweise daran interessiert, mehr über Ihre Zielgruppe zu erfahren. Das Sammeln von Informationen wie Standort und Sprache könnte Ihnen beispielsweise dabei helfen, Ihre Marketingbemühungen zu optimieren, um diese bestimmte Zielgruppe anzusprechen.

Darüber hinaus möchten Sie Ihre Formulare möglicherweise mit der Zwei-Faktor-Authentifizierung (2FA) sichern. Dadurch wird verhindert, dass böswillige Akteure in Ihre Website eindringen.

Es gibt andere Möglichkeiten, die Anmelde- oder Registrierungsseite anzupassen. Beispielsweise können Sie Benutzer nach der Anmeldung oder Registrierung auf bestimmte Seiten Ihrer Website umleiten.

Sie könnten sie zu Ihren neuesten Beiträgen oder Ihrer Verkaufsseite weiterleiten. Auf diese Weise können Sie Ihre Login-Seite nutzen, um auf bestimmte Produkte, Artikel oder Angebote aufmerksam zu machen und mehr Conversions zu erzielen.

Profile Builder Pro ist das ideale Plugin zum Erstellen benutzerdefinierter WordPress-Benutzerprofile, Anmelde- und Registrierungsformulare. Sie können Ihre Formulare sogar mit bedingter Logik personalisieren. Das bedeutet, dass die Felder, die Benutzer sehen, auf ihren Vorlieben und Auswahlen basieren.

Wir werden diese Funktionen im nächsten Abschnitt genauer untersuchen.

So erstellen Sie eine benutzerdefinierte WordPress-Benutzeranmeldung, -Registrierung und -Profil

Sehen wir uns nun an, wie Sie Ihre Benutzeranmeldungs-, Registrierungs- und Profilformulare für WordPress anpassen.

Schritt 1: Installieren Sie Profile Builder Pro

Zunächst müssen Sie das Profile Builder Pro-Plugin erwerben. Melden Sie sich dann bei Ihrem Konto an und gehen Sie zu Downloads . Hier finden Sie die Dateien für das Plugin, das Sie gerade gekauft haben:

Laden Sie die Main- und Pro -Plugins herunter, um die Datei auf Ihrem Computer zu speichern. Wählen Sie dann „Sites verwalten“ und geben Sie die URL der Site ein, auf der Sie das Plugin aktivieren möchten:

Melden Sie sich nun bei Ihrer WordPress-Site an und navigieren Sie zu Plugins → Neu hinzufügen . Klicken Sie dann auf die Schaltfläche „Plugin hochladen“ und wählen Sie nacheinander die Dateien aus, die Sie gerade heruntergeladen haben:

Wählen Sie „Jetzt installieren“ und anschließend „Aktivieren“ . Sie sollten nun Profile Builder in Ihrem Dashboard-Menü sehen. Klicken Sie darauf und gehen Sie zu Version registrieren . Hier müssen Sie den Lizenzschlüssel für Ihr Plugin eingeben:

Den Lizenzschlüssel finden Sie in Ihrem Profile Builder-Konto. Sobald Sie es aktiviert haben, können Sie mit der Arbeit an Ihren Anmelde- und Registrierungsseiten beginnen.

Profile Builder Pro kann die Formularseiten automatisch für Sie erstellen:

Alles, was Sie tun müssen, ist auf „Formularseite erstellen“ zu klicken, und schon werden die Anmelde-, Registrierungs- und Profilformulare für WordPress-Benutzer zu den jeweiligen Seiten hinzugefügt. Als Nächstes zeigen wir Ihnen, wie Sie diese Formulare konfigurieren und anpassen.

Schritt 2: Konfigurieren Sie Ihre WordPress-Formulare

Beginnen wir mit der Konfiguration einiger Einstellungen für Ihre WordPress-Formulare. Navigieren Sie zu Profile Builder → Einstellungen und wählen Sie ein Formulardesign aus:

Sie könnten beispielsweise Stil 2 als Formularstil wählen und Ihre Frontend-Benutzerformulare sehen dann etwa so aus:

Anschließend können Sie einige Einstellungen für Ihre Anmelde- und Registrierungsseiten konfigurieren. Sie können beispielsweise neue Benutzer nach der Registrierung automatisch anmelden, die Administratorgenehmigung für neue Registrierungen aktivieren und Benutzern erlauben, sich nur mit ihrem Benutzernamen oder ihrer E-Mail-Adresse anzumelden:

Sie können sogar sichere Passwörter erzwingen, indem Sie eine Mindestlänge und -stärke festlegen. Wenn Sie fertig sind, klicken Sie auf Änderungen speichern .

Wenn Sie Ihre Website sicherer machen möchten, können Sie zur Registerkarte „Zwei-Faktor-Authentifizierung“ navigieren und diese Funktion auf Ihrer Website aktivieren. Möglicherweise möchten Sie es sogar nur für bestimmte Benutzer, wie Kunden und Abonnenten, aktivieren:

Wenn Sie zu „Erweiterte Einstellungen“ navigieren, können Sie noch mehr Funktionen für Ihre Formulare aktivieren. Wenn Sie beispielsweise die Registerkarte „Felder“ auswählen, wird eine Option zum automatischen Generieren von Passwörtern für Benutzer angezeigt:

Sie können außerdem die Verwendung bestimmter Wörter in Feldern verbieten, verhindern, dass Benutzer bereits vorhandene Anzeigenamen verwenden, und vieles mehr. Nehmen Sie sich Zeit, die verfügbaren Einstellungen und Optionen zu erkunden, aber denken Sie daran, Ihre Änderungen zu speichern, bevor Sie zu einer anderen Registerkarte wechseln.

Wenn Sie Benutzer nach der Registrierung oder Anmeldung auf eine bestimmte Seite weiterleiten möchten, müssen Sie das entsprechende Modul aktivieren. Gehen Sie zu Profile Builder → Add-Ons und suchen Sie nach Custom Redirects *.* Wählen Sie das Kästchen daneben aus und klicken Sie dann auf Aktivieren :

Gehen Sie nun zu Profile Builder → Benutzerdefinierte Weiterleitungen . Wie Sie vielleicht bemerkt haben, können Sie Weiterleitungen für einzelne Benutzer oder entsprechend der Benutzerrolle einrichten:

In unserem Fall richten wir globale Weiterleitungen ein. Wählen Sie zunächst einen Weiterleitungstyp aus (z. B. Nach der Anmeldung oder Nach der Registrierung ):

Geben Sie dann die URL ein, zu der Sie Benutzer umleiten möchten, und klicken Sie auf Eintrag hinzufügen . Sie können mehrere Weiterleitungen erstellen.

Schritt 3: Passen Sie die Formularfelder an

Um die Felder für Ihr WordPress-Benutzerregistrierungsformular anzupassen, navigieren Sie zu Profile Builder → Formularfelder . Hier sehen Sie eine Liste der Felder, die Ihr Formular derzeit anzeigt:

Sie können auf Bearbeiten klicken, um ein einzelnes Feld anzupassen, oder auf Löschen, um es aus dem Formular zu entfernen. Um ein neues Feld hinzuzufügen, verwenden Sie das Dropdown-Menü, um eine Option auszuwählen.

Beispielsweise möchten Sie möglicherweise Benutzer bitten, ihr Land auszuwählen. Profile Builder fordert Sie auf, einige Details zu diesem Feld einzugeben, z. B. einen Titel und einen Metanamen:

Sie können dies sogar zu einem Pflichtfeld machen. Wenn Sie fertig sind, klicken Sie auf Feld hinzufügen . Dies wird nun Ihrem WordPress-Benutzerregistrierungsformular hinzugefügt.

Zuvor haben wir die bedingte Logik erwähnt. Dabei wird Benutzern ein Feld basierend auf Informationen angezeigt, die sie in vorherige Felder eingegeben haben.

Beispielsweise möchten Sie Benutzer möglicherweise nur dann nach ihrer Website fragen, wenn sie „USA“ als Land ausgewählt haben. Klicken Sie dazu auf die Schaltfläche Bearbeiten für das Feld Website . Aktivieren Sie dann das Kontrollkästchen „Bedingte Logik aktivieren “:

Wählen Sie im Dropdown-Menü das Feld aus, von dem dieser Eintrag abhängig sein soll (in unserem Fall „Land auswählen “), und geben Sie dann die Eingabe an (z. B. „Vereinigte Staaten “).

So wird das Ergebnis aussehen:

Beachten Sie, dass Sie auch die Reihenfolge ändern können, in der Ihre Felder angezeigt werden. Bewegen Sie dazu einfach den Mauszeiger über die Nummer Ihres Feldes und ziehen Sie es an die gewünschte Position:

Wenn Sie mehrere Registrierungsformulare für verschiedene Benutzertypen erstellen möchten, gehen Sie zu Profile Builder → Add-Ons und klicken Sie, um das Modul „Mehrere Registrierungsformulare“ zu aktivieren:

Diese Funktion ist besonders nützlich, wenn Sie unterschiedliche Arten von Benutzern oder Kunden bedienen. Beispielsweise können Sie sowohl an Unternehmen als auch an Privatpersonen verkaufen.

Sobald Sie das Modul aktiviert haben, gehen Sie zu Profile Builder → Registrierungsformulare und klicken Sie auf Neu hinzufügen :

Anschließend müssen Sie einen Namen für Ihr Formular eingeben, einige Einstellungen konfigurieren und die Felder anpassen (wie zuvor gezeigt):

Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“ . Als Nächstes schauen wir uns an, wie Sie diese Formulare zu Ihrer Website hinzufügen.

Schritt 4: Fügen Sie die Formulare zu Ihren Seiten hinzu

Wie bereits erwähnt, kann Profile Builder Pro die Formular-Shortcodes automatisch zu Ihren Anmelde-, Registrierungs- und Profilseiten hinzufügen. Das bedeutet, dass jedes Mal, wenn Sie diese Formulare ändern, die Änderungen im Frontend angezeigt werden.

Sie können diese Formulare jedoch auch in anderen Bereichen Ihrer Website hinzufügen. Beispielsweise möchten Sie möglicherweise die WooCommerce-Anmeldeseite und das WooCommerce-Registrierungsformular anpassen.

Dafür gibt es zwei Möglichkeiten: die Verwendung eines Shortcodes oder eines dedizierten Blocks.

Öffnen Sie zunächst die Seite, auf der Sie Ihre Formulare anzeigen möchten. Wenn Sie sie für Ihren Online-Shop verwenden möchten, müssen Sie die Seite „Mein Konto“ bearbeiten, die bei der Installation von WooCommerce erstellt wurde. Alternativ können Sie sich auch dafür entscheiden, eine neue Seite zu erstellen.

Wenn Sie die bestehende WooCommerce-Seite verwenden, müssen Sie die Standard-Anmelde- und Registrierungsformulare löschen. Einfach den Shortcode auswählen und löschen:

Um nun Ihre benutzerdefinierten Formulare hinzuzufügen, klicken Sie auf „Neuen Block hinzufügen“ und suchen Sie nach „Registrieren “ oder „Anmelden“ :

In diesem Tutorial fügen wir dieser Seite beide Formulare hinzu. Wir haben außerdem für jedes Formular eine Überschrift hinzugefügt:

Sie erhalten außerdem einige Konfigurationseinstellungen für jeden Block. Wenn Sie beispielsweise das Registrierungsformular auswählen, können Sie die automatische Anmeldung nach der Registrierung aktivieren, eine Weiterleitung einrichten und mehr:

Wenn Sie mehrere Registrierungsformulare erstellt haben, navigieren Sie zu Formulareinstellungen und wählen Sie im Dropdown-Menü das Formular aus, das Sie anzeigen möchten:

Unter ** Zugewiesene Rolle können Sie die Rolle auswählen, die Benutzern zugewiesen wird, die sich über dieses Formular registrieren. Wenn es sich beispielsweise um ein Großhandelsregistrierungsformular handelt, können Sie diesen Benutzern die Rolle „Großhandelskunde“ zuweisen.

Wenn Sie fertig sind, klicken Sie auf „Aktualisieren“ (oder „Veröffentlichen“ , wenn Sie eine neue Seite erstellt haben). Anschließend können Sie die Seite im Frontend besuchen, um zu sehen, wie Ihre Formulare für Ihre Kunden aussehen:

Beachten Sie, dass wir für dieses Beispiel den Standard-Formularstil verwendet haben. Sie können jedoch eine beliebige der vorgefertigten Vorlagen für Ihre Formulare auswählen, um sie hervorzuheben und professionell aussehen zu lassen.

Sie können Ihre Formulare auch mit einem Shortcode hinzufügen. Dies kann besonders nützlich sein, wenn Sie Ihre Seiten mit einem anderen Seitenersteller als dem Blockeditor erstellt haben.

Sie finden diese Shortcodes im Profile Builder → Grundlegende Informationen . Kopieren Sie sie einfach und fügen Sie sie dann auf der gewünschten Seite ein!

Schritt 5: Passen Sie die Profilformulare an

Schließlich können Sie WordPress-Benutzerprofilformulare anpassen, sodass Benutzer mehr Kontrolle über ihre Details haben. Dazu müssen Sie das Modul „Multiple Edit Profile Forms“ aktivieren:

Gehen Sie dann zu Profile Builder → Profilformulare bearbeiten → Neu hinzufügen :

Anschließend können Sie das Formular einfach wie zuvor gezeigt anpassen. Sie können beispielsweise eine Weiterleitung hinzufügen und neue Felder erstellen oder vorhandene bearbeiten. Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“ .

Abschluss

Die Standard-WordPress-Formulare sind ziemlich einfach. Wenn Sie mehr Details über Ihre Zielgruppe sammeln oder ein maßgeschneidertes Benutzererlebnis bieten möchten, müssen Sie diese Formulare anpassen. Sie können auf diesen Formularen auch sichere Passwörter und eine Zwei-Faktor-Authentifizierung erzwingen, um Ihre Website sicherer zu machen.

Um es noch einmal zusammenzufassen: So können Sie benutzerdefinierte WordPress-Formulare für die Anmeldung und Registrierung erstellen:

1. Installieren Sie Profile Builder Pro.
2. Konfigurieren Sie Ihre WordPress-Formulare.
3. Passen Sie die Formularfelder an.
4. Fügen Sie die Formulare zu Ihren Seiten hinzu.
5. Passen Sie das Benutzerprofil an.

Haben Sie Fragen zum Erstellen eines benutzerdefinierten WordPress-Benutzer-Logins, einer Registrierung oder eines Profils? Lass es uns im Kommentarbereich unten wissen!