【2017年版】Contact Form 7で複数カ所の郵便番号と住所に対応する

Contact Form 7 はWordPressで使うお問い合わせプラグインの圧倒的人気ナンバーワンのものです。ということで当ブログでもご利用いただいたり、コメントをいただくことが多くなっています。
今回はいただいたコメントへの返信をしようと思って試してみた内容をほかの方も使うかな？ということで記事にしてみました。

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

[ryus_blogcard url=”https://usortblog.com//ajaxzip3-contact-form-7-2016/”]

この記事が最近よく読まれたり、コメントをいただいているものです。Contact Form 7 の基本的な使い方について書いてあります。

郵便番号を入力したら住所が表示される、といういろいろな方法については2016年版の記事を参照してください。

「 同じフォーム内にもう一つ住所欄を作りたい」というコメントいただきました

この記事に「同じフォーム内にもう一つ住所欄を作りたい」というコメントをいただきました。

ということで Contact Form 7 で作るお問い合わせに複数の郵便番号に対応した欄を作る ということを試してみました。

郵便番号欄＋住所を2つ作るには？

郵便番号欄が2つあり、それぞれの郵便番号欄に郵便番号を入力したらそれぞれの住所欄に住所が入るようにします。

まずContact Form 7に

<p>郵便番号<br />
  [text zip 7/7 id:zip]</p>
<p>住所<br />
[text address 50/ id:address]</p>

<p>郵便番号<br />
  [text zip2 7/7 id:zip2]</p>
<p>住所<br />
[text address2 50/ id:address2]</p>

こんな感じに2組の郵便番号と住所欄を作ります。

利用している子テーマの functions.php に

function add_head_link() {
    echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
    echo "
    <script type=\"text/javascript\">
    jQuery(function($){
    $(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
    $(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address2\',\'address2\');');
})";
    echo '</script>';
}
add_action('wp_head', 'add_head_link');

このようにコードを追加します。　zip を入力したら、addressというidを持つ欄に住所が入力され、zip2を入力したら address2というidを持つ欄に住所が入力されます。

このようにして作ったお問い合わせを使っている動画はこちらになります。

郵便番号欄＋住所を3つ作るには？

ということは複数作るときには

・お問い合わせフォームに郵便番号欄と住所を複数作る
・作った数分の　onKyeUp イベントを作る（functions.php）

ということになります。言葉だとぴんとこないかもしれませんがもし3カ所作るとしたら、

Contact Form 7は

<p>郵便番号<br />
  [text zip 7/7 id:zip]</p>
<p>住所<br />
[text address 50/ id:address]</p>

<p>郵便番号<br />
  [text zip2 7/7 id:zip2]</p>
<p>住所<br />
[text address2 50/ id:address2]</p>

<p>郵便番号<br />
  [text zip3 7/7 id:zip3]</p>
<p>住所<br />
[text address3 50/ id:address3]</p>

このように3カ所の郵便番号欄と住所を作って、

functions.php には

function add_head_link() {
    echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
    echo "
    <script type=\"text/javascript\">
    jQuery(function($){
    $(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
    $(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address2\',\'address2\');');
    $(\"#zip3\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address3\',\'address3\');');
})";
    echo '</script>';
}
add_action('wp_head', 'add_head_link');

このように追加すればいいということになります。

おまけ：functions.phpに変更を加えるときの注意点

functions.phpに変更を加えたときに失敗するとwebサイトが真っ白になってしまうというような現象が起こってしまうことがありますので、そのあたりは自己責任でお願いします。

・functions.phpに修正を加える前に、functions.phpをコピーしておく
・Webからコピーしたコードでまれに半角の空白の文字コードがおかしくなり、正常に動作しないときがあるのでそういうことが疑われるときはコードの頭にあるスペースを削除してみる

というあたりをご注意ください。

また、自分でもしたことのある失敗なのですがfunctions.phpにfunctionを追加するときに全く同じfunction名を追加して真っ白にしてしまったこともあります。今回の場合は

function add_head_link() {
（中略）
}

のような部分が1つのfunctionsです。function名は　add_head_llink です。たとえば1カ所だったものを2カ所にしようとしたばあいはこのfunctionの中に1行追加すればいいのですが、まちがってもう一つ

function add_head_link() {
（中略）
}
function add_head_link() {
（中略）
}

このように同じ名前のfunctionを追加してしまうと、

Fatal error: Cannot redeclare add_head_link() (previously declared in C:\MAMP\htdocs\usort\wp-content\themes\saitama_child\functions.php:82) in C:\MAMP\htdocs\usort\wp-content\themes\saitama_child\functions.php on line 102

こんな感じのエラーがでて、webサイト全体が表示されなくなってしまいます。

このようになってしまった場合でも、保存してあったfunctions.phpを修正してアップロードすればwebサイトは見られるようになりますので事前のfunctions.phpの保存はとても大事です(^^)/