Wie füge ich ausgewählte Felder von Select2 in einem WordPress-Registrierungsformular hinzu?

Wenn Sie erweiterte Registrierungsformulare erstellen möchten, können Sie Select2-WordPress-Felder anstelle des Select-Felds verwenden.

Sie fragen sich, wie Sie das tun können? Nun, Sie sind an der richtigen Stelle!

In diesem Artikel erfährst du, was das WordPress Select2-Feld ist, seine Bedeutung und seinen Unterschied zum standardmäßigen Select-Feld.

Wir werden auch den Schritt-für-Schritt-Prozess zum Hinzufügen des Felds zu einem Registrierungsformular durchgehen. Lesen Sie den Artikel also unbedingt bis zum Ende!

Was ist Select2? Wie unterscheidet es sich von Standard Select?

Einfach ausgedrückt bietet Ihnen die Select2-Technologie anpassbare Auswahlfelder. Das bedeutet, dass Sie dem Auswahlfeld Funktionen wie Suchen, Markieren, unendliches Scrollen usw. hinzufügen können.

Nun müssen Sie sich fragen, wie sich das Select2-Feld vom standardmäßigen Select-Feld unterscheidet. Lass es uns herausfinden!

Auswählen vs. Auswählen2

Das standardmäßige Auswahlfeld zeigt eine Liste der verfügbaren Optionen in einer Dropdown-Liste an. Der Benutzer kann eine dieser Optionen auswählen, indem er scrollt, um die Option zu finden.

Das Select2-Feld verfügt über alle Operationen, die das standardmäßige Select-Feld bietet. Daher können Benutzer auch eine der verfügbaren Optionen auswählen.

Select2 bietet jedoch mehr Flexibilität und Anpassungsmöglichkeiten.

Es gibt dem Benutzer ein Suchfeld, in das er die Option eingeben kann. Die passende Option wird dem Benutzer dann automatisch angezeigt.

Darüber hinaus erleichtern Select2-Felder im Gegensatz zu den standardmäßigen Select-Feldern auch das Markieren und endlose Scrollen.

Select2 vs. Multi-Select2

Die Select2-Technologie unterstützt sowohl Single-Value- als auch Multi-Value-Auswahlfelder. Das Einzelwert-Auswahlfeld wird einfach als Select2-Feld bezeichnet.

Andererseits wird das Auswahlfeld mit mehreren Werten als Multi Select2-Feld oder Pillbox bezeichnet.

Sie sind ziemlich ähnlich in ihrer Funktionsweise; Beide unterstützen anpassbare Auswahlfelder.

Der einzige große Unterschied besteht darin, dass Benutzer mit Multi Select2 mehrere Optionen aus den verfügbaren Optionen auswählen können. Alle Optionen, die der Benutzer auswählt, erscheinen in der Box, wie Pillendosen, daher der Name.

Diese Funktion ist im regulären Select2-Feld nicht vorhanden.

Warum ein Select2-WordPress-Feld in einem Registrierungsformular hinzufügen?

Die Einführung in Select2-Felder hat Ihnen geholfen, diese Technologie besser zu verstehen.

Aber welchen Mehrwert bringt es einem Registrierungsformular? Warum nicht einfach das standardmäßige Auswahlfeld für die Registrierung verwenden?

Schauen wir uns ein paar Gründe an, warum Sie einem Registrierungsformular ein Select2-WordPress-Feld hinzufügen sollten:

• Das Select2-Feld hilft Benutzern, die richtige Option mit dem Suchfeld einfach zu finden.
• Die Benutzer müssen nicht durch die gesamte Liste scrollen, um die gewünschte Auswahl zu finden.
• Sie können Benutzern die Suche ermöglichen und mehrere Auswahlmöglichkeiten auswählen.
• Das Feld unterstützt unendliches Scrollen, sodass die Optionen weiter geladen werden, wenn der Benutzer nach unten scrollt.
• Select2-Felder machen den Registrierungsprozess für Benutzer schnell und einfach.
• Die hervorragende Benutzererfahrung ermutigt die Benutzer, Registrierungsformulare auszufüllen und abzusenden.

