![](https://ippei-kusakari.com/wp-content/uploads/2021/05/icon-croeworkder.png)
郵便番号から住所を自動表示する方法ってありませんか?
![](https://ippei-kusakari.com/wp-content/uploads/2021/05/11f1edda774b9cf007adf9c33cd0581c-e1620281020903.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/05/11f1edda774b9cf007adf9c33cd0581c-e1620281020903.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/05/11f1edda774b9cf007adf9c33cd0581c-e1620281020903.png)
プラグインを使えばできます!
一緒に見ていきましょう!
この記事を読めばわかること
- Snow Monkey Formsで郵便番号から自動で住所を表示する方法がわかる
- zipaddr-jpがなにかわかる
今回説明するプラグインはContact Form 7やMW WP Formでも利用できます。
zipaddr-jpのインストール
郵便番号から住所を自動表示するためには「zipaddr-jp」というプラグインを使います。
WordPress管理画面からプラグイン→新規追加をクリックし、zipaadr-jpを入力してインストールしましょう。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-zipaddr-jp-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-zipaddr-jp-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/zipaddr-valid-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/zipaddr-valid-1024x640.png)
プラグインを有効化すると管理画面に「Zipaddr-JP」が追加されてます。
クリックすると色々設定できますが、特に変更するところはありません。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/check-zipaddr-jp-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/check-zipaddr-jp-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/zipaddr-jp-setting-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/zipaddr-jp-setting-1024x640.png)
Snow Monkey Formsの設定
zipaddr-jpをインストールしたら次はSnow Monkey Formsの設定をしていきます。
今回は郵便番号を自動表示させることにフォーカスしてまとめています。
そのため、Snow Monkey Forms自体の設定は一部省いていますのでご了承ください。
Snow Monkey Formsのインストール
プラグインの追加方法は先ほどと同じように進めていきます。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/install-snowmonkeyfomrs-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/install-snowmonkeyfomrs-1024x640.png)
Snow Monkey Formsの設定
プラグインを有効化するとSnow Monkey Formsが追加されていますので新規追加をクリックします。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-add-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-add-1024x640.png)
「フォーム設定を開く」をクリックし、今回はフォームスタイルを「ビジネス」にしてみましょう。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-style-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-style-1024x640.png)
次にお問い合わせの項目を追加して、郵便番号と住所を追加していきます。
入力画面の一番下の+マークをクリックし、「郵便番号」、「都道府県」、「市区町村」、「番地」を追加していきます。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-items-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-items-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/set-forms-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/set-forms-1024x640.png)
項目が追加できたら、追加したテキストを選択した上で追加設定を開き、idを設定していきます。
idは必ず以下のように設定してください。idが違うと自動で住所が表示されません。
- 郵便番号:zip
- 都道府県:pref
- 市区町村:city
- 番地:addr
合わせてバリエーションを必須に変更します。
必須にすることで入力されていない場合はフォームが送信されません。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/select-detail-setting-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/select-detail-setting-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-items-id-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-items-id-1024x640.png)
番地は入力エリアが狭いので、sizeを100に変更します。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/set-addr-size-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/set-addr-size-1024x640.png)
最後に郵便番号から番地までがメッセージの下に来ているので位置を変更しましょう。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-change-positon-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-change-positon-1024x640.png)
これで郵便番号を自動で表示させる準備ができました。
固定ページにフォームを表示
最後に固定ページで設定したフォームを表示させるようにします。
まずは固定ページを新規追加します。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-page-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-page-1024x640.png)
「SNOW MONKEY BLOCKS」の「セクション」を追加し、タイトルに「お問い合わせフォーム」と記入します。
次にセクションの中に、「SNOW MONKEY FORMS」の「Snow Monkey Forms」を追加し、自分が作成したフォームを選択します。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-section-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-section-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-in-section-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/add-forms-in-section-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/select-forms-in-section-1024x640.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/select-forms-in-section-1024x640.png)
これでお問い合わせフォームの作成もできました。
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-finish-898x1024.png)
![](https://ippei-kusakari.com/wp-content/uploads/2021/08/forms-finish-898x1024.png)
まとめ
画像も多くて説明が長くなりましたが、「zipaddr-jp」をインストールするだけです。
設定も指定のidに変更するぐらいですので、お問い合わせフォームに住所を入れる場合は必ず入れましょう!
この記事を読んでもわからないことがあれば、TwitterのDMにてご連絡いただければ回答しますので、お気軽にご相談ください。