使いやすいメールフォームの必須として、郵便番号の入力で住所が自動入力される仕組みがあります。今まではzipaddr-jpプラグインを使用していましたが、アップデートも面倒ですし、出来るだけプラグインは使用しない方が良いのかな～という事で、先送りしていたプラグイン無しの実装をやってみました。
初心者でも大変ではありません。3ステップで完成です。ぜひ時間がある時にやってみて！
ライブラリをリンク
YubinBangoという無料のライブラリを使用します。2種類の方法をご紹介します。
フックを使う場合
子テーマのfunction.phpに追記して下さい。
フックを使って、ページのスラッグが「contact」の場合のみ、ライブラリが読み込まれる様にしています。つまり、メールフォームを設置している固定ページのスラッグをcontactに設定している必要があります。（ご自身のページのスラッグ名に修正して下さい）
//youbinbango
function zip_library() {
if(is_page('contact')){
wp_enqueue_script( 'youbinbango-js','https://yubinbango.github.io/yubinbango/yubinbango.js', array(), 'null', true );
}
}
add_action( 'wp_enqueue_scripts', 'zip_library' );ちなみに、複数のフォームを設定する場合はarrayを使います
function zip_library() {
if(is_page(array('apply', 'apply2' ) ) ) {
wp_enqueue_script( 'youbinbango-js','https://yubinbango.github.io/yubinbango/yubinbango.js', array(), 'null', true );
}
}
add_action( 'wp_enqueue_scripts', 'zip_library' );
直接書き込む場合
Contact Form 7 のフォームのコードの一番初めにスクリプトを書く
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
↑この様にフォームの上に書く
<dl class="contact7">
<dt>お名前<span class="form7-require">必須</span></dt>
<dd>[text* your-name]</dd>
・
・
・フォームの作成
dl>dt>dd構成で作った場合の例です。郵便番号はハイフンの有無、半角、全角に関係なく使える様になっています。class:XXXを書き足すだけです。
<dt>郵便番号<span class="form7-require">必須</span></dt>
<dd>[text zip class:p-postal-code minlength:7 placeholder"住所自動入力"]</dd>
<dt>都道府県</dt>
<dd>[text pref class:p-region]</dd>
<dt>市区</dt>
<dd>[text city class:p-locality class:p-street-address class:p-extended-address]</dd>
<dt>番地とマンション名<span class="form7-require">必須</span></dt>
<dd>[text* addr01 placeholder"例：1-2-3 マンション名"]</dd>「日本」の郵便番号を指定する設定が必要です。display:noneで見えない様にしています。Contact Form 7 フォームの上か、下に書き足します。「以降の住所」というのが良く分からないのですが、一応付けました。多分、外国の住所の場合に機能するのではないかと思います。
<span class="p-country-name" style="display:none;">Japan</span>| 住所 | class |
| 都道府県 | p-region |
| 市区町村 | p-locality |
| 町域 | p-street-address |
| 以降の住所 | p-extended-address |
フォーム内でYubinBangoを使用する設定
どう呼べば良いのか分かりませんが、「formタグのclass指定の中に h-adr が含まれていること」使用出来る様にするには必要な事です。2種類の方法がありますので、お好みでどうぞ。
フォームに設定
単にフォーム内にclass=h-adrを足す。
<form class="h-adr">
とか、
<dl class="h-adr"> などショートコードで設定
上記では都合が悪い場合もあると思います。その場合は、ショートコードに書く事も出来ます。
フォームを設置する固定ページに記載するContact Form 7のショートコードに、html_class=”h-adr” を付け足します。
[contact-form-7 id="数字" title="お問い合わせ" html_class="h-adr"]
コメント ※ハンドルネームでお願いします