Verwendung von benutzerdefinierten Eingabemasken

Möchten Sie ein bestimmtes Format für ein Formularfeld erzwingen? Benutzerdefinierte Eingabemasken ermöglichen es Ihnen, Regeln für die Werte festzulegen, die Benutzer in ein Feld eingeben dürfen. Dies kann für internationale Telefonnummern, Postleitzahlen und mehr nützlich sein.

Dieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Eingabemaske für ein Formularfeld erstellen und hinzufügen.

Stellen Sie vor Beginn sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist. Erstellen Sie dann ein neues Formular oder bearbeiten Sie ein vorhandenes.

Hinzufügen einer benutzerdefinierten Eingabemaske

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

Innerhalb der Feldoptionen müssen Sie auf die Registerkarte Erweitert klicken. Dort können Sie Ihre Regel in das Feld Eingabemaske eingeben.

Einfache 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)
• &: Großbuchstaben alphanumerisch (0–9 oder A–Z)

Wenn Sie beispielsweise eine 5-stellige Zahl erzwingen möchten, geben Sie 5 9en in das Feld Eingabemaske ein.

Wenn Benutzer auf dieses Formularfeld im Frontend klicken, sehen sie einen Unterstrich oder eine „Leerstelle“ für jedes erforderliche Zeichen, um ihre Eingabe zu erleichtern. Da wir das Symbol 9 verwendet haben, 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 beispielsweise die folgende Eingabemaske verwenden, um ein Telefonnummernformat mit der US-Ländervorwahl zu erzwingen:

+1 (999)-999-9999

Wenn ein Benutzer in dieses Feld klickt, sieht er Leerzeichen anstelle der 9en. Die +1, Klammern und Bindestriche werden automatisch in das Feld eingegeben, sodass Benutzer nur die Zahlen eingeben müssen.

Es ist wichtig zu beachten, dass Benutzer ein Formular nicht absenden können, wenn sie eine Eingabemaske nur teilweise ausgefüllt haben.  Sie müssen die Anzahl und Art der Zeichen eingeben, die von der Eingabemaske gefordert werden, andernfalls sehen sie eine Validierungsnachricht mit der Aufforderung „Bitte füllen Sie alle Felder aus.“

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

Hinzufügen optionaler Zeichen zu Ihren Eingabemasken

Manchmal möchten Sie ein bestimmtes Format für ein Feld erzwingen, aber auch eine flexible Anzahl von Zeichen zulassen. In vielen Ländern können beispielsweise Telefonnummern in verschiedenen Regionen eine unterschiedliche Anzahl von Ziffern enthalten.

Setzen Sie optionale Zeichen in eckige Klammern, wie hier:

99 9999-9999[9]

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

Weitere Beispiele für optionale Zeichen in Eingabemasken

Benutzername mit 6–8 Buchstaben (erster Buchstabe groß, andere klein)

• Maske: Aaaaa[a][a]
• Beispieleingabe: Sullie oder Sulliewp

US-Postleitzahl mit optionaler +4:

• Maske: 99999[-9999]
• Beispieleingabe: 98765 oder 98765-4321

Sonderzeichen für Masken escapen

Aufgrund der Sonderzeichen, die Eingabemasken zur Erstellung erforderlicher Formate verwenden, gibt es bestimmte Buchstaben, Zahlen und Symbole, die als Leerzeichen erscheinen können, wenn Sie dies nicht beabsichtigen.

Um zu vermeiden, dass spezielle Zeichen für Eingabemasken in Leerzeichen umgewandelt werden, können Sie einfach zwei Backslashes (\\) vor das Zeichen setzen.

Als Beispiel erstellen wir eine Eingabemaske für eine Instagram-URL.

Wenn wir die Eingabemaske als https://instagram.com/*{1,30} eingeben, werden alle a-Zeichen in Leerzeichen umgewandelt, die Benutzer im Frontend ausfüllen müssen.

