MW WP Formで、郵便番号入力時の自動住所入力を設置する。

wordpressのお問い合わせフォームプラグインの定番といえば、「contactForm7」が有名ですが、「MW WP Form」のほうもかなり実用度が高く、制作にかなり重宝しますので、紹介させていただきます。

MW WP Formの特徴

入力・確認・完了・エラー画面URLが設定できる。
入力エラーも細かくチェックボックスで簡単に選択で設定できる。(必須項目・文字数・半角英数・カナ等・・・)
郵便番号入力での住所自動入力が簡単に設置できる。

MW WP Formプラグインのダウンロードはこちら

https://wordpress.org/plugins/mw-wp-form/

1.functions.phpに下記を記述(ajaxzip3の読み込み)


function ajaxzip3_scripts() {
    wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js', array( 'jquery' ), '20140807', true );
}
add_action( 'wp_enqueue_scripts', 'ajaxzip3_scripts' );

function ajaxzip3_scripts() {

wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js', array( 'jquery' ), '20140807', true );

}

add_action( 'wp_enqueue_scripts', 'ajaxzip3_scripts' );

2.wordpressで動かすためのJSの記述。


<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zip2"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zip1','zip2','address1','address2');
    } )
} );
</script>

jQuery(function( $ ) {

jQuery( 'input[name="zip2"]' ).keyup( function( e ) {

AjaxZip3.zip2addr('zip1','zip2','address1','address2');

} )

} );

</script>

3.あとは、formを入力するだけで、実装できます。


<div class="res_input">

[mwform_text name="zip1" class="form2" id="zip1" size="10" placeholder="123" conv_half_alphanumeric="true"]-[mwform_text name="zip2" class="form2" id="zip2" size="10" placeholder="4567" conv_half_alphanumeric="true"]<span class="px_10">　※郵便番号を入力いただくと自動的に住所が入力されます。</span>


[mwform_select name="address1" id="address1" children="北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]


[mwform_text name="address2" id="address2" size="10" class="form1" placeholder="市区町村"]



[mwform_text name="strt" id="strt" size="10" class="form1" placeholder="以降の住所(番地・建物名等)"]


</div>

[mwform_text name="zip1" class="form2" id="zip1" size="10" placeholder="123" conv_half_alphanumeric="true"]-[mwform_text name="zip2" class="form2" id="zip2" size="10" placeholder="4567" conv_half_alphanumeric="true"]<span class="px_10">　※郵便番号を入力いただくと自動的に住所が入力されます。</span>

[mwform_select name="address1" id="address1" children="北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]

[mwform_text name="address2" id="address2" size="10" class="form1" placeholder="市区町村"]

[mwform_text name="strt" id="strt" size="10" class="form1" placeholder="以降の住所(番地・建物名等)"]

</div>

16.01.14　|　WEBデザイン制作・IT関連 KEiSoN★

カスタムフィールドテンプレートの値で絞り込み、一覧表示する方法。

ロゴデザインをリニューアルしました★

この記事を書いた人

KEiSoN★ > facebook

スカイゴールド株式会社　代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。