コンタクトフォームのスタイル指定

This page is also available in English.

どうやってコンタクトフォームのスタイルを指定するの？というのがサポートフォーラムの定番の質問です。Contact Form 7 はスタイル指定のためのカスタマイズ機能を提供しません。CSS のスタイルシートを編集するのがコンタクトフォームにスタイルを適用する最善の方法です。この記事ではコンタクトフォームのスタイル指定のための重要なステップについて解説します。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;
}

このスタイルルールはコンタクトフォームに薄いグレーの背景と緑色のボーダーを与えます。

レスポンスメッセージにスタイルを指定する

デフォルトでコンタクトフォームの一番下に表示されるレスポンスメッセージは wpcf7-response-output クラスを持つので、このクラスにスタイルルールを適用することでレスポンスメッセージにスタイルを指定できます。

コンタクトフォームのステータスに基づいてスタイルを決定するには form 要素の class 属性を参照します。そこに現在のステータスを反映したクラスが設定されているはずです。取り得る値は init、sent、failed、aborted、aborted、invalid、unaccepted のいずれかです。

スタイル指定の例として、Contact Form 7 5.2.2 がレスポンスメッセージに適用するデフォルトのスタイルルールを以下に示します:

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2; /* Blue */
}
 
.wpcf7 form.init .wpcf7-response-output {
    display: none;
}
 
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450; /* Green */
}
 
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232; /* Red */
}
 
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28; /* Orange */
}
 
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900; /* Yellow */
}

関連項目: 応答メッセージボックスを好きな位置に設置する

検証エラーメッセージにスタイルを指定する

入力項目に不正な値がある時、その項目の下に検証エラーメッセージが表示されます。検証エラーメッセージの要素には wpcf7-not-valid-tip クラスが設定されるので、このクラスを利用して検証エラーメッセージにスタイルを指定できます。

Contact Form 7 5.2.2 ではデフォルトで以下のスタイルルールが適用されます:

.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
}

関連項目: 検証エラーメッセージのカスタマイズ

Contact Form 7