【2016年版】Contact Form 7で郵便番号を入れたら住所が入るようにする

郵便番号から住所を表示するライブラリーAjaxZip3を使うと、リンクするだけで大量の郵便番号から住所を取得することができます。
最近そのAjaxZip3を仕事で使うことがあったり、Facebookでそれに関する書き込みを見たりコメントをいただいたりしたのでこの機会にAjaxZip3を使ってContact Form 7で郵便番号を入れたら住所が入るようにする、について前回の記事より簡単にできる改訂版の記事を書こうと思います。

AjaxZip3に関する情報 — googlecode.com が利用できなくなる

昨年末に、

Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。

というこの記事がたまたまタイムラインに流れました。これを見たときに「あ~!そうかー、それじゃぁ変えなくっちゃ」と思ったのですがよく考えると昨年9月頃にそのことに気がついて、記事を修正していました。

2016年1月25日にGoogleにあるライブラリーは使えなくなるようですのでもし、

このように googlecode.com のソースを使っている場合は

この github のソースを使うように変更する必要があります。

WordPressのプラグイン Contact Form 7 でAjaxZip3を使えるようにする

お問い合わせフォームのプラグインでは一番有名なContact Form 7AjaxZip3を使えるようにします。前回のblog記事よりもう少し簡単に入れられるように変えてみました。

郵便番号7桁の入力欄で1つの住所欄に出力する方法

インストールした Contact Form 7 に郵便番号7桁の入力欄と住所欄を追加します。

子テーマfunctions.php

を追加します。