Um dies zu beheben, müssen wir nur einen doppelten Backslash vor jedes a setzen, das wir nicht in ein Leerzeichen umwandeln möchten. Für dieses Beispiel würden wir also die Eingabemaske als https://inst\\agr\\am.com/*{1,30} in den Feldoptionen eingeben.

Wenn wir dieses Feld nun im eingebetteten Formular anzeigen, erscheinen Leerzeichen nur dort, wo wir sie beabsichtigt haben.

Weitere Beispiele für das Escapen von Sonderzeichen in Eingabemasken

Produkt-SKU (2 Ziffern gefolgt von 3 zusätzlichen Zahlen oder Großbuchstaben)

• Maske: \\9\\9-&&&
• Beispieleingabe: 99-654 oder 99-BC8

Gmail-Adresse

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

Erweiterte Eingabemasken

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

Wiederholende Zeichen

Sie können jedes der Sonderzeichen vor {n} (wobei n ein numerischer Wert ist) verwenden, um ein wiederholendes Zeichen zu erzwingen.

Beispiele für Eingabemasken mit wiederholenden Zeichen

US-Postleitzahl mit optionalem +4

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

12-stellige Bestellnummer mit Zahlen und Großbuchstaben

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

Flexible Zeichenbereiche

Sie können eines der Sonderzeichen vor {n,m} (wobei n und m numerische Werte darstellen) verwenden, um Benutzern die Eingabe eines Zeichenbereichs zu ermöglichen.

Beispiele für Eingabemasken mit flexiblen Bereichen

Facebook-URL (erlaubt 5–50 Zeichen):

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

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

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

E-Mail für eine bestimmte Domain (erlaubt 1–51 Zeichen):

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

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

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

Maskierung für mehrere mögliche Eingabewerte

Eine weitere Option ist die Erstellung einer Eingabemaske, die mehrere mögliche Eingabewerte akzeptiert. Geben Sie dazu einen Backslash gefolgt von den erlaubten Werten in Klammern, getrennt durch vertikale Striche, wie in \(x|y) ein.

Beispiele für Masken, die mehrere mögliche Eingaben zulassen

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

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

Kontonummer beginnend mit TN oder KY

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

Datums-/Zeitmasken

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

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

Datumsmasken

Mit den folgenden Optionen können Sie benutzerdefinierte Datums-Eingabemasken 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 für einstellige Monate.
• mm: Monat als Ziffern; führende Null für einstellige Monate.
• yy: Jahr als letzte 2 Ziffern; führende Null für Jahre unter 10.
• yyyy: Jahr als 4 Ziffern

Als Beispiel erzwingt date:dd/mm/yyyy ein Datum wie 12.08.2021. Wenn ein Benutzer Ihr Formular besucht und mit der Maus über das Feld fährt, sieht er Platzhalter für das erforderliche Format.

Zeitmasken

Mit den folgenden Optionen können Sie benutzerdefinierte Zeit-Eingabemasken erstellen, die Ihren Anforderungen entsprechen.

• h: Stunden; keine führende Null für einstellige Stunden (12-Stunden-Format).
• hh: Stunden; führende Null für einstellige Stunden (12-Stunden-Format).
• H: Stunden; keine führende Null für einstellige Stunden (24-Stunden-Format).
• HH: Stunden; führende Null für einstellige Stunden (24-Stunden-Format).
• M: Minuten; keine führende Null für einstellige Minuten. Großbuchstaben M zur Vermeidung von Konflikten mit Monaten.
• MM: Minuten; führende Null für einstellige Minuten. Großbuchstaben MM zur Vermeidung von Konflikten mit Monaten.
• 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, ein Zeichen umfassende Zeitmarkierungszeichenfolge: a oder p.
• tt: Zwei Zeichen umfassende Zeitmarkierungszeichenfolge: am oder pm.
• T: Ein Zeichen umfassende Zeitmarkierungszeichenfolge: A oder P.
• TT: Zwei Zeichen umfassende Zeitmarkierungszeichenfolge: AM oder PM.