Aus diesem Grund empfehlen wir Ihnen, Registrierungsformularen ein Select2-Feld anstelle des standardmäßigen Select-Felds hinzuzufügen.

Und was ist der beste Weg, Select2-Felder zu einem benutzerdefinierten Formular hinzuzufügen? Lassen Sie uns das im nächsten Abschnitt untersuchen.

Beste Möglichkeit, Select2-Felder in einem Registrierungsformular hinzuzufügen

Mit WordPress können Sie ohne umfangreiche Codierung keine Select2-Felder zum Standardregistrierungsformular hinzufügen.

Aber warum sich auf die Codierung verlassen, wenn Sie Select2-Felder viel einfacher verwenden können?

Das Benutzerregistrierungs-Plugin hilft Ihnen, Select2- und Multi Select2-Felder in Registrierungsformulare ohne Codierung einzufügen und anzupassen.

Alles, was Sie brauchen, ist die Erweiterung Advanced Fields. Deshalb ist es die beste Möglichkeit, Registrierungsformularen Select2-Felder hinzuzufügen.

Außerdem ist die Benutzerregistrierung ein Registrierungsformular-Plugin.

Daher können Sie unbegrenzt benutzerdefinierte Registrierungsformulare mit Select2-Feldern für Ihre Website erstellen. Und die Drag-and-Drop-Builder-Oberfläche macht den Prozess superschnell!

Darüber hinaus ist die Benutzerregistrierung die perfekte Ergänzung zu WooCommerce-Websites. Dieses unglaubliche WordPress-Plugin hilft Ihnen, benutzerdefinierte WooCommerce-Registrierungsformulare zu erstellen und sie mit der Checkout-Seite zu synchronisieren.

Dies sind nur einige Highlights des Benutzerregistrierungs-Plugins. Wenn Sie mehr über dieses Plugin erfahren möchten, besuchen Sie bitte die offizielle Seite.

Lassen Sie uns zunächst mit der Schritt-für-Schritt-Anleitung fortfahren, in der wir die Benutzerregistrierung verwenden, um den Prozess zu demonstrieren.

Wie füge ich ein Select2-Feld in einem WordPress-Registrierungsformular hinzu?

Hier ist eine vollständige Anleitung zum Hinzufügen von WordPress Select2-Feldern in einem Registrierungsformular.

Führen Sie alle Schritte sorgfältig durch, und Sie sollten im Handumdrehen ein benutzerdefiniertes Registrierungsformular mit dem Select2-Feld haben!

Schritt 1: Richten Sie die Benutzerregistrierung Pro ein

Die Installation und Aktivierung von User Registration Pro auf Ihrer Website ist der erste Schritt. Es ist die Premium-Version des kostenlosen Plugins zur Benutzerregistrierung.

Um das Pro-Plugin zu erhalten, kaufen Sie einen der drei Preispläne von der offiziellen Website der Benutzerregistrierung.

Richten Sie dann User Registration Pro auf Ihrer Website ein. Wenn Sie dabei Hilfe benötigen, folgen Sie unserer Anleitung zur ordnungsgemäßen Installation der Benutzerregistrierung.

Sobald Sie das Plugin erfolgreich eingerichtet haben, können Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Installieren und aktivieren Sie das Add-on für erweiterte Felder

Benutzerregistrierung Pro gibt Ihnen Zugriff auf das Add-on „Erweiterte Felder“.

Wie der Name schon sagt, fügt es dem Formularersteller mehrere erweiterte Felder hinzu, einschließlich der Felder Select2 und Multi Select2.

Um sie zu verwenden, müssen Sie also das Add-on Advanced Fields installieren und aktivieren.

Sie können dies ganz einfach über die Seite Benutzerregistrierung >> Erweiterungen in Ihrem WordPress-Dashboard tun.

