So fügen Sie einen Zahlenbereich-Schieberegler in WordPress-Formulare ein (kostenlos)

Zahlenbereichsregler in einem Formular sehen wirklich cool aus und das allein ist ein wichtiger Vorteil, da Besucher Ihnen eher vertrauen, wenn Sie visuell beeindruckende Formulare verwenden, die Professionalität widerspiegeln.

Außerdem verleihen Zahlenbereich-Schieberegler Ihren Formularen ein höheres Maß an Interaktivität. Interaktivität schafft Engagement, und es sind Ihre engagierten Besucher, die letztendlich konvertieren.

Wie fügen Sie also einen Zahlenbereich-Schieberegler in Ihre WordPress-Formulare ein? Ich zeige Ihnen hier den einfachsten Weg, wie Sie dies erreichen können.

Jetzt Formular mit Zahlenbereich-Schieberegler erstellen

Was ist ein WordPress-Bereichsregler?

Ein WordPress-Bereichsschieberegler ist ein Formularfeld, mit dem Benutzer eine Zahl auswählen können, indem sie einen Griff entlang einer Leiste ziehen, anstatt sie einzugeben.

Sie legen den niedrigsten und höchsten Wert fest, den das Feld akzeptiert, und Ihr Besucher wählt jede Zahl innerhalb dieses Bereichs aus. Diese kleine Änderung bewirkt einige nützliche Dinge:

• Mehr ausgefüllte Felder: Ziehen ist schneller als Tippen, sodass die Leute das Feld seltener leer lassen oder überspringen.
• Bessere Antwortqualität: Sie erhalten eine tatsächliche Zahl anstelle einer vagen Vermutung, was den Schieberegler zu einem wirklich nützlichen Lead-Generierungs-Tool macht, wenn Sie nachfassen.
• Funktioniert auf Handys: Ein Schiebereglergriff ist auf einem Touchscreen leichter zu treffen als eine Zahleneingabe, und er sieht auf jedem WordPress-Theme gut aus, das Sie verwenden.
• Nichts zu lernen: Ihr Besucher zieht nach links oder rechts, sodass es kein Format gibt, das falsch gemacht werden kann, und keine Validierungsfehler, auf die man stoßen könnte.

WPForms nennt dieses Feld Number Slider, und es befindet sich in der Gruppe Standardfelder des Formular-Builders. Befolgen Sie die nachstehenden Schritte, um loszulegen:

So fügen Sie einen Zahlenbereichs-Schieberegler in WordPress hinzu

Schritt 1: Installieren Sie das WPForms-Plugin

Der einfachste Weg, einen Zahlenbereichs-Schieberegler in Ihr Formular einzufügen, ist die Verwendung von WPForms, dem anfängerfreundlichsten WordPress-Formular-Plugin, das mit einer Fülle von erweiterten Funktionen zur Formularerstellung ausgestattet ist.

Was mir an WPForms am besten gefällt, ist, dass es ein natives Number Slider-Feld bietet. Sie ziehen es hinein, legen ein Minimum und ein Maximum fest, und die Beschriftung unter der Leiste beginnt, den ausgewählten Wert von selbst anzuzeigen.

Während Sie WPForms Lite (die kostenlose Version) verwenden können, um ein Formular mit dem Zahlenbereichs-Schieberegler zu erstellen, werde ich für dieses Tutorial WPForms Pro verwenden, da dies unzählige zusätzliche Möglichkeiten eröffnet, das Schiebereglerfeld auf aufregende Weise zu nutzen.

Wenn Sie nicht wissen, wie Sie das Plugin installieren, klicken Sie auf diese Anleitung für WPForms-Installationsanweisungen. Dies dauert nur wenige Minuten. Wenn WPForms auf Ihrer Website einsatzbereit ist, können Sie mit der Erstellung eines Formulars mit dem numerischen Schieberegler beginnen.

Erstellen Sie jetzt Ihr WordPress-Formular

Schritt 2: Erstellen Sie ein einfaches Formular

Navigieren Sie in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen, um ein neues Formular zu erstellen.

Sofort sehen Sie den Formulareinrichtungsbildschirm in Ihrem Fenster. Hier können Sie einen Namen für Ihr Formular eingeben und eine Vorlage auswählen.

Sie können Ihr Formular komplett von Grund auf neu erstellen (beginnend mit einer leeren Vorlage) oder eine fertige Vorlage verwenden, um die Dinge für Sie noch schneller zu machen.

Für diesen Beitrag verwende ich die Vorlage Einfaches Kontaktformular , um zu demonstrieren, wie Sie mit einer Vorlage zusätzliche Felder wie den Zahlen-Schieberegler einfügen können.

Nachdem Sie die Vorlage ausgewählt haben, gelangen Sie zur Formular-Builder-Oberfläche, wo Sie entweder direkt mit dem Einbetten des Formulars auf Ihrer Website fortfahren oder es weiter anpassen können.

Im nächsten Schritt untersuchen wir das Feld für den Zahlenbereich-Schieberegler und seine zugehörigen Einstellungen.

