住所入力が必要な資料請求フォーム等で郵便番号から市区町村を自動入力する補助プラグイン「Contact Form 7 Zip Code Assist」

お問い合わせフォームや資料請求フォームでは「入力項目が多すぎると離脱率が上がってしまう」という統計データが出ています。入力項目が１つでも増えると同時にユーザー側への負担を増やしてしまうので離脱率が上がってしまうのは当然ですよね。もしオプトインが目的なのであればメールアドレスのみに項目を絞れば離脱率の向上は抑制できます。しかし、業種によってはあらかじめ多くの情報入力を必要とするケースもあります。特に資料請求など“住所入力が必要”となる状況であれば項目数は絞れません。

住所入力で「都道府県や市区町村」など必要情報が必然的に多くなる状況で離脱率が上昇するのを防ぐ方法はあるのでしょうか？対策としてはユーザーの入力手間を最小限に抑える解決策があります。具体的には郵便番号の入力時に都道府県や市区町村をデータベースから読み込んで自動で補完入力するテクニック（Yubinbango.js）です。本記事では「Yubinbango.js」を元にfunctions.phpへの追記も不要とした郵便番号補助プラグイン「Contact Form 7 Zip Code Assist」も作成しておりますので、郵便番号の自動連携入力を導入されたい場合はぜひともプラグインをお試しくださいませ。

まずはプラグインをインストールしていきましょう。「プラグイン > 新規追加」をクリック。

そして「プラグインのアップロード」をクリックしましょう。

すると以下の画面が表示されます。

次にデスクトップに保存した「ZIPファイル」を「ファイルを選択」へドラッグしてください。または「ファイルを選択」をクリックしてからデスクトップの「ZIPファイル」を選んでも問題ありません。

選択ができたら「今すぐインストール」をクリック。

インストールが完了すると「プラグインを有効化」をクリックしましょう。

有効化が完了すると以下のメッセージが表示されます。

インストール済みプラグイン一覧にもプラグイン名が表示されていればインストール作業は完了です。

では次に郵便番号の自動入力フォームを作成していきましょう。管理画面の「お問い合わせ > 新規追加」をクリック。もしすでに作成済みのお問い合わせフォームに導入する場合は「お問い合わせ > コンタクトフォーム」から該当のフォームを開いて編集を進めていきます。

新しくフォームを作る場合は以下の画面が表示されます。フォーム部分を調整して郵便番号と住所の入力欄を設定していきましょう。

郵便番号箇所に差し込むソースは以下となります。

<label> 郵便番号
    [text your-zipcode class:p-postal-code maxlength:8 size:8 placeholder "154-0024"] </label>

そして、住所の続きを差し込むソースが以下です。

<label> 住所
    [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "東京都世田谷区三軒茶屋1-2-3郵便ビル1F"] </label>

そして、以下のhtmlタグを最下部へ差し込みます。なお、style="display: none;"でCSS制御していますので要素自体は表示されません。差し込み位置は最上部でも問題ありませんのでご安心ください。

<span class="p-country-name" style="display: none;">Japan</span>

実際に上記３つのソースを差し込んだ状態が以下となります。

念のためにソースコードを表示しておきます。

<label> お名前 (必須)
    [text* your-name placeholder "山田　太郎"] </label>

<label> メールアドレス (必須)
    [email* your-email placeholder "taro@example.com"] </label>

<label> 郵便番号
    [text your-zipcode class:p-postal-code maxlength:8 size:8 placeholder "154-0024"] </label>

<label> 住所
    [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "東京都世田谷区三軒茶屋1-2-3郵便ビル1F"] </label>

<label> メッセージ本文
    [textarea your-message placeholder "ご質問があればお気軽にどうぞ"] </label>

[submit "送信"]
<span class="p-country-name" style="display: none;">Japan</span>

入力ができたら「保存」をクリック。

新たにフォームが作成されました。

次にページ側に設置するためにショートコードをコピーしておきましょう。ショートコードを選択した上で右クリックからコピーしてください。

そしてページ側にショートコードを貼り付けてください。入力時は必ずエディターを「テキスト」モードに切り替えてください。

貼り付けた後にショートコードへ下記のソースを足してください。

html_class="h-adr"

実際の状態が以下となります。

ソースを足したコードのサンプルが下記です。

[contact-form-7 id="XXX" title="フォームのタイトル" html_class="h-adr"]

最後にショートコードを設置したページ側を「公開」して完了。

公開が完了すると以下のメッセージが表示されます。

設置したフォームを見てみましょう。

実際に郵便番号の入力テストをしてみます。参考として東京都世田谷区上馬の郵便番号「154-0011」を入れると住所の欄に「東京都世田谷区上馬」までが自動で表示されました。郵便番号の「ハイフン（-）」はあっても無くてもどちらの状態でも自動挿入に影響はありません。とても気の利いた安心設計ですね。

上記の手順では住所入力欄が１つとなっていますが、複数の項目に分ける実装も可能です。

<label> お名前 (必須)
    [text* your-name placeholder "山田　太郎"] </label>

<label> メールアドレス (必須)
    [email* your-email placeholder "taro@example.com"] </label>

<label>〒 [text your-zipcode-1 class:p-postal-code maxlength:3 size:3 placeholder "154"]</label> - <label>[text your-zipcode-2 class:p-postal-code maxlength:4 size:4 placeholder "0024"] </label>
<label> 都道府県
    [text your-address-1 class:p-region readonly placeholder "郵便番号で自動入力"] </label>
<label> 市区町村
    [text your-address-2 class:p-locality class:p-street-address readonly placeholder "郵便番号で自動入力"] </label>
<label> 番地
    [text your-address-3 class:p-extended-address-1 placeholder "1-2-3"] </label>
<label> 建物名
    [text your-address-4 class:p-extended-address-2 placeholder "郵便ビル1F"] </label>

<label> メッセージ本文
    [textarea your-message placeholder "ご質問があればお気軽にどうぞ"] </label>

[submit "送信"]
<span class="p-country-name" style="display: none;">Japan</span>

念のため以下のリンク先にデモページを準備しています。デモページでは「住所欄が１つのパターン」と「住所を複数欄に分けるパターン」の２種類がご覧いただけます。ぜひご確認くださいませ。