Wie man ein benutzerdefiniertes Benutzerregistrierungsformular in WordPress erstellt

Wenn Sie eine WordPress-Mitgliedswebsite oder eine andere Website betreiben, die eine Benutzerregistrierung zulässt, dann ist eine nahtlose Registrierung sehr wichtig. Das Standard WordPress Formular für die Registrierung von Benutzern ist jedoch etwas einfach gehalten.

Da dieses Standard-Formular keine Optionen zur individuellen Anpassung hat und das WordPress-Branding anzeigt, kann es mit dem Design Ihrer Website kollidieren.

Wir bei WPBeginner wissen, wie wichtig es ist, ein konsistentes Branding über alle Berührungspunkte hinweg aufrechtzuerhalten, einschließlich der Registrierung von Benutzern.

Durch das Hinzufügen eines individuellen Registrierungsformulars können Sie das Benutzererlebnis für neue Besucher verbessern, eine kohärente Markenidentität sicherstellen und sogar die Zahl der Benutzerregistrierungen auf Ihrer WordPress-Website erhöhen.

Dieser Artikel führt Sie durch den Prozess des Erstellens individueller Frontend- Registrierungsformulare in WordPress.

Warum ein benutzerdefiniertes Benutzerregistrierungsformular in WordPress hinzufügen?

Die Standard-WordPress-Benutzerregistrierungsseite zeigt das WordPress-Branding und -Logo, das nicht zum restlichen Design Ihrer WordPress-Website passt.

Die Erstellung eines neuen Benutzerregistrierungsformulars ermöglicht es Ihnen, das Registrierungsformular auf jeder beliebigen Seite der Website einzufügen, und hilft Ihnen, eine einheitlichere Benutzererfahrung während des Registrierungsprozesses zu bieten.

Mit einem Registrierungsformular können Sie spezifische Informationen von Ihren Nutzern sammeln, die für Ihren WordPress-Blog oder Ihr Unternehmen einzigartig sein können.

Dies kann zusätzliche Kontaktdaten, Präferenzen oder andere Informationen umfassen, die für die Funktionalität Ihrer Website relevant sind.

Wenn Sie z. B. eine Veranstaltung organisieren, können Sie mit einem Anmeldeformular wichtige Informationen von den Teilnehmern sammeln, wie z. B. Ernährungseinschränkungen, Sitzungspräferenzen oder besondere Anforderungen.

Ein benutzerdefiniertes Benutzerregistrierungsformular ermöglicht es Ihnen auch, Benutzer bei der Registrierung umzuleiten. Sie können sogar zusätzliche Benutzerprofilfelder anzeigen, sie mit einem benutzerdefinierten Front-End-Anmeldeformular kombinieren und es mit Ihrem E-Mail-Marketingdienst verbinden.

Schauen wir uns also an, wie man ein benutzerdefiniertes Benutzerregistrierungsformular in WordPress erstellt, Schritt für Schritt.

Wie man ein benutzerdefiniertes Benutzerregistrierungsformular in WordPress erstellt

Der einfachste Weg, ein individuelles Benutzer-Registrierungsformular zu erstellen, ist die Verwendung von WPForms. Es ist das beste Plugin für WordPress-Kontaktformulare, mit dem Sie alle Arten von neuen Formularen in WordPress erstellen können.

WPForms ist sehr einfach zu bedienen und bietet einen Drag-and-Drop-Formularersteller, so dass Sie Ihr Registrierungsformular nach Belieben anpassen können. Das Plugin lässt sich auch in beliebte E-Mail-Marketingdienste und Zahlungsdienste wie PayPal integrieren.

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Eine ausführliche Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung, Kopf über die WPForms “ Einstellungen Seite von der WordPress-Admin-Seitenleiste, um Ihren Lizenzschlüssel eingeben.

Sie können diesen Schlüssel über Ihr Konto auf der WPForms-Website erhalten.

Sobald der Schlüssel verifiziert ist, müssen Sie die Seite WPForms “ Addons im WordPress-Dashboard aufrufen.

Suchen Sie hier das „User Registration Addon“ und klicken Sie dann auf die Schaltfläche „Install Addon“ darunter.

WPForms wird nun installieren und aktivieren Sie die User Registration Addon auf Ihrer WordPress-Website. Sie werden sehen, dass sich der Status auf „Aktiv“ ändert, wenn das Addon installiert ist.

Jetzt können Sie Ihr benutzerdefiniertes Benutzerregistrierungsformular erstellen.

