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回ほど往復しながら活動中。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
最近は、Shopify構築にも携わっている。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。