Benutzerdefinierte Eingabemasken verwenden

Möchten Sie ein bestimmtes Format für ein Formularfeld vorschreiben? Mit benutzerdefinierten Eingabemasken können Sie Regeln für die Werte festlegen, die Benutzer in ein Feld eingeben dürfen. Dies kann für internationale Telefonnummern, Postleitzahlen und mehr nützlich sein.

In diesem Tutorial erfahren Sie, wie Sie eine benutzerdefinierte Eingabemaske für ein Formularfeld erstellen und hinzufügen können.

---

Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist. Erstellen Sie dann ein neues Formular oder bearbeiten Sie ein bestehendes.

Hinzufügen einer benutzerdefinierten Eingabemaske

Sie können eine benutzerdefinierte Eingabemaske zu jedem einzeiligen Textfeld hinzufügen. Nachdem Sie diesen Feldtyp zu Ihrem Formular hinzugefügt haben, klicken Sie darauf, um den Bereich Feldoptionen zu öffnen.

In den Feldoptionen müssen Sie auf die Registerkarte " Erweitert" klicken. Dann können Sie Ihre Regel zum Feld Eingabemaske hinzufügen.

Grundlegende Eingabemasken

Um die Regeln für eine benutzerdefinierte Eingabemaske zu erstellen, müssen Sie einen bestimmten Satz von Sonderzeichen verwenden.

• 9: Numerisch (0-9)
• a: Alphabetisch (a-z oder A-Z)
• A: Großbuchstaben alphabetisch (A-Z)
• *: Alphanumerisch (0-9, a-z, oder A-Z)
• &: Alphanumerische Großbuchstaben (0-9 oder A-Z)

Wenn Sie zum Beispiel eine 5-stellige Zahl benötigen, geben Sie 5 ein. 9s in das Feld Eingabemaske ein.

Wenn Benutzer in dieses Formularfeld auf dem Frontend klicken, sehen sie einen Unterstrich oder ein "Leerzeichen" für jedes erforderliche Zeichen, um ihre Eingabe zu erleichtern. Da wir außerdem das 9 Symbol, akzeptiert die Eingabemaske nur numerische Werte (keine Buchstaben oder andere Zeichen).

Sie können auch Symbole wie Bindestriche (-) oder Klammern in Ihre Eingabemaske aufnehmen. Sie könnten zum Beispiel die folgende Eingabemaske verwenden, um ein Telefonnummernformat mit der US-Ländervorwahl zu verlangen:

+1 (999)-999-9999

Wenn ein Benutzer in dieses Feld klickt, werden Leerzeichen anstelle der 9s. Das +1, die Klammern und die Bindestriche werden automatisch in das Feld eingegeben, so dass der Benutzer nur noch die Zahlen eingeben muss.

Es ist wichtig zu beachten, dass Benutzer ein Formular nicht abschicken können, wenn sie eine Eingabemaske nur teilweise ausgefüllt haben. Sie müssen die Anzahl und den Typ der Zeichen eingeben, die in der Eingabemaske verlangt werden, oder es wird eine Validierungsmeldung angezeigt, die lautet: "Bitte füllen Sie alle Leerzeichen aus".

Das Hinzufügen einer Eingabemaske zu einem Feld macht das Feld jedoch nicht erforderlich. Benutzer können das Formular auch dann übermitteln, wenn die Eingabemaske in einem nicht erforderlichen Feld vollständig leer ist.

Hinzufügen optionaler Zeichen zu Ihren Eingabemasken

Manchmal möchten Sie vielleicht ein bestimmtes Format für ein Feld vorschreiben, aber auch eine flexible Anzahl von Zeichen zulassen. Zum Beispiel können Telefonnummern in vielen Ländern in verschiedenen Regionen unterschiedlich viele Ziffern enthalten.

Fügen Sie alle optionalen Zeichen in eckige Klammern ein, etwa so:

99 9999-9999[9]

Da die letzte Ziffer optional ist, würde diese Eingabemaske 10 Ziffern akzeptieren, z. B. 98 7654-3210oder 11 Ziffern, z. B. 98 7654-32109.

Weitere Beispiele für optionale Zeichen in Eingabemasken

Benutzername mit 6-8 Buchstaben (erster Buchstabe in Großbuchstaben, andere in Kleinbuchstaben)

• Maske: Aaaaa[a][a]
• Beispiel Eingabe: Sullie oder Sulliewp

US-Postleitzahl mit Option +4:

• Maske: 99999[-9999]
• Beispiel Eingabe: 98765 oder 98765-4321

Sonderzeichen der Maske umgehen

Aufgrund der Sonderzeichen, die in den Eingabemasken zur Erstellung der erforderlichen Formate verwendet werden, können bestimmte Buchstaben, Zahlen und Symbole als Leerzeichen erscheinen, auch wenn Sie dies nicht beabsichtigen.