Schritt 3: Fügen Sie einen Zahlenbereich-Schieberegler hinzu

Fügen wir nun einen Zahlenbereichs-Schieberegler zu Ihrem Formular hinzu. Sie können das Feld Number Slider einfach aus dem Menü Standardfelder auf der linken Seite in Ihr Formular auf der rechten Seite ziehen.

Um einige Einstellungen und das Verhalten dieses Feldes zu ändern, klicken Sie auf den Zahlen-Schieberegler, den Sie gerade hinzugefügt haben. Sie sehen nun dessen Feldoptionen im linken Bereich.

Diese Optionen ermöglichen es Ihnen, Folgendes zu ändern:

• Beschriftung – Verwenden Sie diese, um einen Namen hinzuzufügen, der die vom Schieberegler gesteuerte Menge darstellt.
• Beschreibung – Dies hilft, zusätzlichen Kontext zu liefern, falls erforderlich.
• Wert – Legen Sie die minimalen und maximalen auswählbaren Werte für den Schieberegler fest.
• Standardwert – Dies ist der Wert, den das Feld beim ersten Laden des Formulars annimmt.
• Schrittweite – Ermöglicht die Auswahl der Schrittweite zwischen jedem wählbaren Wert.

Zuletzt können Sie Ihrer Zahlenbereich-Schieberegler-Formular beliebige zusätzliche Felder hinzufügen, indem Sie sie von der linken zur rechten Seite ziehen.

Wenn Sie mit der Anpassung Ihres Zahlenbereich-Schieberegler-Formulars fertig sind, klicken Sie oben rechts auf Speichern.

Schritt 4: Konfigurieren Sie Formularbenachrichtigungen & Bestätigungen

WPForms sendet Ihnen automatisch eine Benachrichtigung, jedes Mal wenn Ihr Formular gesendet wird. Sie können Formularbenachrichtigungen anpassen, indem Sie zu Einstellungen » Benachrichtigungen gehen.

Hier können Sie die Empfänger Ihrer Benachrichtigung auswählen (dies kann Ihre Admin-E-Mail, die Person, die das Formular sendet, oder jede andere fest codierte E-Mail sein, die Sie eingeben möchten). WPForms Basic- und höher-Benutzer können auch mehrere Formularbenachrichtigungen erstellen.

Während Sie dabei sind, empfehle ich Ihnen auch, Ihre Formularbestätigungen zu überprüfen. Die Bestätigung erscheint unmittelbar nach dem Absenden eines Formulars. Dies kann eine einfache Nachricht sein oder eine Weiterleitung zu einer anderen Seite, je nach Ihrer Strategie. Sie können Bestätigungen anpassen, indem Sie zu Einstellungen » Bestätigungen gehen.

Sie können dann den Bestätigungstyp auswählen (Nachricht, Seite anzeigen, URL weiterleiten), den Sie wünschen, und die Nachricht und andere Details nach Bedarf eingeben.

Wenn Sie fertig sind, drücken Sie erneut auf Speichern oben im Formular-Generator. Es ist Zeit, Ihr Formular einzubetten!

Schritt 5: Fügen Sie Ihr Formular mit Zahlenbereich-Schieberegler zu Ihrer Website hinzu

Nachdem Sie Ihr Formular erstellt haben, müssen Sie es zu Ihrer WordPress-Website hinzufügen. WPForms ermöglicht es Ihnen, Ihre Formulare an vielen Stellen auf Ihrer Website hinzuzufügen, einschließlich Ihrer Blogbeiträge, Seiten und sogar Seitenleisten-Widgets.

Werfen wir einen Blick auf die gängigste Platzierungsoption: das Einbetten in Seiten/Beiträge. Klicken Sie dazu zunächst auf die Schaltfläche Einbetten oben im Formular-Generator.

Als Nächstes sehen Sie ein Modal, das Sie fragt, ob Sie dieses Formular in eine neue oder eine vorhandene Seite einbetten möchten. Nehmen wir die letztere Option und klicken Sie auf Neue Seite erstellen.

Geben Sie Ihrer Seite einen Namen und drücken Sie dann die Schaltfläche Los geht's. Sie befinden sich jetzt im WordPress-Blockeditor mit dem eingebetteten Formular.

Wenn Sie möchten, können Sie Ihr Formular gestalten mit dem Blockeditor ohne Code. Wenn Sie bereit sind, drücken Sie die Schaltfläche Veröffentlichen, um Ihre Seite mit dem eingebetteten Formular live zu schalten.

Sie können nun Ihren Zahlenbereich-Schieberegler auf Ihrer Website sehen, und Besucher können ihn sofort und ohne Aufwand nutzen.

Um Formulareinträge nach dem Absenden anzuzeigen, lesen Sie diese vollständige Anleitung zu Formulareinträgen. Sie können beispielsweise Formulareinträge anzeigen, suchen, filtern, drucken und löschen.

