So erstellen Sie benutzerdefinierte WordPress-Registrierungs- und Anmeldeformulare

So erstellen Sie benutzerdefinierte WordPress-Formulare

Es gibt mehrere Plugins, mit denen Sie ein Registrierungsformular für Ihre WordPress-Website erstellen können. Aber aufgrund der Benutzerfreundlichkeit und Funktionalität haben wir festgestellt, dass ProfilePress das beste Formular-Plugin auf dem Markt ist.

ProfilePress bietet wunderschöne vorgefertigte Formulare, die Sie mithilfe von Drag-and-Drop-Funktionen an Ihre Bedürfnisse anpassen können. Das Plugin ist jedoch viel mehr als ein Formularersteller. Mit ProfilePress können Sie Folgendes erstellen:

• Schöne Benutzerprofile
• Durchsuchbare und filterbare Mitgliederverzeichnisse
• Beschränken Sie den Zugriff auf Beiträge, Seiten und untergeordnete Seiten
• Beschränken Sie den Zugriff auf Kategorien, Tags, benutzerdefinierte Beitragstypen und Taxonomien

Darüber hinaus können Sie die Funktionalität des Plugins erweitern, indem Sie Add-Ons wie Google reCAPTCHA, Polylang, Zwei-Faktor-Authentifizierung usw. verwenden. Sie können mehr über die Plugin-Funktionen auf der Seite mit den Funktionen erfahren.

ProfilePress ist ein Premium-Plugin und um es zu verwenden, müssen Sie eine Lizenz erwerben, die jährlich 79 $ für eine einzelne Website kostet. Wenn Sie es für mehr als eine Website verwenden möchten, abonnieren Sie höhere Pläne.

Lassen Sie uns das Plugin verwenden, um benutzerdefinierte WordPress-Formulare zu erstellen.

Erstellen einer benutzerdefinierten Registrierung

Installieren und aktivieren Sie ProfilePress auf Ihrer WordPress-Website.

Schritt 1: Um sicherzustellen, dass Sie benutzerdefinierte Felder in Ihrem Formular verwenden können, müssen Sie benutzerdefinierte Felder aktivieren, indem Sie zu ProfilePress > Addons > Benutzerdefinierte Felder gehen und die Schaltfläche einschalten.

Schritt 2: Gehen Sie nun zu ProfilePress > Forms & Profiles > Add New > Registration .

Schritt 3: Als Nächstes haben Sie die Möglichkeit, eine vorgefertigte Vorlage zu bearbeiten oder das Formular von Grund auf neu zu erstellen.

Das Erstellen eines Formulars von Grund auf erfordert Programmierkenntnisse, und viele von Ihnen, die diesen Artikel lesen, wissen höchstwahrscheinlich nicht, wie man codiert. Wählen Sie in diesem Fall den Drag & Drop Builder .

Schritt 4: Auf der nächsten Seite müssen Sie das Formular benennen und eine Vorlage auswählen . Anschließend gestalten Sie das Formular mit dem Drag-and-Drop-Builder.

Schritt 5: Erstellen Sie das Formular, indem Sie die folgenden benutzerdefinierten Felder verwenden:

• Nutzername
• E-Mail-Addresse
• Bestätigungs-E-Mail
• Passwort
• Bestätige das Passwort
• Passwortstärke
• Webseite
• Spitzname
• Anzeigename
• Vorname
• Familienname, Nachname
• Profilbild hochladen
• Titelbild hochladen
• Biografie
• Rolle auswählen
• Benutzerdefiniertes HTML
• reCaptcha

Schritt 6: Klicken Sie auf die Schaltfläche Live-Vorschau , um eine Vorschau des Formulars anzuzeigen, bevor Sie die Änderungen speichern.

Schritt 7: Scrollen Sie als Nächstes nach unten zu den Formulareinstellungen . Hier können Sie die Schaltflächenbeschriftungen, Farbe, Überschrift und Registrierungseinstellungen ändern.

Schritt 8: Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern . Das ist es. Ihr neues Registrierungsformular ist jetzt fertig.

WICHTIG: Möchten Sie Google reCAPTCHA, Social Logins oder Zwei-Faktor-Authentifizierung zu Ihrem Formular hinzufügen? Mit dem Plugin können Sie die Funktionalität Ihrer Website erweitern und anpassen. Mehr erfahren

Als nächstes müssen Sie zwei Dinge tun:

1. Sie müssen das Formular auf einer neuen Seite oder in einem neuen Beitrag veröffentlichen
2. Machen Sie dann das neue Formular zu Ihrem standardmäßigen WordPress-Registrierungsformular

Wir behandeln beide Tutorials in zwei verschiedenen Abschnitten unten. Aber zuerst werfen wir einen kurzen Blick darauf, wie man ein benutzerdefiniertes WordPress-Anmeldeformular erstellt.

