ユーザーに優しい入力フォームを作ろう！ Contact Form 7編

<span style="color:red">※</span>は必須
<label> 氏名<span style="color:red">※</span>
    [text* your-name id:name] </label>

<label> 氏名 フリガナ<span style="color:red">※</span>
    [text* your-name-kana id:name-kana] </label>

<label> 郵便番号<span style="color:red">※</span>
[text* your-zip id:zip placeholder "例)123-5678"] </label>

<label> 都道府県<span style="color:red">※</span>
[select* your-pref id:pref "【選択してください】" "optgroup-北海道・東北地方" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "endoptgroup" "optgroup-関東地方" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "endoptgroup" "optgroup-中部地方" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "endoptgroup" "optgroup-近畿地方" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "endoptgroup" "optgroup-中国地方" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "endoptgroup" "optgroup-四国地方" "徳島県" "香川県" "愛媛県" "高知県" "endoptgroup" "optgroup-九州・沖縄地方" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県" "endoptgroup"]</label>

<label> 住所<span style="color:red">※</span>
[text* your-address01 id:address01] </label>

<label> 住所（ビル名など）
[text* your-address02 id:address02] </label>

<label> 電話番号<span style="color:red">※</span>
    [tel* your-tel] </label>

<label> メールアドレス<span style="color:red">※</span>
    [email* your-email] </label>

<label> メールアドレス確認<span style="color:red">※</span>
    [email* your-email_confirm] </label>

[submit "送信"]

jQuery(function ($) {
  // 自動カナ入力
  $(document).ready(
    function () {
      $.fn.autoKana('#name', '#name-kana', {
        katakana: true //trueでカタカナ、falseでひらがな（デフォルト）
      });
    });

  //郵便番号、住所自動入力
  $('#zip').keyup(function () {
    AjaxZip3.zip2addr(this, '', 'your-pref', 'your-address01'); // ←ここはname属性値を入力
  });

});

<?php
function add_files(){
    // WordPress本体のjquery.jsを読み込まない
    wp_deregister_script('jquery');

    // 指定したjQueryの読み込み
    wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.6.0.min.js', array(), '3.6.0', false);

    //郵便番号自動入力
    wp_enqueue_script('ajaxzip3', get_stylesheet_directory_uri() . '/js/ajaxzip3.js');

    //カナ自動入力
    wp_enqueue_script('autoKana', get_stylesheet_directory_uri() . '/js/jquery.autoKana.js');

    //index.js
    wp_enqueue_script('index', get_stylesheet_directory_uri() . '/js/index.js');
}
add_action('wp_enqueue_scripts', 'add_files');