お問い合わせフォームを作ったのに、なぜか「reCAPTCHAのバッジ（右下のマーク）」が表示されない……。そんなトラブルに悩まされていませんか？
実はこれ、私が実際に体験したトラブルです。 結論から言うと、原因は「HTMLの書き方（アクセシビリティのルール違反）」にありました。
この記事では、同じ悩みを持つ方の解決策として、私が修正した手順を共有します。
1. 何が起きていたのか？
Contact Form 7でフォームを作成したものの、右下に表示されるはずの「protected by reCAPTCHA」のバッジが出てきませんでした。
最初は「インテグレーションの設定ミスか？」「キャッシュの問題か？」と疑いましたが、原因はもっと根本的なところにありました。WordPressの警告にも出ていた「複数のフォームコントロールが単一の label 要素内に置かれている」という点です。
2. なぜこれがダメなのか？
HTMLには「1つの <label> に対して1つの入力項目を紐付ける」というルールがあります。 しかし、私は以下のような構成でコードを書いていました。
HTML
<!-- 修正前のダメな例 -->
<label> メッセージ本文 (任意)
[acceptance acceptance-221] チェック [/acceptance]
[textarea your-message]
</label>これだと、ブラウザやスクリーンリーダーが「どの入力を指しているラベルなのか」を正しく判別できません。この「混乱」が原因で、reCAPTCHAのスクリプトが正しく読み込まれていなかったようです。
3. 正しい修正コード
各項目を独立させ、チェックボックスやテキストエリアは <fieldset> でグループ化するように修正しました。
HTML
<!-- 修正後のきれいなコード -->
<label> 氏名 (必須)
[text* your-name autocomplete:name] </label>
<label> メールアドレス (必須)
[email* your-email autocomplete:email] </label>
<label> 題名 (必須)
[text* your-subject] </label>
<fieldset>
<legend>メッセージ本文 (任意)</legend>
<label>
[acceptance acceptance-221 optional] チェックをしてください [/acceptance]
</label>
[textarea your-message]
</fieldset>
[submit "送信"]ポイント：
[text*]のように*をつけることで、簡単に「必須項目」に設定しました。<fieldset>と<legend>を使うことで、関連する項目を正しくグループ化しました。
4. 結果：無事に表示されました！
この修正を行ってページを更新したところ、ついに画面右下にreCAPTCHAのバッジが表示されるようになりました。
コードをいじるのは少し緊張しましたが、HTMLのルールに従うだけで安定して動作するようになるというのは、非常に勉強になりました。
まとめ
「フォームがうまく動かない！」という時は、設定画面だけでなく、フォームのHTML構成を見直してみると解決の糸口が見つかるかもしれません。
もし同じような悩みで詰まっている方がいれば、ぜひ一度「ラベルの中に要素を詰め込みすぎていないか」確認してみてくださいね。
コメント