Contact Form 7で「必須項目を未入力でもエラーメッセージが表示されない」というご相談をいただきました。
コンソールには appendChild エラーが出ているものの、RESTは正常、フォーム構造も問題なしという一見不可解な状況。

最終的な原因は、テーマのfunctions.phpに追加されていた「空のHTMLタグを削除するフィルター」でした。
今回はその特定プロセスと、実際の対応内容をご紹介します。

今回のご相談内容

クライアント様より、「Contact Form 7で必須項目を未入力でもエラーが表示されない」というご相談をいただきました。

管理画面上ではエラーメッセージは設定済み。
しかし実際のフォームでは何も表示されない状態でした。

発生していた症状・エラー内容

調査を進めると、ブラウザのコンソールに以下のエラーが出ていました。

TypeError: Cannot read properties of null (reading 'appendChild')
at index.js?ver=6.1.5

一方で、

• REST APIは200で正常
• フォームタグは存在
• .wpcf7-form-control-wrap も存在
• プラグインは最新

という状況。

「フォームもサーバーも正常なのに、なぜJSだけが壊れるのか？」という状態でした。

原因の特定ポイント

調査の結果、テーマの functions.php に以下のコードが追加されていることが判明しました。

add_filter('the_content', 'remove_empty_tags_recursive', 20, 1);

この処理は、空のHTMLタグを自動的に削除するというもの。

一見便利そうですが、Contact Form 7は内部的に

• 一時的に空のspan
• Ajax処理前の空ラッパー要素

を使ってエラーメッセージを差し込む仕組みになっています。

このフィルターがそれらを削除してしまい、

• JSが対象要素を取得できない
• appendChild で null エラー
• エラー表示が出ない

という現象が発生していました。

実際に行った対応内容

対応はシンプルでした。

1. remove_empty_tags_recursive フィルターを無効化
2. キャッシュの削除
3. ハードリロードで再検証

それだけで、正常にエラーメッセージが表示されるようになりました。

対応後の結果・改善点

• 必須未入力時に正しくエラー表示
• コンソールエラー消失
• フォーム動作正常化

構造やプラグインには一切問題はありませんでした。

今回の対応から分かったこと

今回のポイントは、the_content を正規表現で書き換える処理は非常に危険という点です。

特に以下と相性が悪いです。

• Contact Form 7
• Gutenberg
• WooCommerce
• JavaScriptでDOMを書き換えるプラグイン

「空タグを消したい」という目的で入れたコードが、後々大きな不具合の原因になるケースは少なくありません。

同様のトラブルを防ぐために

• functions.php に正規表現によるHTML書き換え処理を入れない
• 入れる場合はショートコードや特定ページを除外する
• フォーム系プラグイン使用時は the_content フィルターに注意する

古いテーマや過去制作者のコードは、一度棚卸ししておくことをおすすめします。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、

• WordPress保守
• 原因不明の不具合調査
• JavaScriptエラーの切り分け
• 他社制作サイトの引き継ぎ対応

などを行っています。

「どこが原因か分からない」という状態からでも大丈夫です。
現場ベースで一つずつ切り分けていきます。

お気軽にご相談ください。