Erstellen eines benutzerdefinierten Anmeldeformulars

Die Schritte, die Sie ausführen müssen, sind mit denen für das Registrierungsformular identisch, mit Ausnahme von zwei Dingen:

Gehen Sie zu ProfilePress > Formulare & Profile > Neu hinzufügen > Drag & Drop Builder. Und anstatt Registrierung auszuwählen, wählen Sie Anmelden .

Nachdem Sie das Formular benannt und eine Vorlage ausgewählt haben, werden Sie feststellen, dass die benutzerdefinierten Felder im Vergleich zum Registrierungsformular eingeschränkt sind. Sie brauchen sowieso nicht so viele benutzerdefinierte Felder für ein Anmeldeformular.

Hier ist eine Liste der benutzerdefinierten Felder, die Sie in Ihrem Anmeldeformular verwenden können:

• Benutzeranmeldung (Benutzername oder E-Mail)
• Passwort
• Login speichern
• Benutzerdefiniertes HTML
• reCaptcha

Alles andere ist genau das gleiche wie das Anmeldeformular.

Wenn Ihr neues Anmeldeformular fertig ist, fahren Sie mit dem nächsten Abschnitt fort, in dem Sie erfahren, wie Sie die neuen Formulare veröffentlichen (Registrierung und Anmeldung) und wie Sie sie als Standard-WordPress-Formulare festlegen.

So veröffentlichen Sie die neuen Formulare auf Ihrer Website

Das ist einfach.

Gehen Sie zu ProfilePress > Formulare & Profile und wählen Sie Login oder Registrierung . Auf der rechten Seite der Formulare sollten Sie einen Shortcode sehen können. Kopieren Sie den Shortcode des gerade erstellten Formulars.

Erstellen Sie als Nächstes eine neue Seite, indem Sie zu Seiten > Neu hinzufügen gehen und den Shortcode einfügen. Benennen Sie die Seite und klicken Sie auf Veröffentlichen .

Ihr Formular ist jetzt live auf Ihrer Website.

So sieht das Registrierungsformular auf unserer Demoseite aus:

Und so sieht das Anmeldeformular aus:

Der nächste Schritt besteht darin, das neue Formular zu Ihrem Standard-Anmelde- oder Registrierungsformular zu machen.

So legen Sie die neuen Formulare als Standard-WordPress-Formular fest

Gehen Sie zu ProfilePress > Einstellungen > Global .

In der Option Anmeldeseite gibt es ein Dropdown-Menü. Wählen Sie aus der Dropdown- Liste die neue Seite aus, auf der Sie das Anmeldeformular veröffentlicht haben.

Wählen Sie in der Option Registrierungsseite die neue Seite aus, auf der Sie das Registrierungsformular veröffentlicht haben.

Das ist es. Immer wenn jemand versucht, sich auf Ihrer Website zu registrieren oder anzumelden, wird er auf neue Formulare stoßen.

So erstellen Sie benutzerdefinierte Formulare für WooCommerce

Viele von Ihnen, die diesen Artikel lesen, fragen sich, ob Sie die Formulare Ihrer WooCommerce-Website ersetzen können? Sicher kannst du. Hier ist wie:

Aktivieren und installieren Sie ProfilePress auf Ihrer WooCommerce-Website. Wie wir bereits gesagt haben, ist ProfilePress unserer persönlichen Erfahrung nach das beste Plugin, mit dem Sie Formulare erstellen können, da es einfach zu bedienen ist und eine Menge Funktionen bietet.

Als nächstes müssen Sie die WooCommerce-Integration aktivieren, indem Sie zu ProfilePress > Addon > WooCommerce gehen und die Schaltfläche aktivieren .

Erstellen eines benutzerdefinierten Registrierungs- und Anmeldeformulars für WooCommerce

Wir haben die Schritte, die Sie unternehmen müssen, um ein Registrierungs- und Anmeldeformular zu erstellen, bereits weiter oben in diesem Artikel behandelt. Sie müssen die genauen Schritte befolgen, um Formulare auf Ihrer WooCommerce-Website zu erstellen.

Wenn die Formulare fertig sind, veröffentlichen Sie sie auf zwei separaten Seiten. Wir haben das auch im Abschnitt „So veröffentlichen Sie die neuen Formulare auf Ihrer Website“ behandelt.

Wir haben Ihnen auch gezeigt, wie Sie die neuen Formulare als Standardregistrierungs- und Login-Formular auf Ihrer Website festlegen. Sie müssen die gleichen Schritte auf Ihrer WooCommerce-Site ausführen.

Hinzufügen von benutzerdefinierten Feldern zu WooCommerce Checkout-Formularen

