MW WP Form カスタマイズ -郵便番号から自動的に住所入力-

MW WP Formのカスタマイズ第二弾です。
今回は一般的なお問い合わせフォームには必須といっていい郵便番号から住所を自動的に入力する機能です。

変更するファイル

ワードプレスの子テーマを使用していることを前提としています。
そのうえで子テーマに新しいテンプレートを作成し、ヘッダーにjavascriptを埋め込むことにしました。
javascriptの埋め込み方はいろいろありますが、フォームのページは一つだけで独立している場合はこういった方法が効率的だと思っているのですがどうなんでしょう。
functions.phpに条件分岐で呼び出させるという方法もあるかと思いますが、個人的にはあまりfunctions.phpは軽くしておきたいという考えがあります。
またフォーム専用のテンプレートを作成することで、フォーム専用のCSSもその時だけ読み込めばいいのではないでしょうか。
それと子テーマを使用しているならこちらの方がハードルは低いと思います。functions.phpは失敗するとワードプレス自体が動かなくなってしまう場合がありますので。

テンプレートの増やし方

テンプレートを増やすといっても一から作る必要はありません。
フォームを設置する予定のテンプレートファイルを親テーマからダウンロードし、名前を別のものに変えてアップロードします。
ついでにヘッダーファイルやフッターファイルも作ります。
この時に、メインとなるテンプレートファイル(例えばfull-width-page.php)をコピーして使った場合にファイル名をfull-width-page-02.phpなどに変更します。
読み込むヘッダーとフッターを変更する場合、header.php、footer.phpをそれぞれheader-02.php、footer-02.phpに変更します。
そしてメインとなるfull-width-page-02.phpの中身を以下のように変更します。
まず、ファイルの最初の方にある
Template Name:
の後ろの部分にわかりやすいテンプレートの名前を入力します。
日本語で大丈夫ですが、ファイルの文字コードを間違えないようにしましょう。一般的にはutf-8になっていると思います。
そして
get_header(); ?>
という部分を
get_header(’02’); ?>
に書き換えます。
同様に
<?php get_footer(); ?>
という部分を
<?php get_footer(’02’); ?>
に変更します。

このあとheader-02.phpに郵便番号から住所を入力するコードを追記していきます。

利用するのはAjaxZip3

ヘッダーにjavascriptを挿入

先ほどコピーして作ったheader-02.phpに以下のコードを挿入します。

<!– AJAXZIP3をMW WP Form で使うためのJS読み込み –>
<script type=”text/javascript” src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”utf-8″></script>
<script type=”text/javascript”>
//<![CDATA[
jQuery(function(){
jQuery(‘#zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’pref‘,’city‘);
})
})
//]]>
</script>

場所は</head>のすぐ上ぐらいでいいでしょう。
上記のマークしている部分の[zip],[pref],[city]はそれぞれ[郵便番号],[都道府県],[市町村+町名]のid名となりますので、必要に応じて変更しましょう。
上記の設定と異なり、郵便番号を3桁、4桁に分けたり、住所を分けない場合などは以下のサイトを参考に変更してください。

AjaxZip3を使った住所自動入力

フォーム専用のCSSがある場合、ヘッダーかフッターで読み込むといいでしょう。

MW WP Formの記述

MW WP Formには以下のような記述をします。

 

〒[mwform_text name=”your_zip” id=”zip” maxlength=”7″ placeholder=”ハイフン不要” conv_half_alphanumeric=”true”]
[mwform_select name=”your_pref” id=”pref” children=”北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県”]
[mwform_text name=”your_city” id=”city” placeholder=”以降の住所”]
[mwform_text name=”your_address” id=”address” placeholder=”番地や建物名など”]

MW WP Form カスタマイズ -郵便番号から自動的に住所入力-

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る

Pin It on Pinterest