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

今回は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%;
}

まとめ

上記のCSSだと、Contact Form 7のフォームだけにCSSが適用されますので、他のデザインに影響がなく便利に使えるかと思います。

他にもContact Form 7の使い方等を以下にまとめていますので、気になる方は見て頂ければ幸いです。

WordPressでお問い合わせフォームを作成するならContactForm7

WordpressでWEBサイトを作成する際、お問い合わせフォームのページを作りたい場面って多々あるかとおもいます。 弊社では主にWordpressプラグインのContact Form 7を導入…

高知のホームページ制作はバーベル合同会社