WordPress お問合せフォームの郵便番号に入力したら住所を自動で入力する機能を追加 ( Contact Form 7 )

概要説明

郵便番号を入力するとフォームの住所が自動入力される機能をWordPressのContact Form 7で実装。資料請求フォームなどで活用できるカスタマイズ。

functions.php
/*----------------------------------------------------
 郵便番号から住所を自動で入力(お問い合わせページ用)
----------------------------------------------------*/
if ( !function_exists( 'my_script_contact' ) ){
    function my_script_contact() {
        wp_enqueue_script( 'ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js' );
        wp_enqueue_script( 'page-contact', get_template_directory_uri() . '/js/contact.js');
    }
    add_action( 'wp_enqueue_scripts', 'my_script_contact' );
}

contact.js ファイルを新規作成してアップロード

contact.js
jQuery(function($){
    $( '#zip' ).keyup( function() {
        AjaxZip3.zip2addr( this, '', 'prefecture', 'address' );
    });
});
<label> 郵便番号
    [text zip id:zip] </label>

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

<label> 住所
    [text address] </label>

フォーム確認

WordPress お問合せフォームの郵便番号に入力したら住所を自動で入力する機能を追加 ( Contact Form 7 )

郵便番号を入力して自動的に住所が設定されるかを確認

関連機能

  1. WordPress 複数サイトで同じフッターを表示させる簡単な方法 1サイト更新で全サイトに反映が可能

  2. WordPress REST API を無効化 ( 管理者ログイン時、Contact Form 7 プラグイン利用時は有効 )

  3. WordPress ワンポイントメッセージ表示ショートコード

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

ぶつからなきゃ
伝わらないことだってあるよ
例えば、自分がどれくらい
真剣なのか
とかね

ソードアート・オンライン
by ユウキ

Profile

PAGE TOP
Amazon プライム対象