内容は、
add_action(‘wp_head’ で指定したfunctioにhead内に表示させたいソースを記述
JQuery https://ajaxzip3.github.io/ajaxzip3.js を読み込む
JQuery zip というidを持つ項目に入力があったときに(onKeyUp)addressという名前を持つ項目に住所を表示する

コードとなっています。

この状態で、お問い合わせフォームに郵便番号を入力すると住所欄に住所が貼り付けられます。

郵便番号3桁+4桁の入力欄で3つの住所欄に出力する方法

郵便番号欄を3桁+4桁の入力欄にして、3つの住所欄(都道府県、市区町村、町域大字)に郵便番号から該当する住所を表示します。

Contact Form 7 に項目を追加します。

これで郵便番号が2つと住所欄が3つ表示されるようになります。

子テーマfunctions.phpに以下のコードを追加します。

先ほどの郵便番号が1つで住所が1つと共存できるので、新しく zip2というidが入力されたらzip1zip2から住所を検索してprefecturecitystreetという名前の項目に表示するというコードを1行追加しました。

これを実行すると、

このように郵便番号を入力したときに3つの住所欄に値が表示されるようになります。

これで最小入力最小出力最大入力最大出力の例をここに書きましたのであとはお好みで入力欄や住所欄の数を変えるといいかなと思います。

おまけ:入力フォームの幅が100%固定になってしまうテーマでの対応

既に貼り付けてある画面のハードコピーを見ると郵便番号欄が100%の幅になってしまっています。

ここで使っている親テーマは twentyfifteen フォーム部品の幅は100%となっています。Contact Form 7のときだけこの指定を外したいと思いました。

使っている子テーマstyle.cssに、

この記述を追加します。これはContact Form 7のテキスト入力域でclasswpcf7-textのときだけwidth:auto(自動)にするという記述です。

再度読み込み直すと、

こんな感じに郵便番号欄らしくなりました(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. みやこ より:

    こんにちは。はじめまして。
    記事を参考にさせていただいて、テストしてみたのですが、「郵便番号3桁+4桁の入力欄で3つの住所欄に出力する方法」のソースを「functions.php」に記述して保存すると、

    Parse error: syntax error, unexpected ‘ echo’ (T_STRING) in /フルパス/wp-content/themes/twentyfifteen/functions.php on line XXX

    のような形のエラーが出て、functions.phpをアップロードし直さないとサイトにアクセスできなくなってしまいました。
    試したテーマは「Twenty Fifteen」「Twenty Ten」です。

    私の環境の問題なのか分からないのですが・・・

    • 兎本美佳 兎本美佳 より:

      みやこさん、こんにちは!スミマセン、確かに確認してみたらエラーになっていました。必ず実行したコードを張っているつもりなのにもう一カ所もなんか変だったのでいったい何をしてしまったのか…
      今は正しいコードを張ったと思いますのでもう一度試してみていただけますか?
      このときの自分がいったい何を確認してコードを張ったのか全く分からず、、、すみませんがよろしくお願いしますm(_ _)m

  2. みやこ より:

    兎本美佳さま
    早速のお返事、ありがとうございます!
    試してみたところ、またエラーになってしまったので、コピーしたソースを確認したところ、インデントのスペースに非改行スペースが混じっていました。
    私の環境では、インデントをタブに差し替えましたらうまく動作しました!ありがとうございますー。

    • 兎本美佳 兎本美佳 より:

      みやこさん、こんにちは!さっそく試してみていただき、ありがとうございます。
      コードも間違っていたのですが、私も試したときに見た目は全く同じで、カーソルで戻しても4個(漢字のスペースが入っていればもっと少ないはず)、なのになぜかスペースではない文字が入っていておかしいなぁと思っていました。スペースに書き換えてアップしたのですが、どうもコードの形にするときにその「非改行スペース」になってしまうのかなぁ?と思います。教えていただき、ありがとうございました。なぜ入ってしまうか、原因がわかるといいのですが~

  3. みどりや より:

    兎本美佳さま、ごきげんよう。

    固定ページに直接、JavaScriptを記述しないのは何故ですか?

    • 兎本美佳 兎本美佳 より:

      みどりやさん、こんにちは!

      >固定ページに直接、JavaScriptを記述しないのは何故ですか?

      そうですね、、、特に深い意味はありませんでした(^_^;。使い回しが効くかなと思って別にしてたりしましたが、直接書いた方がblogとかでは説明がしやすいですよね~

      • みどりや より:

        兎本美佳さま、ごきげんよう。

        レスありがとうございます。

        まだ、WordPressでサイトを作成する場合の一般的な流儀みたいなものがわかっていないので質問させて頂きました。

        私の作業している環境で試した時には、scriptタグの前後に、勝手にpタグが挿入されたり(はまあいいとして)、
        スクリプトの改行や空白の入れ方によっては、スクリプトの中にも、勝手にpタグが入り込み動かなくなったりしたので、ひょっとしたら関係あるかと思いましたが、そういうことではないんですね。

        なんで、コンタクトフォームの方でpostすると、WAFが文句を言うのに、
        固定ページだと沈黙しているのかわかりませんが、わからにないまま作業しています。

        ちなみに私の方は、

        こんな感じのコードを固定ページに貼り付けていますが、表示してソースを見ると

        となっていました。

  4. みどりや より:

    タグは表示されないのですね。失礼いたしました。

  5. Sakoryu より:

    はじめまして
    phpコードを子テーマのfunctions.phpに貼り付けたところ
    500エラーが出てサイト自体も表示されなくなってしまいました。
    サーバはロリポップですが、個々のレンタルサーバーの仕様によって、
    クロススプリクティング防止で上記のようなコードが無効化される等のケースが
    あるのでしょうか?
    ご確認のほど、よろしくお願い致します

    • 兎本美佳 兎本美佳 より:

      Sakoryuさん、おはようございます。今一度、この記事を参照して自分のWebサイトで試してみたのですが問題なく表示されました。今回の追加で「個々のレンタルサーバーの仕様によって、クロススプリクティング防止で上記のようなコードが無効化される」というようなことが起こるということは、自分としては考えられません。可能性として functions.php にコードを追加した時に誤った場所(他のfunctionが無効になるような場所)にコードを貼り付けてしまったなどということはないでしょうか。
      また、まれになのですが、ブログからコピーして貼り付けたときに半角スペースが異なるコードになってしまうという現象があります。
      ref http://www.saka-en.com/java/c2a0/
      そうだった場合はコピーしたコードを貼り付けてから行の頭のスペース(にみえるところ)を自分で半角スペースに置き換えていくという方法で解決することができます。

  6. あやの より:

    はじめまして。
    こちらのコードを使って無事実装することが出来ました!

    ・・・が、同じフォーム内にもう一つ住所欄を作る必要があり、どうしてもうまくいきません。
    色々試して12時間経過。
    あっさりできたりしないのでしょうか・・・。
    もし可能であればご教授願います(泣)

    • 兎本美佳 兎本美佳 より:

      あやのさん、おはようございます。ほかの方もこういうご要望があるような気がしたので、ブログに書いてみました。
      https://usortblog.com/ajaxzip3-contact-form-7-2017/
      こちらになります。こちらでわかるのではないかなと思うのですが、もしかして勘違いでしたらまたコメントください(^^)/

      • あやの より:

        ありがとうございます!
        できました!!
        うわぁぁぁん!うれしいです!

        わざわざブログにしていただいて本当にありがとうございました。
        今まで苦労は何だったのかと^^;

        今回郵便番号を【3桁-4桁】で表示させることにこだわっていたので、ここのコードと、新しく作ってくださったコードを上下で貼って見比べて「うむむ」としながらやってみたらものの10分で実装できました!昨日の時点で惜しいところまで行ってたことが分かりました。あと一手が足りなかったようです。
        お陰様で一つ賢くなりました~!!
        本当にありがとうございます。

        • 兎本美佳 兎本美佳 より:

          あやのさん、おはようございます。ブログが役立ったと聞き、うれしいです。ご報告ありがとうございます(^^)/

          書いている途中で「あれ?別のパターンだったらどうしよう?」と思ってました。3桁4桁だったんですね。見比べてできたということはほんとにあともうちょっとだったとおもいますー。
          こちらこそ、ブログのネタいただけてうれしく思ってます。ありがとうございます~

  7. はま より:

    コンタクトフォーム7のzip参照参考にさせて頂きました。ありがとうございました。
    ただ、区分として、
    市区町村+番地=「○○市+○○町 or ○○▼丁目」+「▲▲号◆番地」=「city+street」+「street_no」
    のようになるので、city+streetのまとめを教えて頂けると助かります。
    でも、十分活用させていただいています。本当に有り難うございました。

    • 兎本美佳 兎本美佳 より:

      はまさん、こんにちは。

      >市区町村+番地=「○○市+○○町 or ○○▼丁目」+「▲▲号◆番地」=「city+street」+「street_no」
      >のようになるので、city+streetのまとめを教えて頂けると助かります。

      ちょっと上記でやりたいことがわかりませんでした。記事では郵便番号を入れると 八王子市三崎町 が一つの項目に入るようになりますが これをどのようになさりたい感じでしょうか?

トップへ戻る