宮崎暮らしの視点から、徒然なるままに。

Miyazaki Life

WordPress

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

更新日:

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



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

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

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

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

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

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

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

https://contactform7.com/configuration-errors/multiple-controls-in-label/




コンタクトフォーム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

さかぽん
詳しいことがわからない私が調べた結果なので、間違ってたらご指摘ください。

-WordPress

Copyright© Miyazaki Life , 2018 All Rights Reserved.