Suchen Sie hier nach dem Add-on und klicken Sie auf die Schaltfläche Add-on installieren . Wenn die Installation abgeschlossen ist, klicken Sie auf die Schaltfläche Aktivieren .

Jetzt können Sie die Select2-WordPress-Felder in Ihrem Registrierungsformular verwenden.

Schritt 3: Erstellen Sie ein neues Registrierungsformular mit Select2-Feldern

Lassen Sie uns im dritten Schritt ein neues Registrierungsformular erstellen, in dem Sie die Select2-Felder hinzufügen können.

Navigieren Sie zunächst zu Benutzerregistrierung >> Neu hinzufügen .

Wie Sie sehen können, können Sie für einen schnellen Start eine vorgefertigte Vorlage auswählen.

Die Benutzerregistrierung bietet verschiedene Vorlagen wie das Studentenregistrierungsformular , das Anzeigenübermittlungsformular und mehr.

Andernfalls können Sie das Registrierungsformular von Grund auf neu erstellen. Klicken Sie auf Von Grund auf neu beginnen und benennen Sie das Formular.

Sobald Sie auf Weiter klicken, werden Sie zum Drag-and-Drop-Formularersteller weitergeleitet.

Das Formular hat vier Standardfelder: Benutzername , Benutzer-E-Mail , Benutzerkennwort und Kennwort bestätigen .

Sie können die restlichen Felder, die Sie benötigen, von links in das Formular auf der rechten Seite ziehen. Sie können die Platzierung der Felder auch neu anordnen, indem Sie sie einfach verschieben.

Stellen Sie vor allem sicher, dass Sie dem Formular auch die Select2-Felder hinzufügen.

Die Benutzerregistrierung enthält zwei Arten von Select2-Feldern: Select2 und Multi Select2 . Sie können je nach Bedarf eines dieser Felder zum Formular hinzufügen.

Wenn Sie fertig sind, klicken Sie oben auf die Schaltfläche Formular aktualisieren .

Daher haben Sie ein neues Registrierungsformular mit dem Select2-WordPress-Feld erstellt.

Schritt 4: Passen Sie die Select2- und Multi Select2-Felder an

Das Beste an der Benutzerregistrierung ist, dass Sie alle Felder anpassen können, die Sie dem Formular hinzufügen.

Alles, was Sie tun müssen, ist auf das Feld zu klicken, das Sie bearbeiten möchten, und seine Feldoptionen werden auf der linken Seite geöffnet.

Klicken Sie also auf das hinzugefügte Select2-Feld. In den Feldoptionen können Sie die folgenden Einstellungen bearbeiten:

Allgemeine Einstellungen

In diesem Abschnitt können Sie die Feldbezeichnung, Beschreibung usw. bearbeiten. Sie können das Feld auch zu einem Pflichtfeld machen, seine Bezeichnung ausblenden oder die QuickInfo aktivieren.

Außerdem hilft Ihnen der Abschnitt Optionen beim Hinzufügen, Bearbeiten und Entfernen von Optionen. Klicken Sie auf + , um eine Option hinzuzufügen, und auf –, um sie zu entfernen. Sie können die Auswahlnamen ändern, indem Sie das Textfeld bearbeiten.

Darüber hinaus können Sie die Optionen neu anordnen, indem Sie sie nach oben oder unten ziehen. Und wenn Sie eine lange Liste von Optionen haben, können Sie sie mit dem Plugin in großen Mengen hinzufügen .

Erweiterte Einstellungen

Mit den erweiterten Einstellungen können Sie benutzerdefinierte CSS-Klassen für das Feld hinzufügen. Sie können auch zulassen, dass das Feld dynamisch ausgefüllt wird, indem Sie einen Parameternamen angeben.

Es ist wichtig zu beachten, dass die Feldoptionen für jedes Formularfeld unterschiedlich sind.