Um zu vermeiden, dass die Sonderzeichen der Eingabemaske am Frontend in Leerzeichen umgewandelt werden, können Sie einfach zwei Backslashes (\\) vor das Zeichen setzen.

Lassen Sie uns als Beispiel eine Eingabemaske für eine Instagram-URL erstellen.

Wenn wir die Eingabemaske wie folgt eingeben https://instagram.com/*{1,30}, alle der a Zeichen werden in Leerzeichen umgewandelt, die der Benutzer auf dem Frontend ausfüllen muss.

Um dies zu beheben, müssen wir einfach einen doppelten Backslash vor jede a die wir nicht in ein Leerzeichen umwandeln wollen. Für dieses Beispiel würden wir also die Eingabemaske wie folgt eingeben https://inst\\agr\\am.com/*{1,30} in den Feldoptionen.

Wenn dieses Feld nun im eingebetteten Formular angezeigt wird, erscheinen Leerzeichen nur dort, wo wir sie beabsichtigen.

Weitere Beispiele für das Escaping von Sonderzeichen in Eingabemasken

Produkt SKU (2 9en gefolgt von 3 weiteren Zahlen oder Großbuchstaben)

• Maske: \\9\\9-&&&
• Beispiel Eingabe: 99-654 oder 99-BC8

Gmail-Adresse

• Maske: *{1,50}@gm\\ail.com
• Beispiel Eingabe: [email protected]

Erweiterte Eingabemasken

Wenn Sie noch mehr Kontrolle über die Eingabemasken Ihres Formulars haben möchten, können Sie auch erweiterte Formatierungsoptionen verwenden. Sie funktionieren in Kombination mit allen oben beschriebenen speziellen Maskenzeichen.

Sich wiederholende Zeichen

Sie können jedes der Sonderzeichen vor {n} (wobei n ein numerischer Wert ist), ein Wiederholungszeichen zu verlangen.

Beispiele für Eingabemasken mit sich wiederholenden Zeichen

US-Postleitzahl mit optionalem +4

• Maske: 9{5}[-9{4}]
• Beispiel Eingaben: 33409 oder 33409-4053

12-stellige Bestellnummer mit Ziffern und Großbuchstaben

• Maske: &{12}
• Beispiel Eingaben: 29X483HK8192 oder 10G7382ZR638

Flexible Zeichenumfänge

Sie können jedes der Sonderzeichen vor {n,m} (wobei n und m stehen für numerische Werte), damit die Benutzer eine Reihe von Zeichen eingeben können.

Beispiele für Eingabemasken mit flexiblen Bereichen

Facebook URL (erlaubt 5-50 Zeichen):

• Maske: https://f\\acebook.com/*****[*{0,45}]
• Beispiel Eingaben: https://facebook.com/wpforms oder https://facebook.com/monsterinsights

Twitter Handle (erlaubt 4-15 Zahlen, Großbuchstaben oder Kleinbuchstaben)

• Maske: @****[*{0,11}]
• Beispiel Eingabe: @easywpforms oder @WPBeginner

E-Mail für eine bestimmte Domäne (erlaubt 1-51 Zeichen):

• Maske: *[*{0,50}]@mysite.com
• Beispiel Eingabe: [email protected] oder [email protected]

Produkt-SKU mit 8-11 Zeichen (erlaubt Zahlen oder Großbuchstaben):

• Maske: &{4}-&{4}[&{0,3}]
• Beispiel Eingabe: A987-BC65 oder A987-BC65D43

Maskierung für mehrere mögliche Eingabewerte

Eine andere Möglichkeit besteht darin, eine Eingabemaske zu erstellen, die mehrere mögliche Eingabewerte akzeptiert. Geben Sie dazu einen umgekehrten Schrägstrich ein, gefolgt von den zulässigen Werten in Klammern, getrennt durch senkrechte Schrägstriche, wie in \(x|y).

Beispiele für Masken, die mehrere Eingabemöglichkeiten zulassen

Rufnummer mit Ländervorwahl für die USA (+1), Australien (+61) oder Mexiko (+52)

• Maske: +\(1|61|52) 9999999999
• Beispiel Eingaben: +1 2127893920 oder +52 3307490285

Kontonummer mit Sitz in TN oder KY

• Maske: \(TN|KY)9{10}
• Beispiel Eingaben: TN3756284765 oder KY2975387529

Datum/Zeit-Masken

Sie können auch benutzerdefinierte Eingabemasken verwenden, um ein bestimmtes Datums- oder Zeitformat zu verlangen.

Um eine Eingabemaske für Datum oder Uhrzeit einzurichten, müssen Sie mit date: gefolgt von dem Format, das Sie benötigen.

Datum Masken

Mit den nachstehenden Optionen können Sie benutzerdefinierte Datumseingabemasken erstellen, die Ihren Anforderungen entsprechen.

