How to Add an Input Mask to the International Postal Code

Markdown anzeigen

Möchten Sie steuern, wie Benutzer Postleitzahlen in Ihren internationalen Adressformularen eingeben? Eine Eingabemaske kann die Formatierung von Postleitzahlen standardisieren, indem sie einschränkt, welche Zeichen und in welchem Muster eingegeben werden können.

Diese Anleitung zeigt Ihnen, wie Sie eine Eingabemaske speziell für das Feld Postleitzahl im internationalen Adressformat von WPForms hinzufügen.

Einrichtung Ihres Formulars

Zuerst erstellen wir ein neues Formular und fügen die benötigten Felder hinzu. Stellen Sie sicher, dass Sie das Formularfeld Adresse einschließen.

Wenn Sie Hilfe beim Erstellen eines neuen Formulars benötigen, lesen Sie bitte diese Dokumentation.

Sobald Sie das Feld Adresse hinzugefügt haben, wählen Sie im Dropdown-Menü Schema die Option International.

Feld Adresse hinzufügen und International aus dem Dropdown-Menü Schema auswählen

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.

Weitere Beispiele für Eingabemasken finden Sie in dieser Anleitung zum Erstellen von Eingabemasken.

Hier ist der Code zum Hinzufügen der Eingabemaske:

Sobald Sie den Snippet hinzugefügt haben, sehen Sie im Feld Postleitzahl, wenn das Feld aktiv ist, einige Linien, die darauf hindeuten, dass die Eingabemaske ein sehr spezifisches Format erwartet.

Jetzt hat die Postleitzahl eine Eingabemaske, um das Format der Postleitzahl zu erzwingen

Häufig gestellte Fragen

F: Wie kann ich eine spezifische 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 benötigen, um eine Eingabemaske für die Postleitzahl der internationalen Adresse einzurichten. Möchten Sie als Nächstes ein benutzerdefiniertes Adressschema erstellen? Lesen Sie unseren Artikel über So erstellen Sie zusätzliche Schemata für das Adressfeld.

Referenzfilter

wpforms_field_properties

So fügen Sie eine Eingabemaske für die internationale Postleitzahl hinzu

KI-Zusammenfassung