Beispielsweise hat das Feld Mehrfachauswahl2 ähnliche Allgemeine Einstellungen . Die erweiterten Einstellungen bieten jedoch zwei neue Optionen:

• Auswahllimit: Legen Sie die maximale Anzahl an Auswahlmöglichkeiten fest, die ein Benutzer auswählen kann.
• Alle auswählen: Ermöglichen Sie Benutzern, alle verfügbaren Optionen in der Liste auszuwählen.

Passen Sie also jedes Feld entsprechend an und klicken Sie auf die Schaltfläche Formular aktualisieren .

Schritt 5: Konfigurieren Sie die Registrierungsformulareinstellungen

Ihr Registrierungsformular ist erst vollständig, wenn Sie seine Formulareinstellungen konfiguriert haben.

Gehen Sie dazu im Builder auf die Registerkarte Formulareinstellungen . Hier können Sie zwei Arten von Einstellungen konfigurieren: Allgemein und Extras .

Im Abschnitt „Allgemein“ können Sie eine Benutzergenehmigungs- und Anmeldeoption , eine Standardbenutzerrolle , eine Formularvorlage usw. auswählen.

Sie können auch starke Passwörter und CAPTCHA-Unterstützung aktivieren. Abgesehen davon können Sie Redirect URL , Submit Button Text , Form Class und mehr festlegen.

In den Extras- Einstellungen können Sie tastaturfreundliches Formular aktivieren , Spamschutz durch Honeypot aktivieren , Whitelist/Blacklist-Domain aktivieren usw.

Wenn Sie mit der Konfiguration fertig sind, klicken Sie auf die Schaltfläche Formular aktualisieren .

Schritt 6: Zeigen Sie das benutzerdefinierte Registrierungsformular auf Ihrer Website an

Schließlich ist Ihr Registrierungsformular mit dem Select2-Feld bereit, auf Ihrer Website veröffentlicht zu werden.

Öffnen Sie dazu die vorhandene Seite oder den Beitrag, in dem Sie das benutzerdefinierte Formular anzeigen möchten.

Dadurch gelangen Sie zum Gutenberg-Editor. Klicken Sie hier auf den Blockeinfüger und fügen Sie den Block Benutzerregistrierung zur Seite hinzu.

Wählen Sie dann das Optionsfeld Registrierungsformular und wählen Sie das zuvor erstellte Formular aus der Dropdown-Liste aus.

Klicken Sie abschließend oben auf die Schaltfläche Aktualisieren , um das Formular auf Ihrer Website live zu schalten.

Wenn Sie eine neue Seite oder einen neuen Beitrag erstellen, befolgen Sie dieselben Schritte wie oben. Klicken Sie dann am Ende auf die Schaltfläche Veröffentlichen .

Glückwunsch! Jetzt hat Ihre Website ein benutzerdefiniertes Registrierungsformular mit dem Select2-WordPress-Feld.

Abschluss!

Damit ist unser Artikel zum Hinzufügen von Select2-WordPress-Feldern in einem Registrierungsformular abgeschlossen.

Zusammenfassend können Sie Select2-Felder anstelle der standardmäßigen Select-Felder hinzufügen, um erweiterte Registrierungsformulare zu erstellen.

Und das Benutzerregistrierungs-Plugin hilft Ihnen dabei, dies problemlos zu tun. Alles, was Sie tun müssen, ist, Ihrem Formular die Felder Select2 und Multi Select2 hinzuzufügen und sie anzupassen.

Darüber hinaus ist die Benutzerregistrierung ebenso hilfreich, um Spam-Registrierungen zu verhindern, die Standard-Anmelde-URL in eine benutzerdefinierte URL zu ändern und vieles mehr.

Erfahren Sie mehr über dieses leistungsstarke Plugin in unserem Blog. Sie können sich auch die Video-Tutorials auf unserem YouTube-Kanal ansehen.

Folgen Sie uns auch auf Twitter und Facebook, um über neue Artikel auf dem Laufenden zu bleiben.