Und da haben Sie es! Sie wissen jetzt, wie Sie mit dem WPForms-Plugin ein Formular mit einem Zahlenbereich-Schieberegler in WordPress erstellen, damit Sie ganz einfach detaillierte Formularübermittlungen von Ihren Website-Besuchern erhalten können!

FAQs zu WordPress-Bereichsreglern

Ein WordPress-Schieberegler wirft jedes Mal die gleichen Fragen auf, hauptsächlich darüber, was die kostenlose Version abdeckt und wo die Grenzen des Feldes liegen. Dies sind die Fragen, die am häufigsten auftreten.

Ist der Zahlen-Schieberegler in WPForms kostenlos?

Ja, der Zahlen-Schieberegler ist ein Standardfeld, daher ist er in WPForms Lite kostenlos enthalten und benötigt kein separates Add-on.

Sie benötigen nur eine kostenpflichtige Lizenz für das, was Sie darum herum aufbauen, insbesondere für bedingte Logik ab Basic und höher sowie für Berechnungen ab Pro.

Kann ich einen Standardstartwert für den Schieberegler festlegen?

Das können Sie, und die Einstellung heißt Standardwert und befindet sich auf der Registerkarte Erweitert der Feldoptionen. Sie entspricht Ihrem Mindestwert, bis Sie ihn ändern. Geben Sie also eine beliebige ganze Zahl innerhalb Ihres Bereichs ein, um die Startposition zu verschieben.

Kann ich den Schieberegler auf bestimmte Schritte einrasten lassen?

Genau dafür ist die Einstellung Schrittweite gedacht, da sie die Schrittgröße zwischen einem wählbaren Wert und dem nächsten steuert.

Eine Schrittweite von 5 bei einem Schieberegler von 0 bis 100 ergibt 0, 5, 10 und so weiter. Stellen Sie einfach sicher, dass Ihre Schrittweite gleichmäßig in Ihren Bereich teilbar ist, sonst stoppt der Griff vor Ihrem Maximum.

Wie zeige ich den aktuell ausgewählten Wert neben dem Schieberegler an?

Die Einstellung Wertanzeige auf der Registerkarte Erweitert kümmert sich darum und ist standardmäßig aktiviert. Der Text lautet Ausgewählter Wert: {value}, wobei {value} live aktualisiert wird, während Ihr Besucher den Griff zieht.

Sie können die Formulierung um diesen Platzhalter herum beliebig umschreiben, so fügen Sie ein Währungssymbol oder eine Einheitenbezeichnung hinzu.

Kann ich einen Bereichsregler mit zwei Reglern für ein Minimum und Maximum verwenden?

Nicht mit einem einzigen Feld, da der Zahlen-Schieberegler einen Griff hat und Sie den Bereich definieren, über den er sich bewegt.

Wenn Sie möchten, dass Ihr Besucher einen Bereich auswählt, fügen Sie zwei Number Slider-Felder hinzu, die mit Minimum und Maximum beschriftet sind. Beide Werte werden separat in einem Eintrag gespeichert, sodass sie später leicht zu lesen und zu bearbeiten sind.

Unterstützt der Zahlen-Schieberegler Dezimalstellen?

Nein, das Feld funktioniert nur mit ganzen Zahlen, und das gilt für den Minimal-, Maximal-, Standardwert und die Schrittweite gleichermaßen.

Wenn Sie Dezimalgenauigkeit benötigen, verwenden Sie stattdessen das Numbers-Feld. Es verfügt über eine eigene Einstellung Range für Minimal- und Maximalwerte, und Ihr Besucher gibt die Zahl ein, anstatt sie zu ziehen.

Wie passe ich das Aussehen meines Schiebereglers an?

Die Schiebereglerleiste und der Griff übernehmen ihre Farbe von Ihrer Submit-Schaltfläche, zusammen mit der Fortschrittsanzeige und den Radio-Punkten, was alles im Formular visuell konsistent hält.

Wenn Sie also die Farbe der Submit-Schaltfläche in den Styling-Optionen des Block-Editors ändern, ändert sich auch Ihr Schieberegler. Sie können auch die Field Size zwischen Klein, Mittel und Groß umschalten und die Beschriftung im Formular-Builder bearbeiten.

Als Nächstes: Erstellen Sie ein Rechnerformular mit Ihrem Schieberegler

Der offensichtliche nächste Schritt ist, diesen Schieberegler in einer Formel zu verwenden, sodass sich der Preis in Echtzeit bewegt, während Ihr Besucher sich entscheidet.

Das ist der Grund, warum die meisten Leute überhaupt einen Schieberegler zu einem Formular hinzufügen, und es verwandelt ein Datenerfassungsfeld in ein Verkaufsfeld.

Wenn Sie den Schieberegler lieber auf Feedback als auf Preisgestaltung richten möchten, zeigen diese NPS-Umfragebeispiele, wie eine Skala von 0 bis 10 als Zufriedenheitsfrage funktioniert und was Sie mit den erhaltenen Antworten tun können.

Fügen Sie jetzt einen Number Range Slider zu Ihrem Formular hinzu

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.