Snow Monkey Forms│郵便番号から住所を自動登録する方法

郵便番号を入力したら、住所が自動登録されるフォームって良いですよね。

入力コストがかなり省けます。

実は超簡単に実装できるので、そのやり方を紹介します。

Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

Snow Monkey Formで郵便番号から住所を自動登録する方法

やり方はプラグインを入れてIDを追加するだけです。

STEP

プラグイン｢zipaddr-jp｣のインストール

プラグイン｢zipaddr-jp｣のインストールして有効化しておきましょう。

STEP

IDの登録

Snow Monkey Formの設定画面を開きます。

郵便番号のIDは半角小文字の zip にします。NAMEとは別の設定です。先頭の0を保持できるテキスト入力を使います。

この例では住所を都道府県・市区町村・町域・番地以降の4項目に分け、各IDを pref、city、area、addr にします。1つのID欄に空白区切りで並べず、各IDをページ内で1回だけ使用します。

設定は以上です！

都道府県	pref
市区町村	city
町域	area
番地以降	addr

STEP

確認

あとは入力して確認してみましょう。

郵便番号を入れると、住所が自動登録されました。

もちろん番地やマンション名までは無理なので、あとは手入力で住所を記入しましょう。

2026年10月2日確認：Snow Monkey Forms 13.0.0・zipaddr-jp 1.45を実HTTP環境で組み合わせ、配布元のJavaScriptを読み込んで検証しました。入力エラー後と確認画面から戻った後の再補完を、1280px・375pxの表示幅で確認しました。旧画像は設定履歴なので、項目構成は本文に従ってください。

検証用フォームで既知の番号・存在しない番号・ハイフンの有無を試し、Tab操作とスマホでの住所編集を確認します。外部サービスへの通信が必要なため、通信失敗時にも手入力できるよう住所欄を読み取り専用にしないでください。戻す場合は変更前のフォームからIDと項目構成を復元します。プラグイン停止は他の住所フォームにも影響します。

配布元：zipaddr-jp、Snow Monkey Forms用配信コード。

郵便番号を変更したら番地も確認する

郵便番号の変更で住所が再補完されると、手入力した番地以降の欄が空になる場合があります。郵便番号を確定してから番地・建物名を入力し、確認画面でも住所全体を読み直してください。

下の再接続コードは、作り直された入力欄へ監視を接続するものです。番地を保存するコードや、住所の正しさを保証するコードではありません。補完できない場合は手入力できるようにし、配信元への接続とブラウザーのエラーを確認してください。

同じページに住所フォームを2つ置く場合

この設定を2つのフォームへそのままコピーすると、zip・pref・city・area・addrのIDがページ内で重複します。

フォーム本体のIDを別にしても、入力欄のIDの重複は解消されません。

2026年10月3日、SMF 13.0.0の2つのフォームへ同じ入力欄IDを設定し、実HTTPページでzip・pref・city・addrが各2回出力されることを確認しました。

住所がどちらへ補完されるかは、この検証では確認していません。

掲載コードを使う場合は住所フォームを別ページへ分け、各ページで郵便番号の入力、確認画面から戻った後の再入力、番地の手入力を確認します。

同じページに複数の住所フォームが必要な場合は、配信ライブラリーの対象欄指定を含む別の実装が必要です。

入力欄のIDだけをzip-1などへ変更しても、掲載コードはinput#zipを探すため、そのままでは再接続できません。

IDの付け替えだけで複数フォームへ対応したとは判断しないでください。

確認画面から戻った後も住所補完を使う

SMFは確認画面から戻ると入力欄を作り直します。zipaddrの入力監視が前の欄に残ると、新しい郵便番号を入力しても補完されません。次のPHPコードで、入力画面の準備後と「戻る」・入力エラー後に監視を接続し直します。

子テーマのfunctions.phpのPHP部分、またはCode SnippetsのPHPスニペットへ追加します。snow-monkey-form-16の16を対象フォームのIDへ変更してください。zipaddr-jpを有効にし、郵便番号と住所欄のIDを上記の設定に揃えてから使います。

add_action( 'wp_enqueue_scripts', function () {
    $js = <<<'JS'
(() => {
  const bind = () => {
    const form = document.getElementById('snow-monkey-form-16'); // 実際のフォームIDへ変更
    if (!form) return;
    const reconnect = () => {
      if (!form.querySelector('input#zip:not([type="hidden"])')) return;
      if (typeof window.Zip?.Wgv === 'function') window.Zip.Wgv();
    };
    form.addEventListener('smf.input', reconnect);
    form.addEventListener('smf.submit', event => {
      if (['back', 'invalid'].includes(event.detail?.status)) reconnect();
    });
    reconnect();
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bind, {once: true});
  else bind();
})();
JS;
    wp_add_inline_script( 'snow-monkey-forms', $js, 'after' );
}, 11 );

再接続には配信コードのZip.Wgv()を使います。

この掲載例は、1ページにつき住所フォーム1つを対象にします。

zipaddrの将来の変更でこの関数が変わった場合は再検証が必要です。

公式SMFの確認・戻る応答で作り直した欄を使い、戻った後と入力エラー後の再接続、ハイフン付き番号、先頭0の番号、再接続を繰り返しても入力監視が重複しないことを検証しました。フォームのHTTP応答は保存した公式コントローラーの応答へ置換し、住所配信データはPythonで取得しています。実サイトでの送信・メール配送を確認した結果ではありません。

設置後は郵便番号を変更し、確認画面から戻って別の番号でも補完されることを確認します。番地と建物名は手入力してください。戻す場合は今回追加したPHPコードを無効化または削除し、キャッシュを消します。住所欄のIDを戻す場合は変更前のフォーム設定を復元します。