ContactForm7のエラー「複数のフォーム…」を1分で解決する方法

バブルス

今回は、ワードプレスでブログやサイトを作っている人が「お問い合わせフォーム」を設置するためのプラグイン「ContactForm7」でエラーが出てしまった時、カンタンに解決する方法を書きます！

”お問い合わせフォーム”は必ず設置しよう

自分のブログ、サイトを持っている皆さんへ。

「ブログには、”お問い合わせフォーム”を設置しましょう」…といわれています。

書きっぱなしの記事よりも、読んだ人が

「じゃあこの点についてはどうなの？」「こんな情報もあるよ」「これ違うんじゃない？」

と思った時に、ブログ運営者に連絡が取れて、よりよい内容になっていった方がベターですよね。

Googleも、「ユーザーのためになるサイト・ブログ・記事が望ましい」と考えているので、”お問い合わせフォーム”があるサイトの方が評価され、検索した時に上位に出てきて、よりたくさんの人に見てもらえる可能性が高くなります。

このブログにもちろん設置してます。

記事の内容についてのご質問はもちろん、「こんな記事を書いてくれませんか？」といったお仕事依頼もお問い合わせフォームからいただいています。

お問い合わせフォームの作り方

そんな大切な「お問い合わせフォーム」、作るにはいくつか方法がありますが、私みたいな人（プログラミングまでは精通していない）は、ほとんどが「ContactForm7」というプラグインを使っているのではないでしょうか。

手順はざっくり書くと次のとおりで、とてもカンタンです。

ワードプレスで、「プラグイン」＞「新規追加」＞「ContactForm7」を検索して、インストール＆有効化
サイドメニューに「お問い合わせ」という項目ができるので、そこをクリックすると設定画面が開く
デフォルトでは最低限の内容が入っているので、必要に合わせてカスタマイズ

どんなカスタマイズをしたのか

初めは私も、最低限の「お名前」「メールアドレス」「題名」「本文」のみで特に問題はなかったのですが、「何についてのお問い合わせか」を先方に入力していただくのって、お手数をかけてしまうな…と思い始めたんです。

そこで、「ご質問＆ご感想」と、「お仕事のご相談」から選べるように改良することにしました。

こちらもやり方はカンタン。

「お問い合わせ」＞「コンタクトフォーム」＞「編集」をクリック
「フォーム」タブで、必要なパーツをボタンから選んで内容を設定＞「タグを挿入」で追加＞「保存」

私は「ラジオボタン」というパーツを選びました。分かりやすい名前をつけて、各項目を入力していきます。

ところが、「保存」をクリックすると、次のようなエラーが出るんですね。

「複数のフォームコントロールが単一の label 要素内に置かれています。」

つまり、記述がおかしいよ！と知らせてくれています。

バブルス

操作通りにやったはずなんだけどな…

エラーの修正方法を調べてみました

そこで、「複数のフォームコントロールが単一の label 要素内に置かれています」というエラーメッセージや「ContactForm7　エラー」などのキーワードで検索してみたところ、公式のヘルプが見つかりました。

■「ContactForm7」日本語版公式ヘルプページ

ただ、私のような人が読んでも、具体的な修正方法が分かりません…！

（以下引用↓）

このエラーが表示されるのは不正に2個以上のフォームコントロールを内包する label 要素がフォームに存在する場合です。ラベルは単一のフォームコントロールと対応づけられている必要があります。

こういった状況は、以下の例に見られるようにチェックボックスやラジオボタンを <label></label> で囲もうとすることでよく発生します:

<label>[checkbox your-country “China” “India” “San Marino”]</label>
Contact Form 7 はチェックボックスとラジオボタンのラベルづけのための use_label_element オプションを用意しています。label 要素でなくこちらを使ってください。

（公式ヘルプより）