Contact Form 7で作ったフォームにCSSが反映されない時の対処法
Contact Form 7で作ったフォームにCSSが反映されない場合はどうすればよいのか？
WordPressを使用しているWebサイトがContact Form 7で作ったフォームにCSSが反映されないという話を耳にすることがあります。
どのような場合であれ、CSSが反映されないことには、必ず原因があります。
今回は、Contact Form 7にCSSが反映されなかった時の対処法をご紹介していきます。
CSSのトラブルシューティングの基本
CSSが反映されないというのは、HTML・CSSの初学者にありがちな悩みです。
Contact Form 7だからCSSが反映されないのではなく、もともとCSSの設定が良くないということは少なくありません。
CSSのトラブルシューティングについては、下記の記事で解説していますので、こちらをご参照ください。
まずは、こちらのページで紹介したCSSの注意点を確認し、問題がないかを調査していってください。
WordPressでよくあるCSSトラブル
Contact Form 7はWordPressのプラグインです。
そのため、Contact Form 7が問題なのではなく、WordPressに問題があり、CSSが反映されないことがあります。
よくあるミスとしては、Contact Form 7で作ったフォームを表示させるページに、CSSが読み込まれていないというものです。
Contact Form 7を使ったページということは、お問い合わせページであることがほとんどですが、お問い合わせページは専用のテンプレートが使われることがよくあります。
そのため、お問い合わせページ用のテンプレートファイルにCSSをリンクさせていないということがあります。
Contact Form 7にCSSが反映されないという時は、そもそもそのページにCSSが読み込まれているのかを再度確認しましょう。
Contact Form 7特有のトラブル
Contact Form 7はPHPなど、お問い合わせフォームを作成するためのプログラミング知識がなくても、簡単にフォームを作ることができるWordPressのプラグインです。
ただ、その便利さゆえに、CSSのトラブルを引き起こすことがあります。
主な注意点は以下の２点です。
- Contact Form 7が生成したタグ
- Contact Form 7にもとから付与されているCSS
まず注意しなければならないのは、Contact Form 7は自動でフォームに関するタグを生成しているということです。
通常、お問い合わせフォームを作成する際は、「フロント側」と呼ばれるWebデザインの部分をHTML・CSSを構築し、それを「バックエンド側」と呼ばれるシステム部分をPHPなどを使うプログラマーが構築するという流れが一般的です。
この場合であれば、バックエンド側を担当するプログラマーがWebデザインにあわせてお問い合わせフォームを作ってくれるため、CSSが効かないというトラブルは発生しにくいです。
しかし、Contact Form 7は自動でタグを生成します。
そのため、もともとデザイン案で作成していたHTMLの構造と異なることがよくあります。そして、HTMLの構造が異なるために、CSSが効かないというトラブルが発生します。
このトラブルを解消するには、Contact Form 7でできたページを正として、再度CSSを調整します。
つまり、「もともと作っていたCSSが効かない」と考えるのではなく、「Contact Form 7のタグにあわせて、再度CSSを構築する」という意識で対応していきます。
もう１つ、Contact Form 7で注意することがあります。それはContact Form 7は独自で専用のCSSを持っているということです。
Contact Form 7は、HTML・CSSもわからないユーザーでも、簡単にフォームをページに設置できるようにしたプラグインです。
そのため、フォームの見栄えもある程度調整するように、Contact Form 7が独自のCSSを読み込んでいます。
その結果、あらかじめ作成していたCSSよりも、Contact Form 7が読み込んでいるCSSが優先され、CSSが反映されないということがあります。
しかし、Contact Form 7で呼び出されたCSSは、そこまで優先度の高くない記述のされ方になっています。
先ほど紹介した「CSSが効かない時の対処法 | Promapedia」でも紹介した、CSSの優先度を確認し、Contact Form 7が呼び出しているCSSの設定よりも優先されるようなCSSを記述すれば対応可能です。
まとめ
今回はContact Form 7で作ったフォームにCSSが反映されない時の対処法を解説していきました。
もしContact Form 7で作ったフォームにCSSが反映されない場合は、CSSそのものを確認し、CSSを読み込んでいるかWordPressのテンプレートを確認し、そしてContact Form 7の仕組みに沿ったCSSになっているかを確認していきましょう。