どうやってコンタクトフォームのスタイルを指定するの？ というのがサポートフォーラムの定番の質問です。Contact Form 7 はスタイル指定のためのカスタマイズ機能を提供しません。CSS のスタイルシートを編集するのがコンタクトフォームにスタイルを適用する最善の方法です。この記事ではコンタクトフォームのスタイル指定のための重要なステップについて解説します。CSS について詳しい方にとっては難しくないはずですが、まだよくわかっていないという方はまず先に CSS について勉強してください:
どのスタイルシートを編集するべきか
どのスタイルシートでも構いませんが、お勧めはお使いのテーマのメインのスタイルシートです。プラグインのスタイルシートを編集するのはよくありません。プラグインがアップデートされたら変更内容が上書きされてしまうからです。テーマもアップデートされることがありますが、一般的にはテーマよりプラグインの方が頻繁にアップデートされます。お使いのテーマがよくアップデートされる場合は、子テーマを作ってそちらのスタイルシートを編集するようにしてもよいでしょう。
コンタクトフォームのフィールドのスタイルを指定する
コンタクトフォームの中の個々のフィールドにスタイルを指定してみましょう。入力フィールドにはいくつかのタイプがありますが、最も基本的なフィールドは単一行のテキスト入力フィールドです。まずはテキスト入力フィールドのためのスタイルルールを追加してみましょう:
input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
このセレクタは ‘type’ 属性値に ‘text’ を持つすべての ‘input’ 要素 (ようするに単一行テキスト入力フィールド) にマッチします。また、このスタイルルールは3つのプロパティを持ち、背景色に白、前景色に黒、フィールド幅に 50% をそれぞれ指定しています。
続いてこのスタイルルールをほかのタイプのフィールドにも適用するようにしてみましょう。メールアドレス入力フィールドと複数行テキスト入力エリアのセレクタを追加します:
input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
この状態ではこのスタイルはサイト上のあらゆる部分に適用されてしまっています。コンタクトフォームの内部だけに限定したい場合はどうすればよいでしょうか。Contact Form 7 のフォームはトップレベルのラッパー要素に ‘wpcf7’ というクラスを持たせていますので、適用範囲を限定するには次のように祖先セレクタを追加します:
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
特定のフィールドにスタイルを指定する
特定のフィールドだけにスタイルを指定したい場合もあるでしょう。そういうときはまず対象のフィールドのフォームタグに ‘id’ または ‘class’ のオプションを追加します:
[text text-123 id:very-special-field]次に追加した id または class を使ったスタイルルールを追加します:
#very-special-field
{
color: #f00;
border: 1px solid #f00;
}
コンタクトフォーム全体にスタイルを指定する
前述のとおり、コンタクトフォームのトップレベル要素は ‘wpcf7’ クラス属性値を持っています。コンタクトフォーム全体に対してスタイル指定を行いたい場合は、クラスセレクタを利用したスタイルルールを追加します:
.wpcf7
{
background-color: #f7f7f7;
border: 2px solid #0f0;
}
このスタイルルールはコンタクトフォームに薄いグレーの背景と緑色のボーダーを与えます。