WordPressのコンタクトフォーム7で郵便番号から住所を自動入力する方法

スポンサーリンク
ワードプレス

備忘録で残していく『WordPressの備忘録』コーナー。
初歩的なコトばかりですが、忘れっぽいボクのために残していきます。

今回はWordpressの定番問い合わせフォームプラグイン『Contactform7』で郵便番号から住所を自動入力する方法。

 

スポンサーリンク

とりあえず完成後のデモ

完成後のデモ

住所 必須
郵便番号(ハイフンあり)
住所
丁目以下

 

 

スポンサーリンク

郵便番号から住所を自動入力する方法

1.まずはcontactform7プラグインに『Yubinbango』を読み込ませる

左メニューの『プラグイン』→『プラグイン編集』→『Contactform7』を選択。

『wp-contact-form-7.php』に下記のコードを追加。

 

僕の環境ではプラグイン編集から編集するとエラーが出て内容が削除されてしまった。ので、FTPで編集した。要注意。

 

2.コンタクトフォームに入力フォームを追加する

コンタクトフォームに入力フォームを追加。

下記のコードを入力。

解説

【5行目】
どこでも良いので<span class="p-country-name" style="display:none;">Japan</span>を入力する。コレは必須。「日本の郵便番号だよ」という意味(多分)

【7行目】
郵便番号を入力する[text]class:p-postal-codeを指定する。

【9行目】
住所を自動入力する[text]に自動で入力したい内容を下記のClassで指定する。
今回は同じinputに都道府県、市区町村、町域、町域以降を入力。
複数行に分ける場合はそれぞれのinputにClass指定する。

 

内容Class
都道府県p-region
市区町村p-locality
町域p-street-address
町域以降p-extended-address

 

3.コンタクトフォームのショートコードに『h-adrクラス』を追加する

フォームを貼り付ける際に、ショートコードにhtml_class="h-adr"を追加する。

 

スポンサーリンク

まとめとあとがき

PHPの編集が管理画面上で出来なかった。
管理画面上で編集するとエラーが出て、.phpの内容が削除されてしまった。
プラグインをFTP上から再インストールして、FTPで.phpファイルをダウンロード→編集→アップロードした。焦った。

最後のショートコードに追記するのを忘れていて反映されなかった。
PHPやらフォームやらあれこれいじったが、結局ショートコード追記忘れでした。
要注意。。。

お問い合わせフォームで郵便番号が自動入力できるとユーザビリティ良いよね。
離脱率減ると良いよね。

ボクが使っているおすすめレンタルサーバー
MixHost
mixhost

とりあえず月額料金880円からと安い!
さらにLiteSpeedやhttp/2・QUIC(高速化プロトコル)対応でスピードが早い!
プランがアップグレード・ダウングレードどちらも自由に変更可能なので万が一バズった場合も安心!
有料ですが他サーバーからの引越しサービスもあります。
若干安定性に欠けるとのクチコミもあります(今のところ大丈夫)

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
じゅんちゃん

お出掛けやら流行りモノやら立ち飲みやら好き。
熱しやすく冷めやすい。
Nikon D5300ユーザー。
スマホ修理・MacBook修理のSMARTじゅんちゃんの城めぐりブログやってます。

じゅんちゃんをフォローする
ワードプレス
スポンサーリンク
じゅんちゃんをフォローする
じゅんちゃんのとれにゅー

コメント

タイトルとURLをコピーしました