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になっているかを確認していきましょう。