[wp]Contact Form7でYubinbango.jsを使う方法

ちょっとめんどい。

MW WP FORMの場合
やっていく
注意点というか。

MW WP FORMの場合

以前まとめたのでこちらを参照。

やっていく

contactform7をこんな感じで作る。

<span class="p-country-name" style="display:none;">Japan</span>
[text adr01 class:p-postal-code placeholder "郵便番号"]
[text adr02 class:p-region placeholder "都道府県"]
[text adr03 class:p-locality placeholder "市区町村"]
[text adr04 class:p-street-address placeholder "町域"]
[text adr05 class:p-extended-address placeholder "丁目番地・建物名"]

住所を1つにまとめるならこうなる。

<span class="p-country-name" style="display:none;">Japan</span>
[text zip class:p-postal-code placeholder "郵便番号"]
[text adr class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所"]

生成されるショートコードをちょっといじって、classを追加して埋め込む。

[contact-form-7 id="***" title="お問い合わせ" html_class="h-adr"]

備考：WP既存のコードなら平気だけど、HCBでショートコードを埋め込むと変換されるっぽい

ライブラリもカスタムHTMLで埋め込む。
テーマ内で埋め込んでもOK。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

注意点というか。

ContactForm7内に<script>を埋め込むとエラーを吐くんで、埋め込み先でライブラリを読み込む必要がある。MW WP FORMは必要な要素を全部そっちに記述できたから楽だったんだけどね。まあ、セキュリティ面というかなんというか、どっちがいいんだろうね。ともあれどちらも動くので問題はない。

<form>にclassを追加する場合はショートコードに追記する必要がある。jsで.h-adrを追加しても反映されない。追記方法は公式が案内している。

form 要素に id や class 属性を追加できますか? | Contact Form 7 [日本語]

知っておけば問題ないけど、知らないと戸惑うので知るのがいいです。