スポンサーリンク

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をコピーしました