AI要約
国際的な住所フォームでユーザーが郵便番号を入力する方法を制御したいですか？入力マスクを使用すると、入力できる文字とパターンを制限することで、郵便番号の書式を標準化できます。
このガイドでは、WPFormsの国際住所フォーマットで郵便番号フィールドにのみ入力マスクを追加する方法を説明します。
フォームの設定
まず、新しいフォームを作成し、必要なフィールドを追加します。住所フォームフィールドを含めるようにしてください。
新しいフォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。
住所フィールドを追加したら、スキーマドロップダウンから国際を選択します。
入力マスクの追加
デフォルトでは、国際住所の郵便番号フィールドは任意の文字を受け入れます。特定のフォーマットに入力値を制限するには、カスタム入力マスクを追加します。サイトにカスタムコードを追加するのに役立つ情報が必要な場合は、コードスニペットの追加に関するガイドを確認してください。
入力マスクを追加するためのコードは次のとおりです。
スニペットを追加すると、フィールドがアクティブなときに郵便番号に、非常に特定のフォーマットの入力を期待していることを示唆する線が表示されます。
よくある質問
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 )
これで、国際住所の郵便番号に入力マスクを設定するために必要なすべてが揃いました。次に、カスタム住所スキーマを作成しますか？住所フィールドに追加のスキーマを作成する方法に関する記事をご覧ください。