【WordPress】MW WP Form住所自動入力について解説

シュウ

今回はMW WP Form住所自動入力について
の解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
お問い合わせ関連のプラグインを探してる方へ
今回はWordPressの「MW WP Form 住所自動入力」について解説しております。

[記事の内容]

MW WP Formとは

「MW WP Form」　とは、WordPressのお問い合わせプラグインになります。
このプラグインを紹介するポイントと問題点があります。

ポイント

日本語対応しており、管理画面も見やすいです。
確認画面、エラー画面、完了画面の作成が可能です。
バリデーションルールの設定も可能です。
お問い合わせのデータの保存可能、CSV出力が可能です。

問題点

CSS(レイアウト)はご自身で記述しなければなりません。
ショートコードをコピー&ペーストしてフォームを実装します。
設定項目が多いです。

「MW WP Form」は、とても使いやすい反面、少し知識が必要になってきます。
ですが、このプラグイン一つで全てのことが設定できるので、しっかり覚えておきましょう。
こちらの方で詳しい設定については解説しております。

MW WP Formの設定について解説

【WordPress】2023年、MW WP Formの使い方を解説

プラグイン一つで全てのことが設定できるので、覚えておきましょう。

住所自動入力について

今回、使用するjSは、ajaxzip3.jsになります。
郵便番号から住所を自動入力する機能を提供するjQueryのプラグインです。

「ajaxzip3.js」と「MW WP Form」を組み合わせて使用します。
最初に、ajaxzip3.jsの読み込みをします。
ajaxzip3.jsを読み込むには、WordPressのfooter.phpなどに以下のコードを追加します。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
    jQuery( '#zip' ).keyup( function() {
        AjaxZip3.zip2addr('zip21','zip22','都道府県','市区町村','');
    });
</script>

郵便番号を3桁-4桁の自動入力について

上記のコードを「footer.php」に記述し、
次に「MW WP Form」の方に入力フォーム作成します。
コードは以下のようになります。

郵便番号を3桁-4桁の自動入力について

<th>住所</th>
<td><label>郵便番号[mwform_text name="zip21" size="4" maxlength="3"][mwform_text name="zip22" id="zip" size="5" maxlength="4"]</label>
	<label>都道府県[mwform_text name="都道府県" placeholder="例：愛知県"]</label>
	<label>市区町村[mwform_text name="市区町村" placeholder="例：名古屋市"]</label>
	<label>番地等[mwform_text name="番地等" placeholder="例：〇〇"]</label></td>
</tr>

上記のコードは、郵便番号入力欄（#zip21、#zip22）にフォーカスを当てた際に、都道府県入力欄、住所1入力欄（#市区町村）に自動的に住所が入力されます。

ワンボックスで郵便番号7桁の自動入力について

次に「ワンボックスで郵便番号7桁」の入力欄を作成します。
コードは以下のようになります。

ワンボックスで郵便番号7桁の自動入力について

<tr>
<th>郵便番号</th>
<td><label>[mwform_text name="zip" id="zip" size="5" maxlength="8" placeholder="例："]</label></td>
</tr>

<tr>
<th>ご住所</th>
<td><label>[mwform_text name="address" id="address" placeholder="例：愛知県名古屋市"]</label></td>
</tr>

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
    jQuery('#zip').keyup(function(event){
	AjaxZip3.zip2addr(this,'','address','address');
    });
</script>

上記のコードでは、「ワンボックスで郵便番号7桁」にするため、「footer.php」のjsのコードの変更も必要になってきます。
郵便番号入力欄（#zip）にフォーカスを当てた際に、ご住所の入力欄（#市区町村）に自動的に住所が入力されます。