• d: Tag des Monats als Ziffern; keine führende Null für einstellige Tage.
• dd: Tag des Monats als Ziffern; führende Null für einstellige Tage.
• m: Monat als Ziffern; keine führende Null bei einstelligen Monaten.
• mm: Monat als Ziffern; führende Null für einstellige Monate.
• yy: Jahr als letzte 2 Ziffern; führende Null für Jahre kleiner als 10.
• yyyy: Jahr als 4 Ziffern

Ein Beispiel, date:dd/mm/yyyy erfordert ein Datum wie 12/08/2021. Wenn ein Benutzer Ihr Formular besucht und den Mauszeiger über das Feld bewegt, sieht er Platzhalter für das erforderliche Format.

Zeitmasken

Mit den nachstehenden Optionen können Sie benutzerdefinierte Zeiteingabemasken erstellen, die Ihren Anforderungen entsprechen.

• h: Stunden; keine führende Null für einstellige Stunden (12-Stunden-Uhr).
• hh: Stunden; führende Null für einstellige Stunden (12-Stunden-Uhr).
• H: Stunden; keine führende Null für einstellige Stunden (24-Stunden-Uhr).
• HH: Stunden; führende Null für einstellige Stunden (24-Stunden-Uhr).
• M: Minuten; keine führende Null für einstellige Minuten. Großbuchstaben M, um Konflikte mit Monaten zu vermeiden.
• MM: Minuten; führende Null für einstellige Minuten. Großbuchstaben MM, um Konflikte mit Monaten zu vermeiden.
• s: Sekunden; keine führende Null für einstellige Sekunden.
• ss: Sekunden; führende Null für einstellige Sekunden.
• l: Millisekunden. 3 Ziffern.
• L: Millisekunden. 2 Ziffern.
• t: Kleinbuchstaben, einstellige Zeichenfolge für die Zeitmarkierung: a oder p.
• tt: Zweistellige Zeichenfolge für die Zeitangabe: am oder pm.
• T: Einzeichen-Zeichenfolge für die Zeitmarkierung: A oder P.
• TT: Zweistellige Zeichenfolge für die Zeitangabe: AM oder PM.

Ein Beispiel, date:h:MM ermöglicht es den Nutzern, eine Uhrzeit wie z. B. 8:30 Uhr einzugeben. Auf der Benutzeroberfläche sehen die Benutzer Platzhalter in dem Feld, wenn sie den Mauszeiger darüber bewegen.

Verwendung von Aliasen zum Hinzufügen von Eingabemasken

Sie können einen Alias in das Feld Eingabemaske in den erweiterten Feldoptionen eingeben, um eine vorgefertigte Eingabemaske zu verwenden.

Die verfügbaren Eingabemasken-Aliase in WPForms umfassen:

• alias:numeric: Ermöglicht die Eingabe eines beliebigen numerischen Wertes.
• alias:currency: Ermöglicht die Eingabe numerischer Werte im Format 0,00.
• alias:decimal: Ermöglicht die Eingabe beliebiger numerischer Werte mit oder ohne Dezimalstellen.
• alias:integer: Ermöglicht die Eingabe eines beliebigen ganzzahligen Wertes.
• alias:percentage: Ermöglicht die Eingabe einer beliebigen Zahl von 1-100 als Prozentsatz.
• alias:url: Fügt eine Eingabemaske für eine URL hinzu, die mit http://.
• alias:email: Fügt eine Eingabemaske für eine E-Mail Adresse hinzu.

Häufig gestellte Fragen

Hier werden wir einige der häufigsten Fragen besprechen, die wir zu Eingabemasken in WPForms erhalten.

Wird durch die Verwendung der Längenbegrenzung mit einer Eingabemaske die Zeicheneingabe in einzeiligen Textfeldern eingeschränkt?

Ja. Wenn Sie in einzeiligen Textfeldern Zeichenbegrenzungen und Eingabemasken zusammen hinzufügen, zählt die Begrenzung alles, auch Symbole wie Bindestriche, als Teil der Begrenzung. Um sicherzustellen, dass die Benutzer ihre Informationen ohne Probleme eingeben können, passen Sie die Zeichenbegrenzung so an, dass sie diese zusätzlichen Symbole einschließt.

Weitere Informationen zur Anpassung von Zeichenbeschränkungen finden Sie in unserem Leitfaden zur Beschränkung von Zeichen- und Wortbeschränkungen.

Das war's! Sie können jetzt benutzerdefinierte Eingabemasken erstellen, um bestimmte Formate in den Feldern Ihrer Formulare zu verlangen.

Möchten Sie Ihre Formulare noch kompakter gestalten? In unserem Tutorial zur Verwendung von mehrspaltigen Layouts erfahren Sie, wie Sie Felder in Ihrem Formular in Reihen anordnen können.