Besuchen Sie dazu die Seite WPForms “ Add New in der Admin-Seitenleiste.

Daraufhin werden Sie auf die Seite „Vorlage auswählen“ weitergeleitet, wo Sie zunächst einen Namen für das zu erstellende Formular eingeben können.

Suchen Sie dann einfach die Vorlage „Benutzerregistrierungsformular“ und klicken Sie darunter auf die Schaltfläche „Vorlage verwenden“.

Dadurch wird der WPForms-Formularersteller auf Ihrem Bildschirm gestartet. Hier sehen Sie die Feldoptionen in der rechten Spalte und eine Formularvorschau in der linken Ecke des Bildschirms.

Das Standard-Registrierungsformular ist bereits mit den Feldern Name, Benutzername, Passwort, E-Mail und Kurzbiografie versehen.

Sie können dem Formular jedoch problemlos weitere Felder über das linke Bedienfeld hinzufügen und auch die Felder ziehen, um ihre Reihenfolge zu ändern.

Mit dem Plugin können Sie auch jedes Formularfeld bearbeiten. Klicken Sie dazu einfach auf ein beliebiges Formularfeld, und in der linken Spalte erscheint „Feldoptionen“.

Von hier aus können Sie die Feldbeschriftung ändern, das Format bearbeiten, eine Beschreibung hinzufügen, eine bedingte Formatierung einrichten, das Feld in „erforderlich“ ändern und vieles mehr.

Wenn Sie fertig sind, vergessen Sie nicht, auf den Button „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Hinweis: Wenn Sie E-Mail-Benachrichtigungen an registrierte Benutzer senden möchten, sehen Sie sich unsere Anleitung zum Senden von Bestätigungs-E-Mails nach dem Absenden eines WordPress-Formulars an.

Hinzufügen von benutzerdefinierten Feldern in Ihr benutzerdefiniertes Benutzerregistrierungsformular

WPForms ermöglicht es Ihnen auch, benutzerdefinierte Benutzer-Profil-Felder, um Ihre Benutzer-Registrierung Form zu verbinden.

Dazu müssen Sie Ihrer WordPress Website zusätzliche Felder für Benutzerprofile hinzufügen. Am einfachsten geht das mit einem WordPress Plugin.

In diesem Tutorial verwenden wir das Advanced Custom Fields Plugin. Die Feldzuordnungsfunktion von WPForms funktioniert jedoch mit jedem Plugin, das standardmäßige benutzerdefinierte WordPress-Felder zum Hinzufügen und Speichern von Benutzer-Metadaten verwendet.

Zunächst müssen Sie das Advanced Custom Fields-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins gehen Sie von der Seitenleiste des WordPress-Administrators auf die Seite ACF “ Feldgruppen. Klicken Sie hier auf den Button „+ Feldgruppe hinzufügen“.

Dies führt Sie zur Seite „Neue Feldgruppe hinzufügen“, wo Sie zunächst einen Titel für die Feldgruppe eingeben können.

In diesem Tutorial werden wir ein benutzerdefiniertes Feld für die Details von Social Media-Konten erstellen.

Blättern Sie anschließend zum Dropdown-Menü „Feldtyp“ und wählen Sie einen Typ für das benutzerdefinierte Feld aus. Sie können Text, Zahlen, Bilder, Dateien, Kontrollkästchen, URLs, Passwörter und vieles mehr auswählen.

Geben Sie anschließend eine Feldbezeichnung ein, die auf der Profilseite erscheint.

Wenn Sie z. B. ein benutzerdefiniertes Feld zur Erfassung von Facebook-Profilen hinzufügen möchten, können Sie die Feldbezeichnung „Facebook“ nennen.

Sie werden feststellen, dass der Feldname automatisch generiert wird, wenn Sie eine Feldbezeichnung eingeben, aber Sie können ihn bearbeiten.

Wechseln Sie als Nächstes vom Abschnitt „Etikett“ auf die Registerkarte „Validierung“. Hier können Sie den Schalter „Erforderlich“ aktivieren, damit die Benutzer dieses benutzerdefinierte Feld vor dem Absenden des Formulars ausfüllen müssen.

Sie können hier sogar eine Zeichenbegrenzung für das Feld festlegen.

Wenn Sie das getan haben, wechseln Sie einfach zur Registerkarte „Präsentation“.

