Möchten Sie steuern, wie Benutzer Postleitzahlen in Ihre internationalen Adressformulare eingeben? Eine Eingabemaske kann helfen, die Formatierung von Postleitzahlen zu standardisieren, indem sie einschränkt, welche Zeichen in welchem Muster eingegeben werden können.
Diese Anleitung zeigt Ihnen, wie Sie eine Eingabemaske speziell für das Postleitzahlenfeld im internationalen Adressformat von WPForms hinzufügen können.
Einrichten Ihres Formulars
Zunächst erstellen wir ein neues Formular und fügen die benötigten Felder hinzu. Achten Sie darauf, dass das Formularfeld Adresse enthalten ist.
Wenn Sie Hilfe bei der Erstellung eines neuen Formulars benötigen, sehen Sie sich bitte diese Dokumentation an.
Nachdem Sie das Feld Adresse hinzugefügt haben, wählen Sie in der Dropdown-Liste Schema die Option International.
Hinzufügen der Eingabemaske
Standardmäßig akzeptiert das Feld Postleitzahl in einer internationalen Adresse jedes Zeichen. Um die Eingabe auf ein bestimmtes Format zu beschränken, fügen wir eine benutzerdefinierte Eingabemaske hinzu. Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem Code zu Ihrer Website benötigen, lesen Sie bitte unsere Anleitung zum Hinzufügen von Code-Snippets.
Hier ist der Code zum Hinzufügen der Eingabemaske:
Wenn Sie das Snippet hinzufügen, sehen Sie in der Postleitzahl, wenn das Feld aktiv ist, einige Zeilen, die angezeigt werden, was darauf hindeutet, dass die Eingabemaske ein ganz bestimmtes Format erwartet, das eingegeben werden muss.
Häufig gestellte Fragen
F: Wie kann ich eine spezielle Eingabemaske für eine britische Adresse hinzufügen?
A: Wenn Sie wissen, dass Ihr Formular nur britische Adressen akzeptiert, können Sie mit diesem Snippet eine Eingabemaske für die britische Postleitzahl einrichten.
/*
* Custom input mask for the address field's international scheme.
*
* @link https://wpforms.com/developers/how-to-add-an-input-mask-to-the-international-postal-code
*/
function wpf_dev_address_field_properties( $properties, $field, $form_data ) {
if($field[ 'scheme' ] === 'international') {
$properties[ 'inputs' ][ 'postal' ][ 'class' ][] = 'wpforms-masked-input';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-mask' ] = 'A[A]9[9][A] 9AA';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-greedy' ] = 'false';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'rule-empty-blanks' ] = true;
}
return $properties;
}
add_action( 'wpforms_field_properties_address', 'wpf_dev_address_field_properties', 10, 3 )
Und das ist alles, was Sie brauchen, um eine Eingabemaske für die internationale Adresse Postal Code einzurichten. Möchten Sie als nächstes ein benutzerdefiniertes Adressschema erstellen? Lesen Sie unseren Artikel über die Erstellung zusätzlicher Schemata für das Adressfeld.