Verwendung des Zahlenschiebereglerfeldes

Möchten Sie Ihren WordPress-Formularen einen Number Slider hinzufügen? Mit einem Number Slider-Feld können Ihre Benutzer einfach auf einen Selektor klicken und ihn ziehen, um einen Wert auf einer Zahlenreihe auszuwählen.

Dieses Tutorial zeigt Ihnen, wie Sie das Number Slider-Feld in WPForms verwenden können.

---

Bevor Sie loslegen, müssen Sie zunächst sicherstellen, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben. Dann können Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, um auf den Formularersteller zuzugreifen.

Hinzufügen eines Zahlenschiebereglerfelds zu Ihrem Formular

Nachdem Sie den Formularersteller geöffnet haben, suchen Sie unter Standardfelder nach der Option Zahlenschieber. Klicken Sie einfach darauf oder ziehen Sie sie per Drag & Drop in den Vorschaubereich, um sie Ihrem Formular hinzuzufügen.

Konfigurieren von Optionen für Zahlenschiebereglerfelder

Sobald Sie das Feld zu Ihrem Formular hinzugefügt haben, klicken Sie es im Vorschaubereich an, um das Feldoptionen-Panel zu öffnen. Im Folgenden werden wir die einzelnen Einstellungen, die hier verfügbar sind, am Beispiel eines Formulars für eine Restaurantreservierung durchgehen.

Etikett und Beschreibung

In den Optionen des Feldes Zahlenschieberegler können Sie die Beschriftung und Beschreibung anpassen. Die Beschriftung lautet standardmäßig "Zahlenschieberegler", aber Sie können sie nach Belieben ändern.

Für unser Beispiel einer Restaurantreservierung ändern wir die Beschriftung in "Wie viele Personen sind in Ihrer Gruppe?"

Die Feldbeschreibung bietet Ihnen die Möglichkeit, Ihrem Formular zusätzlichen Text hinzuzufügen, z. B. eine Anleitung zur Verwendung des Zahlenschiebers. Sie können jeden beliebigen Text in das vorgesehene Feld eingeben.

Mindest- und Höchstwerte

Sie können auch die Mindest- und Höchstwerte, die ein Benutzer auswählen kann, unter den Werteinstellungen anpassen. Die Standardwerte liegen zwischen 0 und 10, aber Sie können diese durch beliebige ganze Zahlen ersetzen.

Für unser Beispiel setzen wir das Minimum auf 1 Person und das Maximum auf 20 Personen.

Erweiterte Optionen für Nummernschieber konfigurieren

Sie können die Feldgröße, den Standardwert und den Inkrementwert auf der Registerkarte Erweitert des Feldoptionsfensters anpassen. Klicken Sie im Formularersteller darauf, um auf diese zusätzlichen Einstellungen zuzugreifen.

Feldgröße

Standardmäßig ist die Feldgröße auf Mittel eingestellt. Sie haben jedoch die Möglichkeit, die Länge Ihres Schiebereglers auf Klein, Mittel oder Groß zu ändern.

Nachstehend finden Sie Beispiele dafür, wie die einzelnen Feldgrößen im Frontend Ihrer Website aussehen werden:

Standardwert

Der Standardwert legt fest, auf welchen Wert der Schieberegler gesetzt wird, wenn Benutzer Ihr Formular öffnen. Er wird automatisch auf den Mindestwert gesetzt, den Sie in den Feldoptionen auswählen.

Sie können ihn jedoch auf eine beliebige ganze Zahl innerhalb des Bereichs Ihres Zahlenschiebers einstellen, indem Sie den gewünschten Wert in das Feld Standardwert eingeben.

Wert Anzeige

By default, the label beneath your slider will read, “Selected Value: {value}.” The {value} tag pulls the number that is currently selected by the user so they can check that it’s correct.

Sie können den Inhalt des Etiketts unter Wertanzeige ändern.

Wir empfehlen jedoch, den {value}-Tag beizubehalten, damit die Benutzer ihre Auswahl bestätigen können.

Inkrement

Diese Einstellung bestimmt die Schrittgröße für jede Erhöhung der Schiebereglerposition. Wenn Sie diese Einstellung zum Beispiel auf 2 gesetzt haben, wird bei jeder Erhöhung der Wert um 2 erhöht (0, 2, 4, 6 usw.).

Standardmäßig ist der Wert für die Schrittweite auf 1 eingestellt, Sie können ihn jedoch unter der Einstellung Schrittweite auf eine beliebige ganze Zahl ändern.

Konfigurieren der bedingten Logik

Wenn Sie möchten, können Sie Benutzern, die einen bestimmten Wert auswählen, auch eine Nachricht mit bedingter Logik anzeigen.

In unserem Beispiel für eine Restaurantreservierung zeigen wir Nutzern, die angeben, dass ihre Gruppe aus mehr als 10 Personen besteht, eine Nachricht an. In dieser Nachricht teilen wir ihnen mit, dass automatisch 20 % Trinkgeld auf ihre Rechnung aufgeschlagen werden.

Um dies einzurichten, fügen wir zunächst ein HTML-Feld mit dem Text "Note: A 20% gratuity will automatically be added to your bill for parties over 10" in unser Formular ein.

Als Nächstes richten wir eine bedingte Logik ein, damit dieses HTML-Feld nur angezeigt wird, wenn ein Benutzer mit dem Zahlenschieberegler eine Zahl größer als 10 auswählt. Klicken Sie dazu auf die Registerkarte " Intelligente Logik" im Bereich "Feldoptionen" für das HTML-Feld und schalten Sie die Einstellung " Bedingte Logik aktivieren" ein.

Legen Sie dann die Regel fest, die bestimmt, wann das Feld angezeigt wird. Für dieses Beispiel legen wir die Logik so fest, dass sie lautet: "Dieses Feldanzeigen, wenn Wie viele Personen nehmen an Ihrer Party teil? größer als 10 ist".

Das HTML-Feld bleibt ausgeblendet, es sei denn, der Benutzer wählt im Feld Zahlenschieber einen Wert größer als 10 aus.

Das war's! Sie können jetzt für jedes Ihrer Formulare ein Zahlenschiebereglerfeld hinzufügen und anpassen.

Möchten Sie nun erfahren, wie Sie die gesammelten Daten analysieren können? In unserem Tutorial zum Addon "Umfragen und Abstimmungen" erfahren Sie, wie Sie Eingabestatistiken anzeigen, Berichte erstellen und vieles mehr.