備忘録で残していく『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やらフォームやらあれこれいじったが、結局ショートコード追記忘れでした。

要注意。。。

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

離脱率減ると良いよね。

コメント