Sie können jetzt Anweisungen für Autoren, Platzhaltertext für das Feld, Wrapper-Attribute und mehr hinzufügen.

Danach können Sie dem benutzerdefinierten Feld, das Sie erstellen, auch eine bedingte Logik hinzufügen, indem Sie oben auf die Registerkarte „Bedingte Logik“ wechseln.

Sobald Sie Ihre Änderungen vorgenommen haben, blättern Sie nach unten zum Abschnitt „Standortregeln“. Hier müssen Sie eine Reihe von Regeln erstellen, um festzulegen, welche Bildschirme diese benutzerdefinierten Felder verwenden sollen.

Da dieses Feld für alle Benutzerprofile angezeigt werden soll, müssen wir die Option „Benutzerrolle“ aus dem Dropdown-Menü auf der linken Seite auswählen.

Lassen Sie danach das Dropdown-Menü in der Mitte unverändert und wählen Sie dann die Option „Alle“ aus dem Dropdown-Menü auf der rechten Seite.

Jetzt wird die von uns erstellte benutzerdefinierte Feldgruppe für alle Benutzerprofile angezeigt.

Wechseln Sie dann oben auf die Registerkarte „Gruppeneinstellungen“.

Vergewissern Sie sich dort, dass die Feldgruppe aktiv ist, indem Sie den Schalter von Nein auf Ja umlegen.

Danach können Sie auch andere benutzerdefinierte Felder zu der Feldgruppe hinzufügen, indem Sie oben auf der Seite auf die Schaltfläche „Feld hinzufügen“ klicken.

Wenn Sie zum Beispiel mehrere Felder für soziale Medien erstellen möchten, können Sie auf die Schaltfläche „Feld hinzufügen“ klicken und das Feld für andere soziale Medienplattformen anpassen.

Denken Sie daran, dass alle Felder, die Sie erstellen, zur gleichen Feldgruppe gehören.

Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie haben Ihre Feldgruppe nun erfolgreich veröffentlicht.

Um das von Ihnen erstellte benutzerdefinierte Feld anzuzeigen, gehen Sie im Verwaltungsbereich auf die Seite Benutzer “ Profil .

Hier sehen Sie, dass Ihre benutzerdefinierten Felder unten auf der Profilseite hinzugefügt wurden.

Nachdem Sie nun ein benutzerdefiniertes Benutzerprofilfeld erstellt haben, müssen Sie es dem benutzerdefinierten Benutzerregistrierungsformular in WPForms hinzufügen.

Danach müssen Sie auch sicherstellen, dass das Formularfeld dem benutzerdefinierten Feld zugeordnet wird, damit die Daten ordnungsgemäß gespeichert werden.

Rufen Sie dazu im WordPress-Dashboard die Seite WPForms “ Alle Formulare auf. Klicken Sie dann auf den Link „Bearbeiten“ unter dem Benutzer-Registrierungsformular, das Sie gerade erstellt und gespeichert haben.

Dadurch wird Ihr Formular im WPForms Form Builder geöffnet. Sobald Sie dort sind, ziehen Sie einfach ein Feld aus dem linken Bereich, um es zu Ihrem Formular hinzuzufügen.

In diesem Beispiel fügen wir ein Feld „Website/URL“ zu unserem Formular hinzu.

Wenn Sie das Feld Website/URL hinzugefügt haben, klicken Sie darauf, um die Eigenschaften des Feldes in der linken Spalte zu öffnen.

Ändern Sie nun die Feldbezeichnung von Website/URL in den Namen der Feldgruppe, die Sie erstellt haben.

Wenn Sie möchten, können Sie auch eine Beschreibung für das Feld hinzufügen.

Vergessen Sie danach nicht, auf den Button „Speichern“ zu klicken, um Ihr Formular zu speichern.

Als Nächstes müssen Sie auf die Schaltfläche „Einstellungen“ in der rechten Ecke klicken, um erweiterte Formulareinstellungen und Feldzuordnungen vorzunehmen. Auf der Seite „Einstellungen“ klicken Sie auf die Registerkarte „Benutzerregistrierung“.

WPForms zeigt nun Ihre Formularfelder und ein Dropdown-Menü darunter, um das WordPress-Registrierungsfeld auszuwählen, dem es zugeordnet werden soll.

Sie werden feststellen, dass WPForms automatisch Ihre Standard-Felder wie Name, E-Mail, Passwort, und mehr zuordnen wird.

