MW WP Form, Contact Form 7でYubinBango(住所自動入力)を使う時formタグにclass追加する方法

2020-06-18

WordPressでフォームを設置するときの定番プラグインはContact Form 7とMW WP Formです。

専らContact Form 7を利用していたのですが、確認画面が欲しいという要望が多くデフォルトで確認画面、送信完了画面を設定できるMW WP Formも利用し始めてます。

フォームで住所を入力するのに便利なライブラリYubinBango
https://github.com/yubinbango/yubinbango

ajaxzip3の後継ですね。

上記サイトにも書かれてますがこのYubinBangoを使う時に必ず設定するものは

  1. YubinBangoライブラリを読み込む
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  2. formタグにクラスを設定する
    <form class="h-adr">
  3. form内に国コードが設定されている
    <input type="hidden" class="p-country-name" value="Japan">
  4. 郵便番号入力欄にp-postal-codeというclassが設定されている
  5. 住所を自動入力する欄のclassに都道府県(p-region)、市町村区(p-locality)、町(p-street-address)、それ以降の住所(p-extended-address)が設定されている

です。

1.Yubinbangoライブラリを読み込む wp_enqueue_script

if ( is_page('form') ) {
		wp_enqueue_script('youbinbango-js','https://yubinbango.github.io/yubinbango/yubinbango.js',array(),NULL,true);
	}

formという固定ページでのみライブラリを読み込ませるようにします。

2.formタグにh-adrクラスを設定する

formタグにclassを付与するには

Contact Form 7の場合:

cf7ショートコードに設定します。

[contact-form-7 id="1234" html_class="h-adr]

MW WP Formの場合:

functions.phpで設定します。

function mwform_form_class() {
  ?>
    <script>
      jQuery(function($) {
        $( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
      });
    </script>
  <?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );

MW WP Formで出力される内にクラスを指定したい

3〜5はContact Form7,MW WP Formのformを設定する部分でclassを追加します。

[ Contact Form 7 ] 郵便番号の場合

[text* zip-code class:required class:p-postal-code maxlength:8]

[ MW WP Form ] 郵便番号の場合

郵便番号フィールドを設定すると3桁、4桁の分割されたフィールドが設定できます。

[mwform_zip name="zip-code" class="p-postal-code"]

普通のテキストフィールドで設定したい時にはこれ

[mwform_text name="zip-code" class="p-postal-code" maxlength="8" conv_half_alphanumeric="true"]