Als Beispiel: date:h:MM erlaubt Benutzern die Eingabe einer Zeit wie 8:30. Im Frontend sehen die Benutzer Platzhalter im Feld, wenn sie mit der Maus darüber fahren.

Verwendung von Aliassen zum Hinzufügen von Eingabemasken

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

Die verfügbaren Eingabemasken-Aliase in WPForms umfassen:

• alias:numeric: Ermöglicht Benutzern die Eingabe beliebiger numerischer Werte.
• alias:currency: Ermöglicht Benutzern die Eingabe numerischer Werte im Format 0,00.

• alias:decimal: Ermöglicht Benutzern die Eingabe beliebiger numerischer Werte mit oder ohne Dezimaltrennzeichen.
• alias:integer: Ermöglicht Benutzern die Eingabe beliebiger ganzen Zahlen.
• alias:percentage: Ermöglicht Benutzern die Eingabe beliebiger Zahlen von 1–100 als Prozentsatz.
• alias:url: Fügt eine Eingabemaske für eine URL hinzu, die mit http:// beginnt.
• alias:email: Fügt eine Eingabemaske für eine E-Mail-Adresse hinzu.

Häufig gestellte Fragen

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

Ich kann die Option Eingabemaske in meinen Feldeinstellungen nicht finden. Wo ist sie?

Die Option Eingabemaske ist nur für das Feld Einzeiliger Text verfügbar. Sie finden sie nicht bei anderen Feldtypen wie Telefon, E-Mail, Zahlen oder Absatz.

Um eine benutzerdefinierte Eingabemaske zu verwenden, fügen Sie ein Feld für einzeiligen Text zu Ihrem Formular hinzu, klicken Sie darauf, um die Feldoptionen zu öffnen, und gehen Sie dann zur Registerkarte Erweitert, wo Sie das Feld Eingabemaske finden.

Beschränkt die Verwendung von Längenbeschränkung mit einer Eingabemaske die Eingabe von Zeichen in einzeiligen Textfeldern?

Ja. Wenn Sie Zeichenbeschränkungen und Eingabemasken in einzeiligen Textfeldern kombinieren, zählt die Beschränkung alles, einschließlich Symbolen wie Bindestrichen, als Teil der Beschränkung. Um sicherzustellen, dass Benutzer ihre Informationen problemlos eingeben können, passen Sie die Zeichenbeschränkung so an, dass diese zusätzlichen Symbole enthalten sind.

Weitere Informationen zum Anpassen von Zeichenbeschränkungen finden Sie in unserem Leitfaden zum Begrenzen von Zeichen- und Wortlimits.

Warum werden meine maskierten Sonderzeichen aus dem Eingabemaskenfeld entfernt?

Standardmäßig entfernt WordPress Backslashes bei der Verarbeitung von Formulardaten. Wenn Sie spezielle Maskierungszeichen (wie \9 oder \*) maskieren und feststellen, dass sie verschwinden, können Sie sie erhalten, indem Sie das Slashen von Formulardaten aktivieren.

Fügen Sie dazu die folgende Zeile zu Ihrer wp-config.php-Datei hinzu, direkt vor der Zeile, die besagt /* Das ist alles, bearbeiten Sie nicht weiter! */:

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Dies stellt sicher, dass Backslashes beibehalten werden und Ihre Eingabemasken korrekt funktionieren. Wenn Sie nicht sicher sind, wie Sie die Datei wp-config.php Ihrer Website bearbeiten, lesen Sie die Anleitung von WPBeginner zum Bearbeiten der wp-config.php-Datei in WordPress.

Das ist alles! Sie können jetzt benutzerdefinierte Eingabemasken erstellen, um bestimmte Formate für die Felder Ihrer Formulare zu erzwingen.

Möchten Sie Ihre Formulare kompakter gestalten? Lesen Sie unbedingt unser Tutorial zur Verwendung von Mehrspaltenlayouts, um zu erfahren, wie Sie Felder in Zeilen in Ihrem Formular anordnen.