Wählen Sie hier den Namen Ihrer Feldgruppe aus dem Dropdown-Menü unter der Option „Website“.

Blättern Sie dann nach unten zum Abschnitt „Benutzerdefinierte Meta“.

Sie können den Namen der Feldgruppe, die Sie zuvor erstellt haben, in die Option „Benutzerdefinierter Metaschlüssel“ eingeben und dann das benutzerdefinierte Formularfeld, dem Sie es zuordnen möchten, aus dem Dropdown-Menü auswählen.

Hinweis: Wenn Sie E-Mail-Benachrichtigungen an registrierte Benutzer senden möchten, sehen Sie sich unsere Anleitung zum Senden von Bestätigungs-E-Mails nach WordPress-Formular-Eingaben an.

Klicken Sie abschließend auf die Schaltfläche „Speichern“ in der oberen rechten Ecke des Bildschirms, um Ihre Einstellungen zu speichern.

Hinzufügen Ihres benutzerdefinierten Registrierungsformulars in WordPress

WPForms macht es super einfach, Formulare zu Ihren WordPress-Beiträgen, -Seiten und -Sidebar-Widgets hinzuzufügen.

Zunächst müssen Sie einen bestehenden oder neuen Beitrag/eine neue Seite öffnen, auf der Sie das individuelle Registrierungsformular hinzufügen möchten.

Klicken Sie dann auf den Button „Block hinzufügen“ (+) in der oberen linken Ecke, um das Blockmenü zu öffnen.

Von hier aus suchen Sie den WPForms-Block und fügen ihn der Seite/dem Beitrag hinzu.

Danach können Sie Ihr individuelles Anmeldeformular aus dem Dropdown-Menü im Block selbst auswählen.

Sie sehen nun eine Vorschau Ihres Registrierungsformulars im WordPress-Editor. Veröffentlichen Sie nun Ihren Beitrag oder Ihre Seite, um das benutzerdefinierte Registrierungsformular in Aktion zu sehen.

Hinzufügen des benutzerdefinierten Registrierungsformulars zur Seitenleiste

Mit WPForms können Sie auch Ihr individuelles Benutzer-Registrierungsformular in Ihre Seitenleiste einfügen. Besuchen Sie einfach die Seite Design “ Widgets im Admin-Bereich und klicken Sie auf den Button „Block hinzufügen“ (+).

Dadurch wird das Blockmenü geöffnet, von dem aus Sie den WPForms-Block zur Seitenleiste auf der Seite „Widgets“ hinzufügen können.

Danach wählen Sie einfach das Benutzerregistrierungsformular aus dem Dropdown-Menü im WPForms-Block aus.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ zu klicken, um Ihre Einstellungen zu speichern.

Jetzt können Sie Ihre Website besuchen und das Benutzerregistrierungsformular in der Seitenleiste der Website anzeigen.

Hinzufügen des benutzerdefinierten Benutzerregistrierungsformulars im Full Site Editor

Wenn Sie ein blockbasiertes WordPress-Theme verwenden, steht Ihnen die Widgets-Seite nicht zur Verfügung. Um das Anmeldeformular mit dem Full Site Editor (FSE) in die Seitenleiste einzufügen, gehen Sie in der Admin-Seitenleiste auf die Seite Erscheinungsbild “ Editor .

Klicken Sie dort auf den Button „Block hinzufügen“ (+) in der oberen linken Ecke, um das Blockmenü zu öffnen.

Von hier aus müssen Sie den WPForms-Block finden und an der von Ihnen gewünschten Stelle Ihrer Website hinzufügen.

Wählen Sie dann das Anmeldeformular aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Besuchen Sie nun Ihre Website, um das benutzerdefinierte Benutzerregistrierungsformular in Aktion zu sehen.

Bonus: Erstellen Sie eine benutzerdefinierte Login-Seite mit Ihrem Registrierungsformular

Wenn Sie Ihr Registrierungsformular zu einer Seite auf Ihrer Website hinzufügen, verwendet WordPress standardmäßig das Layout, die Vorlage und den Stil Ihres Themes.

Sie können jedoch eine beeindruckende Registrierungsseite von Grund auf mit einem WordPress Landing Page Builder erstellen.

SeedProd ist der beste Page Builder für WordPress. Es ist benutzerfreundlich und bietet einen Drag-and-Drop-Builder, mit dem Sie alle Arten von Landing Pages erstellen können. Das Plugin bietet auch vorgefertigte Vorlagen und viele Anpassungsfunktionen.

