スマホでフォームが崩れる…?
Contact Form 7で作ったお問い合わせフォーム。
PCではきれいに見えるのに、スマホで見ると「入力欄が画面からはみ出してしまう」というトラブルがありました。
使用テーマはWordPressです。
こんな感じで、入力欄が画面におさまらず、右端が欠けてる👇

スマホでフォームを使うお客様にとって、入力しにくい・見づらいのは大きな離脱ポイント。
せっかく設置したフォーム、しっかり使ってもらえるようにしたいですね。
原因は「CSSでの幅指定」かも?
この現象の主な原因は、CSSで入力欄の横幅(widthやmax-width)が指定されていないこと。
テーマによっては、Contact Form 7のパーツがデフォルトで width: auto;
になっていて、スマホ画面より大きく表示されてしまう場合があります。
解決方法:CSSにこれを追加!
今回は、以下のコードを追加することで、スマホでもキレイに表示されるようになりました◎
WordPress管理画面の「外観」>「カスタマイズ」>「追加CSS」に
以下のコードを、に貼り付ければOKです。
.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea
{
max-width: 100%;
box-sizing:border-box;
}
今回は、よく使われる基本的な入力欄(テキスト・メールアドレス・メッセージ欄)を対象に、以下のCSSを追加しています:もしフォームに電話番号やURLなど他の入力項目を使っている場合は、必要に応じて同じように input[type="tel"]
やinput[type="url"]
などを追加して対応してくださいね。
これで、フォームの各入力欄が、スマホ画面でもぴったり収まるようになります。
修正後の表示(After)
CSSを追加した後のフォームがこちら👇

画面内にすっきり収まって、タップもしやすくなりました✨
補足:反映されないときは?
以下の点もあわせて確認してみてください。
- キャッシュの影響:変更後にCSSが反映されない場合は、ブラウザのキャッシュをクリア(Windowsなら「Ctrl + F5」、Macなら「Shift + 再読み込み」)
- 他のCSSと競合していないか:テーマやプラグイン側で上書きされている場合は、
!important
をつけると解決することもあります。
まとめ
フォームの表示崩れは、CSSのちょっとした設定で解決できることが多いです。
スマホで見たときの見やすさ・使いやすさは、問い合わせ数や信頼感にも直結するので、ぜひチェックしてみてくださいね🌿
もし、これで合ってるか不安」「テーマごとに違うみたい…」という場合は、
単発レッスンで操作画面を見ながらサクッと解決できます🌿
ホームページの整理やデザイン相談もまとめてOKですので、困ったときは一緒に整えましょう。