お問い合わせフォームやECサイトの注文フォームで、住所を一から手入力させられるのは、ユーザーにとって地味に面倒です。
そんな住所入力の手間を、郵便番号を入力するだけで解消してくれるのが「zipaddr-jp」というプラグイン。導入するだけでフォームの入力がスムーズになりますので、当記事でご紹介します。
zipaddr-jpの機能概要
zipaddr-jpは、郵便番号入力時に住所を自動入力してくれるプラグインです。概要は次のとおりです。
- 郵便番号を入力すると、都道府県・市区町村・地域（番地より前の住所）が自動入力される
- Contact Form 7、WPFormsなどの主要なフォームプラグインに対応
- WooCommerceやWelcartの注文フォームにも対応しており、購入時の住所入力の手間を減らせる
開発元の更新頻度も高く、多くのサイトで導入実績のある国産プラグインです。
プラグインのインストール
管理画面から「zipaddr-jp」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
使い方・設定方法
自動入力させるための設定
zipaddr-jpは、フォームの入力欄に決まったid名を付けるだけで動作します。以下がid名の命名規則です。
| 入力欄 | id名 |
|---|---|
| 郵便番号欄 | zip（もしくはzip1） |
| 都道府県欄 | pref |
| 市区町村欄 | city |
| 地域欄 | area |
たとえば、Contact Form 7であれば、郵便番号を入力してもらいたいテキストタグに「id:zip」、都道府県のタグに「id:pref」というように指定します。
Contact Form 7に設定した例
これだけで、郵便番号の入力に合わせて該当欄が自動入力されるようになります。
郵便番号を入れると住所が自動入力される
稼働環境の設定
有効化すると管理画面左下に「Zipaddr-JP」という項目が追加されます。
Zipaddr-JPの設定画面
ここでは主に次のような設定ができます。特に使う頻度が高いものを紹介します。
| 設定項目 | 内容 |
|---|---|
| 郵便番号の区切り文字 | 自動入力される郵便番号に入れる区切り文字を指定（初期値：「-」） |
| placeholder上書き | 入力欄にあらかじめ表示しておく案内文（プレースホルダー）を変更 |
| 選択後にフォーカスするid名 | 住所が自動入力された後、カーソルを移動させる入力欄のidを指定 |
| ガイダンス画面の文字サイズ | 候補が表示される画面の文字サイズをPC・スマホ別に調整 |
基本的にはプラグイン側の設定はデフォルトのままで問題なく動作するため、フォーム側の入力欄にid名を設定するだけで利用できます。
利用シーン
住所は入力ミスがあると商品が届かないこともあるので、フォームの中でも特に重要な項目です。
zipaddr-jpを使えば、郵便番号のみで住所が埋まるので、入力の手間や記入ミスも防げます。
次のように複数の住所を入力してもらいたい場面でも活用できますね。
- 「請求先住所」と「発送先住所」を別々に入力してほしいフォーム
- 「物件の所在地」と「連絡先住所」を並べて表示したいフォーム
- 「参加者本人」と「同伴者」の住所を両方入力してもらいたい申込フォーム
また、WooCommerceやWelcartなどのECカート系プラグインにも対応しているため、有効化するだけでフォームの入力フローを改善可能です。
まとめ
zipaddr-jpは、フォームのid名を設定するだけで郵便番号から住所を自動入力できるプラグインです。
入力ミスも減らせて、ユーザーの手間も減らせます。導入もかんたんなので、お問い合わせフォームやEC注文フォームを運用しているなら、ぜひ検討してみてください。
フォーム関連のおすすめ記事
お問い合わせフォームを一から作ろうとすると、「どの項目を入れるべきか、デザインをどう整えるか」など、意外と手間がかかるものです。 今回は「Contact Form 7」でそのまま使える汎用的なフォームのテンプレート集を作成しました。 用途別にHTMLとCSSをコピペするだけで使えるので、ぜひ...
問い合わせフォームからの反応が来ない。 そんな相談を受けるとき、原因の多くはデザインやキャッチコピーではなく、実はフォームの入力項目数にあります。今回は「入力項目を減らすだけで反応が変わる」という、シンプルながら見落とされがちなポイントを解説します。 問い合わせが来な...
WordPressテーマ集
コメント