ワードプレスのお問い合わせフォームを生成する
「コンタクトフォーム7(Contact Form 7)」でエラーが発生した際の解消法の中で、
複数のフォームコントロールが単一の label 要素内に置かれています
というエラー表示が出ている方へ、解決方法をお教えします。
「複数のフォームコントロールが単一の label 要素内に置かれています」エラーの解消方法
エラー表示を辿っていくと、コンタクトフォームの編集画面にエラーの内容が書かれていることに気づきます。
複数のフォームコントロールが単一の label 要素内に置かれています
さて、一体何のことでしょうか。
上記のテキスト部分はリンクが貼られていますので、遷移先のページを確認してみますと、以下の内容が、、、。
構成エラーを解決する方法
複数のフォームコントロールが1つのラベル要素に含まれています。このエラーlabelは、フォームに2つ以上のフォームコントロールが無効に含まれている要素が1つ以上ある場合に表示されます。ラベルは、単一のフォームコントロールに対応している必要があります。
これは多くの場合、以下の例のように、チェックボックスまたはラジオボタンをでラップすることにより発生します。
Contact Form 7には、use_label_elementチェックボックスとラジオボタンにラベルを付けるオプションがあります。label要素の代わりにこれを使用してください。Contact Form 7 4.5のリリース発表は、この検証の導入の背後にあるストーリーを説明しています。
出典:https://contactform7.com/configuration-errors/multiple-controls-in-label/
具体的なことが、何もわからない、、。
エラーが発生して放置していると、管理画面の左側メニューの「お問い合わせ」の項目に 数字が出るので気になっちゃいますね。
エラー解決の流れ
エラーの原因ですが、
「<label>〜〜</label>」の中に、複数の選択肢が入っていることが原因なのです。
以下の事例でお話しますと、
お問い合わせ内容の場合は、「無料相談」「資料請求」「その他」の3つ。
他のお名前、メールアドレス、備考は、選択するものが1つしかないので<label></label>で囲ってもエラーになりません。
しかし、項目をセレクトするような「チェックボックス」や「ラジオボタン」は、
2つ以上の選択肢を作るために<label>~</label>で囲ってしまうと、エラーになってしまいます。
それでは、具体的な作業にはいります。
エラーの解消方法について
まずは、コンタクトフォームの編集画面に移動しましょう。
すると、エラーの問題となっている項目があります。
以下の場合は、「■お問い合わせ内容(必須)」という項目が対象のようです。
<label>タグの、終わりの方「</label>」の位置を、以下のように変更してみてください。
■変更前
■変更後
変更後は、項目名を囲った状態になります。
作業が完了しましたら、保存ボタンをクリックしてください。
まとめ
いかがでしたでしょうか。
今回は、ワードプレスの管理画面のお問い合わせフォームで
「複数のフォームコントロールが単一のlabel 要素内に置かれています」というエラーを解消する方法について解説させていただきました。
解決の手順は、
1.管理画面の「お問い合わせ」>「コンタクトフォーム」から、エラー発生しているフォームを選択
2.フォームの中の<label>〜<label>の貼り位置を確認し、修正する
3.保存をクリックし、エラーが解消されたことを確認
以上で、完了です!!
こちらの記事もおすすめです