国際住所フォームでユーザーが郵便番号を入力する方法を制御したいですか？入力マスクは、入力できる文字とパターンを制限することで、郵便番号フォーマットの標準化に役立ちます。
このガイドでは、WPFormsのInternational Addressフォーマットの郵便番号フィールド専用の入力マスクを追加する方法を紹介します。
フォームの設定
まず、新しいフォームを作成し、必要なフィールドを追加します。必ずAddressフォームフィールドを入れてください。
新しいフォームの作成にサポートが必要な場合は、こちらのドキュメントをご覧ください。
住所フィールドを追加したら、SchemeのドロップダウンからInternationalを選択します。
入力マスクの追加
デフォルトでは、国際住所の郵便番号フィールドは任意の文字を受け入れます。入力を特定の形式に制限するには、カスタム入力マスクを追加します。サイトにカスタムコードを追加する際にヘルプが必要な場合は、コードスニペットの追加に関するガイドをご覧ください。
以下は入力マスクを追加するコードである：
スニペットを追加すると、フィールドがアクティブになったときに郵便番号にいくつかの行が表示されます。
よくある質問
Q: イギリスの住所に特定の入力マスクを追加するにはどうすればよいですか？
A:フォームが英国の住所しか受け付けないことがわかっている場合は、次のスニペットで英国の郵便番号の入力マスクを設定できます。
/*
* 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 )
以上で、国際住所郵便番号への入力マスクの設定は完了です。次に、カスタムの住所スキームを作成したいですか？住所フィールドの追加スキームを作成する方法の記事をご覧ください。