備忘録で残していく『WordPressの備忘録』コーナー。
初歩的なコトばかりですが、忘れっぽいボクのために残していきます。
今回はWordpressの定番問い合わせフォームプラグイン『Contactform7』で郵便番号から住所を自動入力する方法。
とりあえず完成後のデモ
完成後のデモ
郵便番号から住所を自動入力する方法
1.まずはcontactform7プラグインに『Yubinbango』を読み込ませる
左メニューの『プラグイン』→『プラグイン編集』→『Contactform7』を選択。
『wp-contact-form-7.php』に下記のコードを追加。
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やらフォームやらあれこれいじったが、結局ショートコード追記忘れでした。
要注意。。。
お問い合わせフォームで郵便番号が自動入力できるとユーザビリティ良いよね。
離脱率減ると良いよね。
コメント