2022年12月11日 / 最終更新日 : 2023年4月4日対馬俊彦 WordPress

Contact Form 7 を 5.7 にアップデートしたらフォームのレイアウトがくずれた

2022.12.18 追記

この記事に書いたレイアウトくずれの問題が Contact Form 7 5.7.1 で修正されましたので、この記事に書いた対策は今後不要です。

Contact Form 7 5.7.1

主要な変更点
・アセットファイルを wp.org の SVN リポジトリに含める。
・修正済み: wpcf7_autop() が不必要な <p> や <br /> を生成する問題。
・ロケールを切り替える前にそのロケールが利用可能であることを確認する。

2023.1.17 追記

Contact Form 7 5.7.2 にアップデートしたらまた p タグが出力されるようになりました。
このサイトの問い合わせフォームを意図したレイアウトにするために
define ('WPCF7_AUTOP', false);
をつけています。

Contact Form 7 5.7.2

主要な変更点
・HTML フォーマッター: 段落要素の孫になりうる非記述コンテンツ要素の扱いを修正。
・HTML フォーマッター: 終了タグの省略に関する追加対応。
・地域化: 元のロケールではなく以前のロケールにリストアする。
・wpcf7_autop(): HTML フォーマット処理中、非 HTML の埋め込み要素をプレースホルダーに置換する。
・ブロックエディター: 未加工のフォームテンプレートを出力するトグルオプションを非表示化する。
・ブロックエディター: 「ショートコード属性」のパネルラベル文言を「フォーム属性」に変更。
・修正済み: 管理画面においてコンタクトフォームのロケール指定を阻害するバグ。

プラグインをアップデートしたら…

このサイトで使用しているプラグイン Contact Form 7 をバージョン 5.6.4 から 5.7 にアップデートしたら、お問い合わせページのフォームのレイアウトがくずれてしまいました。[2022.12.11]

アップデート前の問い合わせフォーム

アップデート後の問い合わせフォーム

同様のアップデートを行った他のサイトの中には、かなり悲惨なくずれ方になっているものもあります。フォームをカスタマイズして作り込んであるほどひどいくずれ方をしています。

レイアウトくずれの原因

アップデートした Contact Form 7 が以下に示すように p タグを自動的に付与するようになったことが原因でした。

アップデート前に出力されていた HTML (お名前入力欄の部分)

<li>
<span>お名前 (必須)</span>
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" value="" type="text" name="your-name">
</span>
</li>

アップデート後に出力されるようになった HTML

<li>
<p>
<span>お名前 (必須)</span>
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" value="" type="text" name="your-name">
</span>
</p>
</li>

このサイトの場合、フォームを以下のようにカスタマイズしてあって、li タグの中味が自動的に p タグで囲まれてしまったことによりレイアウトがくずれてしまいました。

今後のアップデート作業によりこの問題が起きるフォームの数がたくさんあって、CSS を書き換えて対処するのはかなり大変な作業になってしまいます。

そこで、なにかいい方法がないか調べてみたところ、Contact Form 7 には p タグを自動出力しないオプションがありました。

wp-config.php に以下の1行を追加したら、p タグが出力されなくなりました。

define ('WPCF7_AUTOP', false);

この行を追加した位置は最後の方です。(下図参照)

wp-config.php に define ('WPCF7_AUTOP', false); を追加

ヨカッタ、ヨカッタ…。

Contact Form 7 5.7 関連記事

Contact Form 7 をアップデートしたらドロップダウンのレイアウトがくずれた

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく