【初心者向け】Contact Form 7のチェックボックスを徹底カスタマイズ｜初期値・排他・「その他」記入欄まで解説

Contact Form 7（CF7）は、WordPressでお問い合わせフォームを作成するのに便利なプラグインです。
中でも「チェックボックス」は、複数の選択肢を提示したり、自由記入欄を追加したりと、工夫次第で柔軟に活用できます。

この記事では、チェックボックスの基本的な使い方から、フォームタグ生成ダイアログで設定できる内容、手動で編集することで可能になるカスタマイズ方法まで、初心者にも分かりやすく解説します。

フォームタグ生成ダイアログで設定できる項目

✅ 必須入力の項目

項目タイプにある「必須入力の項目。」にチェックを入れると、ユーザーが1つも選ばずに送信しようとした際にエラーが表示され、選択を促すことができます。

🏷 項目名

「項目名」には、このチェックボックスグループの識別子となる名前を設定します。
この値は送信データの name 属性に対応しており、メール本文で回答内容を出力する際にも使用されます。

🎨 クラス属性

class属性を設定することで、CSSでデザインやスタイルを調整できます。

☑️ 選択できる値

「選択できる値」には、チェックボックスに表示したい項目を1行ずつ入力します。
ここで入力した値が、実際のフォームに表示され、ユーザーが選択できる内容になります。

例えば、次のように入力すると3つの選択肢が表示されます。

選択肢A
選択肢B
選択肢C

🏷️ 個々の項目をlabel要素で囲む

「個々の項目をlabel要素で囲む」にチェックを入れると、選択肢全体がクリック対象となり、ユーザーにとって押しやすくなります。
アクセシビリティの向上にも効果的です。

フォームタグ生成ダイアログでは設定できない内容（手動編集が必要）

初期状態で選択済みにする（ default: ）

表示時に特定の選択肢をあらかじめ選択された状態にするには、default: を使います。

例：2番目を選択状態にする

[checkbox checkbox-sample default:2 "選択肢A" "選択肢B" "選択肢C"]

例：複数選択する場合

[checkbox checkbox-sample default:1_3 "選択肢A" "選択肢B" "選択肢C"]

ラジオボタンのように単一選択にする（ exclusive ）

チェックボックスを1つしか選べない状態にします。

[checkbox checkbox-sample exclusive "選択肢A" "選択肢B" "選択肢C"]

※見た目はチェックボックスのままなので、ユーザーに分かりやすい表現を心がけましょう。

「その他」を選んだら入力欄を出す（ free_text ）

最後の選択肢を選んだときに、自由記入欄が表示されるオプションです。

[checkbox checkbox-sample free_text "選択肢A" "選択肢B" "その他"]

以下のようなCSSを設定することにより、チェックがついている時に入力欄を表示して、チェックがついていない時には入力欄を非表示にすることも可能です。

/* テキストボックスを初期状態で非表示 */
.checkbox-sample .has-free-text .wpcf7-free-text {
  display: none;
}

/* チェックが入ったら表示 */
.checkbox-sample .has-free-text input[type="checkbox"]:checked ~ .wpcf7-free-text {
  display: inline-block;
}

フォームタグ例

チェックボックスサンプル
[checkbox checkbox-sample-1 class:checkbox-sample "サンプル1" "サンプル2" "サンプル3" "サンプル4"]

ラベルをlabel要素で囲む（必須）
[checkbox* checkbox-sample-2 class:checkbox-sample use_label_element "サンプル1" "サンプル2" "サンプル3" "サンプル4"]

ラベルとチェックボックスを逆にする（必須）
[checkbox* checkbox-sample-3 class:checkbox-sample label_first "サンプル1" "サンプル2" "サンプル3" "サンプル4"]

単一選択（必須）
[checkbox* checkbox-sample-4 class:checkbox-sample exclusive "サンプル1" "サンプル2" "サンプル3" "サンプル4"]

3番目が初期選択（必須）
[checkbox* checkbox-sample-5 class:checkbox-sample default:3 "サンプル1" "サンプル2" "サンプル3" "サンプル4"]

最後の項目にテキスト項目を追加（必須）
[checkbox* checkbox-sample-6 class:checkbox-sample free_text "サンプル1" "サンプル2" "サンプル3" "その他"]

表示例

よくある質問（FAQ）

まとめ

Contact Form 7のチェックボックスは、初期状態のままでも十分に活用できますが、タグを手動で編集することで、より柔軟なフォーム設計が可能になります。

特に「初期選択」「単一選択（exclusive）」「その他＋自由入力（free_text）」は、ユーザーにとって分かりやすく・回答しやすいフォーム作成に役立ちます。

基本のタグとカスタマイズ方法を覚えて、目的に合ったチェックボックスを実装してみましょう。

その他のフォームのカスタム方法

「テキスト」のカスタマイズ

「メールアドレス」のカスタマイズ

「URL」のカスタマイズの方法

「電話番号」のカスタマイズ

「数値」のカスタマイズ

「日付」のカスタマイズ

「テキストエリア」のカスタマイズ

「ドロップダウンメニュー」のカスタマイズ

「チェックボックス」のカスタマイズ

「ラジオボタン」のカスタマイズ

「承認確認」のカスタマイズ

「クイズ」のカスタマイズ

「ファイル」のカスタマイズ

「送信ボタン」のカスタマイズ