Zunächst müssen Sie das SeedProd-Plugin auf Ihrer Website installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung besuchen Sie die Seite SeedProd “ Einstellungen, um den Lizenzschlüssel für das Plugin einzugeben. Sie können diese Informationen in Ihrem Konto auf der SeedProd-Website finden.

Nachdem Sie Ihren Schlüssel überprüft haben, können Sie nun eine Anmeldeseite mit Ihrem Registrierungsformular erstellen.

Um zu beginnen, gehen Sie in der Admin-Seitenleiste auf den Bildschirm SeedProd “ Landing Pages “ und klicken Sie auf die Schaltfläche „Set up a Login Page“.

Dies führt Sie zum Bildschirm „Neue Seitenvorlage auswählen“, wo Sie eine vorgefertigte Vorlage für die zu erstellende Anmeldeseite auswählen können.

Nachdem Sie eine Vorlage ausgewählt haben, erscheint ein Popup-Fenster.

Sie müssen nun einen Namen für Ihre Landing Page und eine URL eingeben. Sobald das erledigt ist, klicken Sie auf die Schaltfläche „Speichern und Bearbeitung der Seite beginnen“.

Als nächstes können Sie Ihre Anmeldeseite mit dem Drag-and-Drop-Landing-Page-Builder von SeedProd bearbeiten.

Wählen Sie dazu einen Block aus dem Menü auf der linken Seite und ziehen Sie ihn an die Stelle, an der Sie ihn auf Ihrer Anmeldeseite einfügen möchten.

Sie können Ihrer Landing Page zum Beispiel eine Überschrift, ein Bild, ein Video oder einen Block zum Teilen in sozialen Netzwerken hinzufügen.

Sobald Sie das getan haben, gehen Sie in der linken Spalte zum Abschnitt Erweiterte Blöcke.

Wählen Sie von hier aus den Block „Kontaktformular“ aus und platzieren Sie ihn auf Ihrer Anmeldeseite.

Wir empfehlen Ihnen, den bestehenden Block Benutzername und Kennwort aus der Vorlage zu löschen, damit die Benutzer die Anmeldedaten nicht zweimal eingeben müssen.

Klicken Sie anschließend auf den WPForms-Block auf Ihrer Anmeldeseite, um seine Einstellungen in der linken Spalte zu ändern.

Sie sehen nun im Menü die Option „Formular auswählen“.

Wählen Sie nun Ihr Anmeldeformular aus dem Dropdown-Menü aus.

Sie sollten nun eine Vorschau Ihres Registrierungsformulars im Landing Page Builder sehen.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Danach können Sie auf die Registerkarte „Verbinden“ gehen und verschiedene E-Mail-Marketingdienste in Ihr Registrierungsformular integrieren.

SeedProd lässt sich problemlos in gängige E-Mail-Marketing-Dienste wie Drip, Constant Contact, AWeber und andere integrieren, was zur Verbesserung Ihrer E-Mail-Liste beitragen kann.

Als Nächstes können Sie auf die Registerkarte „Seiteneinstellungen“ gehen und unter den allgemeinen Einstellungen den Seitenstatus auf “ Veröffentlichen“ ändern.

Sie können sogar den Seitentitel und die URL bearbeiten und den SeedProd-Link auf dieser Registerkarte aktivieren.

Wenn Sie Ihre Seite für Suchmaschinen optimieren möchten, gehen Sie auf die Registerkarte SEO.

Von hier aus können Sie die Einstellungen konfigurieren, indem Sie einen SEO-Titel, eine Beschreibung, eine Miniaturansicht für soziale Medien und mehr eingeben.

In SeedProd können Sie unter den Einstellungen für Skripte auch Codeschnipsel hinzufügen. Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie einfach oben auf die Schaltfläche „Speichern“ und schließen Sie den Page Builder.

Gehen Sie danach zum Bildschirm SeedProd “ Landing Pages und schalten Sie den Schalter unter der Login-Seite um, damit Ihre Seite „aktiv“ wird.

Sie können nun Ihre Anmeldeseite besuchen, um das Anmeldeformular in Aktion zu sehen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie ganz einfach ein individuelles Benutzer-Registrierungsformular in WordPress hinzufügen können. Vielleicht interessieren Sie sich auch für unseren ultimativen Leitfaden zur Verwendung von WordPress-Formularen oder unsere Top-Picks für die besten Plugins für die Benutzerregistrierung in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.