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

ちょっとめんどい。

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

MW WP FORMの場合

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

やっていく

こうなればいいので

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>

<input type="text" name="adr01" class="p-postal-code" placeholder="郵便番号">
<input type="text" name="adr02" class="p-region" placeholder="都道府県" readonly>
<input type="text" name="adr03" class="p-locality" placeholder="市区町村" readonly>
<input type="text" name="adr04" class="p-street-address" placeholder="町域" readonly>
<input type="text" name="adr05" class="p-extended-address" placeholder="丁目番地・建物名">

</form>

contactform7をこんな感じで作る。

<span class="p-country-name" style="display:none;">Japan</span>
[text adr01 class:p-postal-code readonly placeholder "郵便番号"]
[text adr02 class:p-region readonly placeholder "都道府県"]
[text adr03 class:p-locality readonly placeholder "市区町村"]
[text adr04 class:p-street-address readonly 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 属性を追加できますか?

はい。のショートコードに html_id と html_class の属性を…

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