Es gibt zwei Arten von Checkout-Formularen: Registrierung und Login. In diesem Abschnitt erfahren Sie, wie Sie benutzerdefinierte Checkout-Registrierungs- oder Anmeldeformulare erstellen.

Benutzerdefiniertes Checkout-Anmeldeformular

Möchten Sie Ihr standardmäßiges Checkout-Anmeldeformular durch ein benutzerdefiniertes Checkout-Anmeldeformular ersetzen?

Erstellen wir zunächst ein benutzerdefiniertes Checkout-Anmeldeformular. Wie das geht, haben wir Ihnen bereits in einem vorherigen Abschnitt gezeigt. Bitte befolgen Sie die Schritte im Abschnitt „Erstellen eines benutzerdefinierten Anmeldeformulars“.

Erledigt? Gehen Sie nun zu ProfilePress > Einstellungen > Allgemein > WooCommerce .

Sie sollten eine Option namens Checkout -Anmeldeformular sehen. Es kommt mit einem Dropdown-Menü. Wählen Sie das neue Formular aus dem Dropdown-Menü und speichern Sie Ihre Einstellung.

Ihre Kunden sollten sich während des Bezahlvorgangs mit dem neuen Formular anmelden können.

Registrierungsformular zur Kasse

Was das Registrierungsformular anbelangt, ermöglicht ProfilePress das Hinzufügen benutzerdefinierter Felder zum WooCommerce Checkout-Registrierungsformular. Sie müssen kein Registrierungsformular von Grund auf neu erstellen. Ihre Website verwendet Ihr Standardregistrierungsformular als Checkout-Registrierungsformular, aber Sie können dem Formular benutzerdefinierte Felder hinzufügen.

Um benutzerdefinierte Felder zu Ihrem Checkout-Registrierungsformular hinzuzufügen, müssen Sie zuerst die benutzerdefinierten Felder erstellen.

Gehen Sie zu WooCommerce > Einstellungen > Konten & Datenschutz und aktivieren Sie die Option „ Kunden erlauben, während des Bezahlvorgangs ein Konto zu erstellen “.

Gehen Sie dann zu ProfilePress > Einstellungen > Benutzerdefinierte Felder > Neu hinzufügen . Geben Sie auf der nächsten Seite die Bezeichnung, den Schlüssel, die Beschreibung und den Feldtyp ein. Speichern Sie Ihre Einstellung.

Wenn Sie alle benutzerdefinierten Felder erstellt haben, fügen Sie sie dem Checkout-Registrierungsformular hinzu.

Gehen Sie zu ProfilePress > Einstellungen > Allgemein > WooCommerce > Kassenregistrierungsfelder und die Felder, die Sie gerade erstellt haben, sollten als Dropdown angezeigt werden. Wählen Sie sie aus .

Im nächsten Abschnitt (dh erforderliche Registrierungsfelder) können Sie die benutzerdefinierten Felder einfügen, die Sie obligatorisch machen möchten.

Benutzerdefinierte Registrierungs- und Anmeldeformulare für Mein Konto

Mit ProfilePress haben Sie die Möglichkeit, ein benutzerdefiniertes Registrierungs- und Anmeldeformular festzulegen. Sie müssen zuerst die Formulare auf Ihrer WordPress-Website erstellen. Befolgen Sie einfach die Schritte, die wir im Abschnitt „So erstellen Sie benutzerdefinierte WordPress-Formulare“ beschrieben haben.

Gehen Sie dann zu ProfilePress > Einstellungen > Allgemein > WooCommerce > Anmeldeformular für mein Konto und wählen Sie das neue Anmeldeformular aus, das Sie gerade erstellt haben.

Gehen Sie dann zu Mein Konto Registrierungsformular und wählen Sie das neue Registrierungsformular aus, das Sie gerade erstellt haben.

Unten sehen Sie eine Vorschau, wie es auf der WooCommerce-Seite „Mein Konto“ aussehen könnte.

Das ist es, Leute. Damit sind wir am Ende dieses Tutorials angelangt.

Abschließende Gedanken

Das Erstellen einer benutzerdefinierten WordPress-Registrierung und des Anmeldeformulars ist eine großartige Idee. Sie können benutzerdefinierte Felder hinzufügen, mehr Benutzerdaten sammeln und das Formular so gestalten, dass es zu Ihrer Marke passt.

Obwohl es viele Plugins gibt, die Ihnen helfen, Formulare auf Ihrer WordPress-Website zu erstellen, haben wir festgestellt, dass ProfilePress das beste Plugin für Benutzerregistrierung und Anmeldeformular ist. Es ist sehr einfach zu bedienen und lässt sich in WooCommerce-Shops integrieren.