ContactForm7をレスポンシブ対応して横幅を綺麗にする(WordPressプラグイン)

ページコンテンツ

1 CSSで制御する方法
2 まとめ
3 サイト制作からカスタマイズ・障害復旧まで対応
- - 3.0.1 投稿者プロフィール

今回はWordpressプラグインのContact Form 7を導入後、レスポンシブ対応する方法です。

デザインテーマによっては、スマホでみるとフォームの横幅が画面からはみ出ていたりすることがありますが、そんな時には以下を試してみてください。

CSSで制御する方法

利用するテーマによってはContact Form 7のタグ編集では調整が効かない場合がありますので今回はCSSで制御する方法です。

CSSに以下の記述を追加してください。

/* コンタクトフォーム横幅調節 */
.wpcf7 input[name="your-name"] { /* 名前入力欄 */
 width: 100%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
 width: 100%;
}
.wpcf7 input[name="your-subject"] { /* タイトル入力欄 */
 width: 100%;
}
.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
 width: 100%;
}