SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

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

こんな方に読んでほしい

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

MW WP Formとは

MW WP Formとは

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

ポイント
  • 日本語対応しており、管理画面も見やすいです。
  • 確認画面、エラー画面、完了画面の作成が可能です。
  • バリデーションルールの設定も可能です。
  • お問い合わせのデータの保存可能、CSV出力が可能です。
問題点
  • CSS(レイアウト)はご自身で記述しなければなりません。
  • ショートコードをコピー&ペーストしてフォームを実装します。
  • 設定項目が多いです。

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

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桁の自動入力について

郵便番号を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桁の自動入力について

ワンボックスで郵便番号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)にフォーカスを当てた際に、ご住所の入力欄(#市区町村)に自動的に住所が入力されます。

まとめ

今回はこれで以上です。

POINT
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top