Contact Form 7がスマホではみ出る時のCSS対処法｜SWELLで確認
スマホでフォームが崩れる…？
Contact Form 7で作ったお問い合わせフォーム。
PCではきれいに見えるのに、スマホで見ると「入力欄が画面からはみ出してしまう」というトラブルがありました。
▼Contact Form 7でのフォームの作り方
Contact Form 7｜WordPressでかんたんお問い合わせフォーム
使用テーマはSWELLです。
こんな感じで、入力欄が画面におさまらず、右端が欠けてる👇
スマホでフォームを使うお客様にとって、入力しにくい・見づらいのは大きな離脱ポイント。
せっかく設置したフォーム、しっかり使ってもらえるようにしたいですね。
原因は「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のちょっとした設定で解決できることが多いです。
スマホで見たときの見やすさ・使いやすさは、問い合わせ数や信頼感にも直結するので、ぜひチェックしてみてくださいね🌿
