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

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

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

こんにちは、魚沼情報サービスの対馬です。

私が管理しているサイトで Contact Form 7 をバージョン 5.7 にアップデートしたら、ドロップダウンメニューのレイアウトが ↓ このようにくずれてしまいました。

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

Contact Form 7 を 5.7 にアップデートすると困ることがいろいろあるみたいですね。

include_blank で出力されるコードが変わったことが原因

レイアウトがくずれた原因は、オプション include_blank を指定したときに出力されるコードが変わったことでした。

バージョン 5.6

<option value="">---</option>

バージョン 5.7

<option value="">—以下から選択してください—</option>

ドロップダウンメニューの幅が大きい場合はありがたい仕様変更なのですが、上記例の場合はレイアウトがくずれてしまい困ってしまいます。

【対策】include_blank ではなく first_as_label を使う

表示を元に戻すために、オプション first_as_label を使ってフォームの設定を以下のように書き換えます。

対策前

[select* birth-month include_blank "1" "2" "3"

対策後

[select* birth-month first_as_label "---" "1" "2" "3"

こうすることにより、いままで通りに必須項目として動作させることもできます。

Contact Form 7 5.7 関連記事

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

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

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

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

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

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

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

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

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

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