Contact Form 7：ver5.7・5.7.1 リリース更新でフォームの画面が崩れる場合の対処方法

Contact Form 7 ver5.7系リリース

サイトにお問い合わせフォームを追加するプラグイン、Contact Form 7の新バージョンのメジャーリリース（バージョン5.7系）がありました。

このメジャーリリースによるプラグインの更新で、一部のサイトでフォームの表示が変わったり、フォームそのものが表示されなくなっている事例が出ています。

今回は、WPLab運営の周辺で確認された事例とその対処方法をご紹介します。

バージョン5.7のリリースは2022年12月10日、バグ修正を行った5.7.1は12月16日にリリースされています。

プラグインのページはこちら

表示崩れの事例

WPLabで確認した表示崩れは、それほど大きいものではなく、フォームの上下に意図しないマージンができるなどの軽微なものです。サイトによっては、フォームとフォームの間や行間に不自然な余白ができていました。

このような状況になっている場合、フォームの行の中に意図しない<p>タグが挿入されています。

これは、もともとWordPressにも備わっていた自動整形の機能と同様な動きです。

下の図は、フォーム作成時の設定画面でのコードの表示と、Google Chromeの検証ツールで確認にした表示時のコードです。

「お名前」のところに<p>タグが追加されています。

不自然な余白ができているケースは、この<p>タグの影響で、テーマ内で設定している<p>のCSSが反映されていることが原因です。

バージョン5.7.1で<p>タグに関しての修正がされているとの記載がありましたが、5.7.1への更新を行っても、<p>タグが消えていない場合があります。

フォームそのものが表示されなくなっている事例

問い合わせフォームそのものが表示されなくなる例も確認されました。

対処方法

テーマのfunctions.phpに、以下のコードを追記すると、CF7プラグイン内での<p>タグ自動追加を停止することができます。

メモ

今回の対応は、応急処置としてご紹介しています。

CF7を使っていて、プラグインの自動更新を有効にしている方は、サイトの問い合わせフォームを確認することをお勧めします。

Contact Form 7 プラグインは、インテグレーション機能やブロックエディタ対応で様々な機能が追加されてきています。今後のリリースで更なる変更がある可能性がありますので、開発元の情報をこまめに確認してください。