こんにちは
新型コロナの影響で中々お客様が伊豆まで
遊びにこれない日が多い中
『今できる事』ということで
ホームページの更新をしております
興味のある人・困っている人は是非ご覧ください
やった事
ワードプレスを使って郵便番号入力すると
住所が自動入力されるお問い合わせフォームを作る
当ホームページはワードプレスで作成しています
プラグインが便利で多用していますが
使いすぎると悪影響も出てしまいます
昨年お問合せフォームを作成したときに
『郵便番号』を入れると自動的に
『都道府県』、『市区町村』などが
表示されるようにしようと
今まで実績のあるプラグインで作ってましたが
うまくいきませんでした
ちなみにうまく行かなかった組み合わせは
『Contact Form 7』『zipaddr-jp』
作り方などはこちらなどを参照しています
他のサイトなどはこの方法で問題なく作れたのですが
なぜか今回は全く動きません
ワードプレスのテーマも同じもの使って
同じように入れてもなぜか自動入力されません
そこで今回は別の方法で行う事にしました
YubinBangoを使って自動入力を作る
『zipaddr-jp』の時はid:zipを使って作りました
例）
郵便番号[text* zip id:zip]
都道府県[text* pref id:pref]
今回のも操作としては似てますが
ちょっとだけ変わります
YubinBangoについても色々なサイトを見て
同じようにやったみましたが
最初はなぜかうまく行きません
おそらく環境が違うのでダメかもしれません
そこで今回うまくいったものをメモします
色々試してうまく行かない人がいましたら
もしよろしければ
こちらを参考にしてみてください
但し、自己責任でお願いしますね♪
今回の手順
まずこちらが今回作ったフォームになります
ライブラリを読み込む
WordPressのテーマの『functions.php』に次の記述をします
ライブラリを読み込むためだそうです
wp_enqueue_script( ‘yubinbango’, ‘https://yubinbango.github.io/yubinbango/yubinbango.js’, array(), null, true );
私が使っているものを例にすると
『外観』→『テーマエディタ』→
『テーマのための関数 (functions.php)』
こちらを編集しました
最後の『？＞』という文字がある手前に貼り付けました
例）
wp_enqueue_script( ‘yubinbango’, ‘https://yubinbango.github.io/yubinbango/yubinbango.js’, array(), null, true );
?>
コンタクトフォームでお問い合わせを作る
コンタクトフォームの編集画面に次のコードを入れます
これは日本の郵便番号を取得するものらしいです
入力する場所はどこでも良いそうですが、私は直前に入れました
<span class=”p-country-name” style=”display: none;”>Japan</span>
郵便番号入力
class:p-postal-code
都道府県名：自動入力
class:p-region
市町村区：自動入力
class:p-locality
町域：自動入力
class:p-street-address
通常はこれだけで自動入力されるそうなのですが
おそらく私のコードが原因だと思いますが
次のようにしてようやく表示されました
<div class=”h-adr”> ～ </div>
例としてこのようにしました
<div class=”h-adr”>
<span class=”p-country-name” style=”display:none;”>Japan</span>
<span class=”haveto”>必須</span><span>郵便番号</span>
[text* zip class:p-postal-code watermark”例：111-2222″]
<span class=”haveto”>必須</span><span>都道府県</span>
[text* pref class:p-region watermark”例：○×県”]
<span class=”haveto”>必須</span><span>ご住所1</span>
[text* addr class:p-locality class:p-street-address watermark”例：△市□町”]
<span class=”haveto”>必須</span><span>ご住所2</span>
[text* addr2 class:p-extended-address watermark”例：1-3-10 コーポABC A102″]
</div>
ショートコードに追加する
コンタクトフォームのショートコードが作成されるかと思いますが
そちらのフォームに『 html_class=“h-adr”』を追加します
例）
[contact-form-7 id="1000" title="お申込み"]
↓
[contact-form-7 id="1000" title="お申込み" html_class="h-adr"]
最後に
以上で当HPでは自動入力ができるようになりました
お問い合わせフォームももう少し入力しやすいように改善していく予定です
お問い合わせフォームの良いテクニックなどがございましたらアドバイスお待ちしております
