コンタクトフォーム7のエラー「複数のフォームコントロールが単一のlabel要素内に置かれています」とは

WordPressのコンタクトフォーム7で問い合わせフォームを作成していて、表示されたエラー「複数のフォームコントロールが単一の label 要素内に置かれています」の意味がわからず、調べた備忘録です。

コンタクトフォーム7でエラーが起きた背景

原因としては、タグの意味がわからず、見よう見まねでフォームを作成したこと。

私がデザインテンプレートを使用したコンタクトフォーム7のデフォルトでは、下記のように設定されていました。

<label>お名前 (※必須)
[text* your-name] </label>

これを見本に、下記のようにチェックボックスを設定したところ、「複数のフォームコントロールが単一のlabel要素内に置かれています」というエラーが表示されました。

<label>お問い合わせ内容について（必須）
[checkbox* ×× “○○について” “△△について” “□□について”]</label>

このエラーの参照として下記のサイトに誘導してありましたが、翻訳してもさっぱり意味がわからず。

Contact Form 7

Multiple form controls are in a single label element. This error appears when you have at least one label element in your form that invalidly contains two or more form controls. A label must be corresponded to a si...

コンタクトフォーム7でチェックボックスやラジオボタンを使う場合の設定

そもそもラベルタグとは、以下のようなものです。

<LABELタグ>はフォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。これによりチェックボックスやラジオボタンでは、関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。
<LABEL>－HTMLタグリファレンス

「お名前」という項目だったり、チェックボックスやラジオボタンの「男」「女」といったひとつひとつの項目を関連づけるもの。

「複数のフォームコントロールが単一の label 要素内に置かれています」というエラーは、そういった”男”、”女”という項目ひとつひとつに対してlabel要素が設定されていない（ひとつのlabelで複数設定できないよ）という意味。

label要素は、単一のフォームに対応しなければなりません。

私が設定したように
<label>[checkbox* ×× “○○について” “△△について” “□□について”]</label>
とすると、実際には3つの入力フォームに置き換えられているため、ひとつのlabelタグで囲むとエラーとなります。

エラーが表示された際に誘導されたページ”Multiple form controls are in a single label element.”で説明されている「use_label_element」（要素にラベルを使う）は、個々のチェックボックスやラジオボタンをlabelタグで囲むことができるものです。

つまりは、以下のように設定すればOK。

[checkbox ×× use_label_element “○○について” “△△について” “□□について”]

参考：入力フィールドにラベルを付けられますか?
Contact Form 7 4.5