MW WP FormでYubinBangoを使う方法

WordPressで利用できる高機能なメールフォーム「MW WP Form」で、住所自動入力の「yubinbango」を使わせいただこうとして、少し悩んだので覚え書きです。

yubinbango.js自体は使い方は非常に簡単なのですが、<form>にh-adrというclassを追加してあげないといけません。

しかしMW WP Formでformにclassを追加する方法がわかりません。アクションフックが充実しているので、
mwform_settings_meta_boxかmwform_after_exec_shortcodeあたりを使えばformタグを直接いじれるのかもしれませんが、私はサーバーサイドの知識がありませんので試していません。

というわけで、javascriptでclassを追加してあげます。

<script>
document.querySelector('.mw_wp_form_input form').classList.add('h-adr');
</script>

郵便番号とテキストフィールドにはデフォルトの機能でclassを足せますので、後は困ることはないと思います。

Javascript部はテンプレート内でもMW WP Form内でも、好きなところに記載してください。jQueryは使用していないので、どこでも構いません。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script>
document.querySelector('.mw_wp_form_input form').classList.add('h-adr');
</script>

下記はformタグ内に記入しないといけないので、当然MW WP Form内に記述します。

<input type="hidden" class="p-country-name" value="Japan">
[mwform_zip name="zip" class="p-postal-code"]
[mwform_text name="address" class="p-region p-locality p-street-address p-extended-address"]