Contact Form 7 を 5.7 にアップデートしたらフォームのレイアウトがくずれた
2022.12.18 追記
この記事に書いたレイアウトくずれの問題が 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);
をつけています。
主要な変更点
・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);この行を追加した位置は最後の方です。(下図参照)
ヨカッタ、ヨカッタ…。
Contact Form 7 5.7 関連記事
サイト運営者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきます。
