Contact Form7でチェック内容に応じてテキストボックスへ自動入力させる方法

「Checkbox を選んだタイミングで、自動的にテキストボックスへ“数字や任意の値”を入力させたい」
というカスタマイズは、Contact Form 7 単体では実現できませんが、
JavaScript（jQueryなしでもOK）を外部から読み込むことで簡単に実現できます。

この記事では、CF7フォームのHTML例・JavaScript例・貼り付け位置まで、わかりやすくご紹介します！

実装イメージ

• チェックAを入れる → テキスト①に「1」という数字が自動で入力される
• チェックBを入れる → テキスト②に「2」が自動入力
• チェックを外す → 自動で空欄に戻る

Contact Form7フォーム（フォーム編集画面に貼る）

<div class="kyoka-area">
[checkbox kyouka use_label_element class:kyoka "A項目" "B項目" "C項目"]
<div class="kyoka-fields"> 
<p>[text kyoka_custom1 class:kyoka-custom placeholder "自動入力欄1"]</p> 
<p>[text kyoka_custom2 class:kyoka-custom placeholder "自動入力欄2"]</p> 
<p>[text kyoka_custom3 class:kyoka-custom placeholder "自動入力欄3"]</p> 
</div> 
</div>

footer.php に貼る JavaScript（コードはサンプルです）

※Contact Form7 の入力欄へフォーム内ではなく「テーマのフッター」からJSを読み込ませることがポイントです。

<script>
document.addEventListener('DOMContentLoaded', function () {
  console.log('CF7 JS読み込みOK');

  // ラベル名 → 自動入力値 のサンプルマッピング
  const map = {
    "A項目": 1,
    "B項目": 2,
    "C項目": 3
  };

  const area       = document.querySelector('.kyoka-area');
  const checkboxes = area.querySelectorAll('input[name="kyouka[]"]');
  const inputs     = area.querySelectorAll('.kyoka-fields input.kyoka-custom');

  function update() {
    let idx = 0;
    checkboxes.forEach(cb => {
      const val = cb.value;     // チェックボックスのvalue(A項目など)
      const num = map[val];     // 自動入力値

      if (cb.checked && num !== undefined) {
        const input = inputs[idx];
        const wrap  = input.closest('p');

        // 表示して数字入力
        wrap.style.display = 'block';
        input.value = num;

        idx++;
      }
    });

    // 余った欄は非表示＆空欄に
    for (let i = idx; i < inputs.length; i++) {
      const wrap = inputs[i].closest('p');
      wrap.style.display = 'none';
      inputs[i].value = '';
    }
  }

  checkboxes.forEach(cb => cb.addEventListener('change', update));
  update();
});
</script>

JavaScriptを貼り付ける場所はどこ？

WordPressテーマのfooter.php の </body> の直前に貼り付けてください。

<?php wp_footer(); ?>
<script>
  /* ↑ この中にJSを貼り付け */
</script>
</body>
</html>

※フォーム内に <script>〜</script> と書いても Contact Form7 では無効になります。
必ずフッター側で読み込ませてください。

応用するとこんなこともできます

• チェック順ではなく「ラベルごと」に好きな数字を入れる
• 複数チェック → 上から順番に自動入力
• kumotsu[] など別項目にも流用して実装可能

よくある質問（FAQ）

Q1. チェックボックスとテキストボックスの対応は何個まで可能ですか？

A. 基本的にチェックボックスとテキストボックスを1対1で対応させる場合、数に制限はありません。ただし、数が多くなるとHTML・JavaScriptの管理が煩雑になるため、10個以内程度で運用されるのが現実的です。

Q2. Contact Form 7の仕様変更により動かなくなることはありますか？

A. Contact Form 7のアップデートによって、フォームの構造やクラス名が変更される可能性があります。JavaScriptでクラスや構造に依存している場合、動作しなくなることがあるため、アップデート時は必ず動作確認を行ってください。

Q3. ユーザーが手動で数字を書き換えることはできますか？

A. はい、自動で入力された後に手動で数字を変更することは可能です。もし書き換え不可にしたい場合は、JavaScriptで readonly 属性を付与することで防ぐことができます。

Q4. 自動入力する値は「金額」以外でも使えますか？

A. もちろん可能です。「コード」「ID」「内部判定用数値」「ランク」など、任意の値を設定できます。チェックボックスのラベルと異なる値を設定したい場合に有効です。

Q5. 複数選択された値を合算して合計金額を表示することはできますか？

A. はい、JavaScriptでチェックされた項目に対応する数値を加算して、合計金額を別のテキストボックスやラベルに表示する処理も実装可能です。より高度な処理には jQuery を活用すると便利です。

おわりに

Contact Form7 は柔軟なカスタマイズができる反面、
“フォーム内では JavaScript が効かない”という仕様があります。
そのため、今回のように「テーマの footer にJSを書く」やり方で拡張するのがベストプラクティスです。

Favorite