Edited at

Contact Form 7 で YubinBango を使う

More than 1 year has passed since last update.


仕様



  • Contact Form 7 で郵便番号から住所を自動入力させたい

  • ajaxzip3 が GitHub の Yubinbango に移行したのでその対応


Yubinbango をテーマ(あるいはプラグイン)に埋め込む

wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );


Contact Form 7 でのフォームの設定



  1. <span class="p-country-name" style="display:none;">Japan</span> を入れておく

  2. 郵便番号と住所に class を入れる

    参照:http://contactform7.com/ja/text-fields/

郵便番号や住所の入力フォームを分ける場合は YubinBango の「その他の設定方法」を参照。

<p>お名前 (必須)<br />

[text* your-name] </p>

<p>メールアドレス (必須)<br />
[email* your-email] </p>

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号<br />
[text your-zipcode class:p-postal-code minlength:8 size:8]</p>

<p>住所<br />
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</p>

<p>メッセージ本文<br />
[textarea your-message] </p>

<p>[submit "送信"]</p>


Contact Form 7 のショートコードに form タグの class を指定する

参照:http://contactform7.com/ja/faq/can-i-add-id-and-class-attributes-to-a-form-element/

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


完成