Möchten Sie erfahren, wie Sie Eingabemasken für die Formulare Ihrer Website erstellen können?
Die Möglichkeit, die Art und Weise der Dateneingabe in Ihre WordPress-Formulare anzupassen, erleichtert die Benutzererfahrung und stellt sicher, dass jedes Mal die richtigen Daten in Ihr Formular eingegeben werden.
Erstellen Sie jetzt Ihr WordPress-Formular
In diesem Artikel
Was ist eine Eingabemaske?
Eingabemasken sind eine Möglichkeit, die Zeichen einzuschränken, die in ein Feld eingegeben werden können.
Sie können das Feld zum Beispiel darauf beschränken, nur Zahlen oder Text zu akzeptieren. Möglicherweise möchten Sie auch die Anzahl der Zeichen einschränken.
Eingabemasken eignen sich hervorragend für Dinge wie Telefonnummern oder Benutzernamen in sozialen Medien, die immer das gleiche Format haben.
Wie Eingabemasken funktionieren
Eingabemasken verwenden die folgenden Zeichen, um eine Vorlage für die zu akzeptierenden Daten zu erstellen:
- 9 steht für eine beliebige Zahl (0-9)
- a steht für einen beliebigen Klein- oder Großbuchstaben
- A schränkt die akzeptierten Zeichen auf Großbuchstaben ein
- & schränkt das Feld auf alphanumerische Großbuchstaben (0-9 oder A-Z) ein
- * erlaubt die Eingabe eines beliebigen Buchstabens oder einer Zahl (0-9, a-z oder A-Z)
Sie können auch Dinge wie Bindestriche oder Klammern ( ) in Ihre Eingabemaske einfügen. Dies ist besonders hilfreich, wenn Sie möchten, dass die Besucher ihre Telefonnummer in ein Formular auf Ihrer Website eingeben.
Wenn Sie optionale Zeichen hinzufügen möchten, nachdem Sie bereits die Klammern verwendet haben, sollten Sie diese in eckige Klammern [ ] setzen.
Für diese Eingabemaske wären beispielsweise mindestens 4 Zeichen erforderlich, aber auch längere Eingaben sind zulässig:
**** [***********]
Beispiele für Eingabemasken
Nun, da Sie wissen, was eine Eingabemaske ist, ist es an der Zeit, einen Blick auf einige der grundlegendsten Beispiele zu werfen, die Sie in Ihren WordPress-Formularen verwenden können.
Vereinigte Staaten Postleitzahl:
- Maske:
99999 - Beispiel Benutzereingabe: 89023
Postleitzahl der Vereinigten Staaten mit optionalem Plus vier:
- Maske:
99999 [-9999] - Beispiel Benutzereingabe: 89023 oder 89023-5678
Benutzername mit 6-8 Buchstaben (erster Buchstabe groß, der Rest klein):
- Maske:
Aaaaaa [aa] - Beispiel Benutzereingabe: Minnie oder Minniems
X (früher bekannt als Twitter) Benutzername mit 4-15 Zahlen oder Groß-/Kleinbuchstaben:
- Maske:
@**** [***********] - Beispiel Benutzereingabe: @easywpforms
Wenn Sie Hilfe bei fortgeschrittenen Eingabemaskensymbolen benötigen, sehen Sie sich dieses Tutorial zum Hinzufügen von Eingabemasken zu Ihren WordPress-Formularen an.
Erstellen von Eingabemasken für Formularfelder
Nun, da Sie eine gute Vorstellung davon haben, was Eingabemasken sind, können wir eine erstellen.
1. Ein neues WordPress-Formular erstellen
Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Für weitere Details folgen Sie dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.
Als nächstes müssen Sie ein neues Formular erstellen. Wir empfehlen die Verwendung des einfachen Kontaktformulars als einfachen Ausgangspunkt für Tests.
2. Einzeiliges Textfeld hinzufügen
Um eine Eingabemaske zu Ihrem Kontaktformular hinzuzufügen, müssen Sie ein einzeiliges Textformularfeld hinzufügen.
Ziehen Sie das Formularfeld aus dem linken Fenster auf die Formularvorschau.
Klicken Sie anschließend auf das Formularfeld auf der rechten Seite, um das Feldoptionen-Panel zu öffnen.
Klicken Sie auf die Registerkarte Erweitert. Hier können Sie Ihre eigene Eingabemaske definieren.
In unserem Beispiel bitten wir die Personen, die unser Formular ausfüllen, ihre Postleitzahl in den USA einzugeben:
Diese Maske schränkt das Feld so ein, dass es nur 5 Zahlen zulässt.
Klicken Sie auf Speichern.
3. Fügen Sie Ihr Formular zu Ihrer Website hinzu
Nun, da das Kontaktformular mit einer Eingabemaske angepasst wurde, ist es an der Zeit, das Formular auf Ihrer Website einzubetten.
Klicken Sie auf die Schaltfläche Einbetten und wählen Sie den Speicherort für Ihr Formular.
Veröffentlichen Sie dann Ihren Beitrag oder Ihre Seite, damit Ihr Kontaktformular bei den Besuchern Ihrer Website angezeigt wird. Schauen Sie sich das an:
Beachten Sie die Unterstriche, die den Benutzer dazu auffordern, die Eingabe seiner Postleitzahl abzuschließen.
Erstellen Sie jetzt Ihr WordPress-Formular
Übernehmen Sie als Nächstes die Kontrolle über Formularübermittlungen
Und das war's schon! Sie wissen jetzt, wie Sie Eingabemasken für die Formulare Ihrer Website erstellen können.
Wenn Sie nach weiteren Möglichkeiten suchen, die Funktionsweise Ihrer Formulare zu steuern, sollten Sie sich diese Ressourcen ansehen:
- Begrenzen Sie Formulareinträge nach Datum mit dieser einfachen Anleitung für das Addon Form Locker
- Halten Sie minderjährige Besucher davon ab, Ihre Formulare mit einem Plugin zur Altersüberprüfung auszufüllen.
Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.
Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.
Kann ich eine Mindest-/Höchstlänge z.B. für ein einzeiliges Feld definieren und wird dies korrekt validiert?
Hallo Christian,
Wir haben derzeit keine eingebaute Option dafür, aber wenn Sie Lust auf eigenen Code haben, finden Sie hier eine Anleitung für Entwickler, wie Sie eine maximale Zeichenanzahl festlegen können.
Wenn Sie das ausprobieren möchten, finden Sie hier eine zusätzliche Anleitung zum Hinzufügen von benutzerdefiniertem Code wie diesem zu Ihrer Website.
Ich hoffe, das hilft 🙂 .
Was passiert, wenn Sie kein Feld namens Eingabemaske haben? Es gibt nichts unter dem Feld CSS-Klassen unter Erweiterte Optionen?
Hallo Dianne,
Ich entschuldige mich für etwaige Probleme damit! Wenn Sie eine Eingabemaske hinzufügen, stellen Sie sicher, dass Sie ein einzeiliges Textfeld verwenden (dies ist derzeit der einzige Feldtyp, der Eingabemasken zulässt). Außerdem ist dies eine neuere Funktion, also stellen Sie sicher, dass Ihr WPForms-Plugin vollständig auf dem neuesten Stand ist.
Wenn Sie dies ausprobieren und immer noch nicht die Optionen sehen, die Sie erwarten, kontaktieren Sie uns bitte, damit wir Ihnen weiterhelfen können. Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support, so senden Sie bitte ein Support-Ticket.
Andernfalls bieten wir begrenzten kostenlosen Support im WPForms Lite WordPress.org Support-Forum.
Danke 🙂 .
Hallo, in diesem Artikel: https://wpforms.com/docs/how-to-use-custom-input-masks/
Sie verwenden die Beispieleingabemaske für eine E-Mail-Adresse unter "mysite.com".
Mask: *[*{0,50}]@mysite.com
Example Input: [email protected] or [email protected]
Was aber, wenn Ihre Website den Buchstaben "a" enthält? Zum Beispiel...
Using this layer mask: *[*{0,50}]@mydomain.com
actually renders a field that has a blank for the “a” in domain.
Example input: _______@mydom_in.com
Wie kann ich die Ebenenmaske so formatieren, dass die gesamte Zeichenfolge "mydomain.com" erhalten bleibt?
Vielen Dank im Voraus für Ihre Hilfe!
Hallo Re,
Es tut mir leid, dass Sie damit Probleme haben! Ich habe das von Ihnen beschriebene Problem repliziert und an unser Team weitergeleitet, damit wir an einer Lösung arbeiten können. Danke, dass Sie uns informiert haben, damit wir das Problem beheben können 🙂 .
Hallo zusammen. Ich möchte die Eingabemaske verwenden, um die Zeicheneingabe in einigen meiner Felder zu begrenzen.
I’m using this mask: *[*{0,30}].
Allerdings werden die "Leerzeichen" nicht als Zeichen verwendet.
Welche Eingabemaske kann ich verwenden, um die Leerzeichen als Zeichen in meine 30-Zeichen-Grenze einzubeziehen?
Hallo Alicia,
Unsere Eingabemasken sehen derzeit kein "Leerzeichen" in dieser Form vor. Sie könnten stattdessen erwägen, diese Zeichenbegrenzung mit ein wenig benutzerdefiniertem Code hinzuzufügen(hier ist unser Dokument mit Details).
Der Code in diesem Dokument zählt Leerzeichen als Zeichen, sollte also eher so funktionieren, wie Sie es sich vorstellen.
Und falls es Ihnen weiterhilft: Hier erfahren Sie, wie Sie einen solchen Code auf Ihrer Website einfügen können.
Ich hoffe, das hilft! 🙂
Ich habe das gleiche Problem wie RE CARLSON
-
Aber was ist, wenn Ihre Website den Buchstaben "a" enthält?
-
Haben Sie eine Lösung für dieses Problem?
Danke!
Hallo Allan,
Ich habe gute Nachrichten - wir haben eine Lösung für dieses Problem 🙂
Um ein "a" hinzuzufügen, ohne dass es Teil des Eingabebereichs wird, können Sie es mit "a" ausblenden. Wenn Sie zum Beispiel Folgendes als Eingabemaske eingeben würden: "Dies ist \\a Test aaa", dann würde es am Ende heißen: "dies ist ein Test ___".
Stellen Sie also sicher, dass Sie den doppelten Backslash vor ein A, ein a oder eine 9 setzen, die Sie unverändert lassen möchten (und nicht in ein _ umwandeln wollen).
Ich hoffe, das hilft! 🙂
hallo,
Ich brauche alphanumerische Großbuchstaben (0-9 oder A-Z), die mit einem Leerzeichen zwischen den Zeichen kombiniert werden. Offensichtlich erlaubt "&" keine Abstände
Hallo Elyas,
Wir haben kein spezielles Zeichen für Leerzeichen; stattdessen können Sie einfach ein Leerzeichen zwischen die gewünschten &-Zeichen einfügen, so dass das Feld für die Eingabemaske "&&&&" lauten kann.
Ich hoffe, das hilft! 🙂
Wie kann ich tun Feld akzeptieren nur beginnend mit nur 6-9 Zahlenbereich. Ich bin mit gekauften WPForms Basic.
Beispiel
7898981226
8985607458
9989878774
Hallo Munaf!
Sie können eine benutzerdefinierte Eingabemaske für das Feld "Einzeiliger Text" erstellen, allerdings gibt es keine eingebaute Option, um den Zahlenbereich dort zu verwenden.
So können Sie es zum Beispiel so haben "\\799999" und es wird nur "7" am Anfang erlauben und dann 5 weitere beliebige Ziffern, aber wir haben keine Regeln, um 7 ODER 8 ODER 9 dort am Anfang zu wählen, leider.
Und für den Fall, dass es hilft, haben wir eine weitere große Tutorial, wie man benutzerdefinierte Eingabemaske in WPForms hier verwenden
Ich entschuldige mich für jede Verwirrung!
Schönen Tag noch 🙂
Estou iniciando o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implantadas, contudo tentando personalizar uma mascara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” em um campo de “texto de linha unica” percebo que não são aceitos caracteres especiais simples como ? . ou / ; isso é uma limitação proposital impostas a usuários gratuitos ou poderiam me informar por qual simbolo deveria substituir o de * para permitir a entrada de caracteres especiais na mascara.
Hallo Rodrigo,
Ich bitte um Entschuldigung, aber Ihre Frage verwirrt mich ein wenig. Wenn Sie eine Chance bekommen, können Sie bitte klären, oder wenn Sie unsere kostenlose Plugin, WPForms Lite, besuchen Sie bitte die Support-Foren, wo wir kostenlose begrenzte Unterstützung bieten.
Danke! 🙂
Hallo, ist es möglich, nach allen 3 Ziffern ein Komma zu setzen? z.B. 99.999.999
Hallo Waqas- Wenn Sie die Anzahl der Ziffern festgelegt haben, ist es machbar. Zum Beispiel zeigt diese Eingabemaske 9 Ziffern und ein Komma nach jeweils 3 Ziffern 999\,999\,999
Ich hoffe, das hilft!
Wie kann ich Sonderzeichen in meiner Eingabemaske zulassen?
Hey Afif - Wir haben einige fortgeschrittene Eingabemasken-Tutorials in diesem Artikel, die erklären, wie man einige Zeichen hinzufügt.
Wenn Sie weitere Hilfe benötigen, wenden Sie sich bitte an den Support, damit wir Ihnen helfen können. Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support, so senden Sie bitte ein Support-Ticket. Andernfalls bieten wir begrenzte kostenlose Unterstützung in der WPForms Lite WordPress.org Support-Forum.
Danke 🙂 .
Ich möchte keine unzulässigen Zeichen in meinem einzeiligen Textfeld
Hey Rahul - Ich würde vorschlagen, einen Blick auf dieses Tutorial zu werfen, wie Sie Sonderzeichen in Ihren Formularfeldern einschränken können.
Ich hoffe, das hilft!
Wie kann ich 15 Buchstaben oder weniger in meiner Eingabemaske zulassen?
Hallo Yusuf- Um die Regeln für eine benutzerdefinierte Eingabemaske zu erstellen, müssen Sie einen bestimmten Satz von Symbolen verwenden . (Bitte denken Sie daran, das entsprechende Symbol 15 Mal hinzuzufügen).
Ich hoffe, das hilft 🙂 .
Hallo, meine Eingabemasken scheinen nicht mehr zu funktionieren, die Textfelder lassen einfach alles schreiben, obwohl die Masken aktiv sind. Jede Hilfe bitte? thnk u.
Hallo Antonio- Das tut uns leid! Wir helfen Ihnen gerne weiter.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserer E-Mail-Support, so senden Sie bitte ein Support-Ticket. Andernfalls bieten wir begrenzte kostenlose Unterstützung in der WPForms Lite WordPress.org Support-Forum.
Danke! 🙂
Hallo,
Ich erstelle ein Namensfeld mit einzeiligem Text und nur Alphabete und Leerzeichen sollen hinzugefügt werden. Dafür habe ich input mast als a{1,50} hinzugefügt. Dies akzeptiert Alphabete, aber Leerzeichen können nicht hinzugefügt werden, Bitte geben Sie mir eine Lösung für diese.
Hallo Amrita! Ich bitte um Entschuldigung, aber Eingabemasken wären für diese Art von Anwendungsfall nicht geeignet, da sie dazu gedacht sind, der Eingabe auch eine bestimmte Struktur zu geben, z. B. eine Telefonnummer oder eine ID-Nummer. Leerzeichen können in einer Eingabemaske nicht verwendet werden.
Um das zu tun, wonach Sie suchen, wäre benutzerdefinierte Kodierung (in der Regel jQuery oder JavaScript) erforderlich, aber ich entschuldige mich, da wir nicht in der Lage sind, Unterstützung für diesen Grad der Anpassung zu bieten. Dieser Thread könnte Ihnen jedoch einige Ideen liefern.
Es tut mir leid, dass wir keine Lösung für dieses Problem anbieten können, aber wenn Sie weitere Fragen haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Falls nicht, zögern Sie nicht, uns in unseren Support-Foren Fragen zu stellen.
Hallo Leute
Wie kann ich eine Maske auf diese Weise erstellen?
+55 (99) 9 9999-9999 oder +55 (99) 9999-9999 am selben Eingang.
tks,
Hallo zusammen! Es scheint, dass Sie diese Frage in mehreren Artikeln gestellt haben, daher werde ich sie hier an einer Stelle behandeln.
Ich bitte um Entschuldigung, aber es ist nicht möglich, festzulegen, wo die optionale Zahl platziert werden soll, da die Eingabemaske nach der Reihenfolge der Eingabe funktioniert. Technisch gesehen könnte die optionale Zahl optional bleiben, aber das würde bedeuten, dass Ihre Benutzer dieses Zeichen "überspringen" müssten, indem sie an dieser Stelle ein Leerzeichen eingeben und dann fortfahren, den Rest des Feldes auszufüllen.
Es sollte möglich sein, mit etwas kundenspezifischer Programmierung, aber es tut mir leid, dass solche Anpassungen außerhalb des Bereichs unseres Supports liegen. Für den Fall, dass Sie sich für individuelle Entwicklungsoptionen interessieren, empfehlen wir Ihnen Codeable. Codeable prüft alle Entwickler für Sie, um sicherzustellen, dass sie hochqualifiziert und kommunikativ sind, und hilft Ihnen dann auch, den gesamten Prozess der Verbindung und Kommunikation mit einem am besten geeigneten Entwickler zu leiten.
In unserem Tutorial zur Verwendung von Codeable erfahren Sie mehr über die Funktionsweise dieses Prozesses.
Wenn Sie ein Team suchen, auf das Sie immer wieder (längerfristig) zurückkommen können, um Hilfe bei der kundenspezifischen Entwicklung zu erhalten, können Sie auch WPBuffs in Betracht ziehen.
Ich hoffe, dass dies zur Klärung beiträgt 🙂 Wenn Sie weitere Fragen zu diesem Thema haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Falls nicht, zögern Sie nicht, uns Ihre Fragen in unseren Support-Foren zu stellen.
Das Element "Telefonnummer" bietet keine Eingabemaskierung, ist diese Funktion möglich?
Wir möchten die Eingabemaskierung für das Element "Telefonnummer" verwenden, weil es die Auswahl der Landesvorwahl ermöglicht, während dies bei einer regulären Texteingabe nicht der Fall ist (obwohl sie eine Eingabemaskierung bietet).
Danke!
Mark
Hallo Mark,
Wir haben keine eingebaute Funktion, um die benutzerdefinierte Maske für das Feld "Telefon" festzulegen. Dies kann jedoch mit dem einzeiligen Textfeld und der Einstellung der benutzerdefinierten Eingabemaske wie hier gezeigt erreicht werden
Ich hoffe, das hilft 🙂 .
Ist es möglich, eine Dezimaleingabe im numerischen Feld zu verlangen?
Ein Benutzer muss also immer ganze Zahlen + x Dezimalstellen eingeben?
Zum Beispiel:
0.015
0.792
0.28
1.256
Hallo, ich glaube, dass dies mit der folgenden Eingabemaske auf einem einzeiligen Textfeld möglich sein sollte: [99.999] und hier ist der Screencast, der das gleiche demonstriert.
Ich hoffe, das hilft!
weiß jemand, wie man die Münzmaske in wpforms erstellt Beispiel: $1,252.33
Hey Cristian - Sie können die folgende Eingabemaske verwenden, um dies zu erreichen: $ [[9],999.99].
Ich hoffe, das hilft!
Ich möchte eine Eingabemaske für EMP2000 erstellen, wie kann ich diese erstellen?
Hallo Kashmira - Sie können die folgende Eingabemaske verwenden, um dies zu erreichen:EMP2[9999].
Ich hoffe, das hilft!
Hallo! Wie kann ich eine Eingabemaske für einen optionalen Betrag erstellen
z.B. $1.000.000 oder $250.000, indem ich je nach Betrag ein Komma dazwischen setze?
Hallo Mariana, leider haben wir keine eingebaute Option für ein optionales Format mit Eingabemaske, wie Sie es beschrieben haben. Ich stimme dir aber zu, dass es sehr hilfreich wäre. Ich habe die Funktionsanforderung notiert und wir werden sie im Auge behalten, wenn wir unsere Roadmap für die Zukunft planen.
Vielen Dank und einen schönen Tag noch!
Gibt es eine Möglichkeit, die korrekte Fahrzeugidentifikationsnummer (VIN) zu überprüfen?
Hallo Litschi - Sie können sicherlich eine benutzerdefinierte Eingabemaske erstellen, um das korrekte Format der Fahrzeugidentifikationsnummer (VIN) zu überprüfen.
Danke 🙂 .
Hallo, kann ich eine Eingabemaske verwenden, die keine Leerzeichen zulässt?
Wenn ein Benutzer z. B. "AA 9999" eingibt, wird die Maske "AA9999" erzwingen?
Oder ein nachfolgendes/führendes Leerzeichen wie "AA9999[_]" wird als "AA9999" ohne das Leerzeichen eingegeben?