WPプラグイン Contact Form 7 デザインのカスタマイズ

言わずと知れた WordPress にコンタクトフォームを設置するプラグイン「Contact Form 7」のデザインのカスタマイズ方法です。
フロントエンドの開発セオリーを知っている人にとってはあたりまえの話ですが、迷える子羊のために。

Contact Form 7 の使い方については解説しません。ググってください。

Contact Form 7 のテンプレートは以下のように設定した前提で解説します。

マークアップ構造を分析

初期状態

<div class="wpcf7" id="wpcf7-f49-p2-o1">
<form action="/wordpress/contac/#wpcf7-f49-p2-o1" method="post" class="wpcf7-form">
	<div style="display: none;"> ... </div>
	<dl>
		<dt>名前 (必須)</dt>
		<dd>
			<span class="wpcf7-form-control-wrap your-name">
				<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />
			</span>
		</dd>
	</dl>
	<p>
		<input type="submit" value="送信" class="wpcf7-form-control  wpcf7-submit" />
		<img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="送信中 ..." style="visibility: hidden; ">
	</p>
	<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>

送信エラー時

<div class="wpcf7" id="wpcf7-f49-p2-o1">
<form action="/wordpress/contac/#wpcf7-f49-p2-o1" method="post" class="wpcf7-form">
	<div style="display: none;"> ... </div>
	<dl>
		<dt>名前 (必須)</dt>
		<dd>
			<span class="wpcf7-form-control-wrap your-name">
				<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" size="40">
				<span class="wpcf7-not-valid-tip">必須項目に記入もれがあります。</span>
			</span>
		</dd>
	</dl>
	<p>
		<input type="submit" value="送信" class="wpcf7-form-control  wpcf7-submit" />
		<img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="送信中 ..." style="visibility: hidden; ">
	</p>
	<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block; ">入力内容に不備があります。確認してもう一度送信してください。</div>
</form>
</div>

span.wpcf7-not-valid-tip という入力エラーダイアログが挿入される。
入力エラーのフォームに .wpcf7-not-valid というクラスが付加される。
div.wpcf7-response-output に wpcf7-validation-errors というクラスが付加されエラーメッセージが挿入される。

div.wpcf7-response-output に付加されるクラスは、条件に応じて以下のようになります。

メール送信成功時 wpcf-7-mail-sent-ok
メール送信失敗時 wpcf7-mail-sent-ng
入力項目エラー時 wpcf7-validation-errors

ということを確認したら、CSSでカスタマイズしていきます。

CSSを上書きしてカスタマイズする

まずはプラグインのディフォルトCSSを見てみます。

> plugins/contact-form-7/includes/css/styles.css

div.wpcf7 {
	margin: 0;
	padding: 0;
}
div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
}
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng {
	border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
	border: 2px solid #ffa500;
}
div.wpcf7-validation-errors {
	border: 2px solid #f7e700;
}
span.wpcf7-form-control-wrap {
	position: relative;
}
span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	background: #fff;
	border: 1px solid #ff0000;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}
span.wpcf7-not-valid-tip-no-ajax {
	color: #f00;
	font-size: 10pt;
	display: block;
}
span.wpcf7-list-item {
	margin-left: 0.5em;
}
.wpcf7-display-none {
	display: none;
}
div.wpcf7 img.ajax-loader {
	border: none;
	vertical-align: middle;
	margin-left: 4px;
}
div.wpcf7 .watermark {
	color: #888;
}

何度も言うようですが、このプラグイン内のCSSファイルを直接編集してはいけません。
自分のテーマ内のスタイルシートからCSSを上書きします。

CSSの記述方法ですが、!important を多用するのはよろしくありません。ダメです!
プラグインのディフォルトCSSより優先度が高くなるセレクタの指定方法をしましょう。
つまり .wpcf7 セレクタを上位に記述すればOKです。

例えば、span.wpcf7-not-valid-tip 入力エラダイアログのスタイルをカスタマイズしたい場合は、以下のようにセレクタを指定してCSSを記述します。

> テーマ/style.css

.wpcf7 span.wpcf7-not-valid-tip {
 ...
}

※CSSの優先度については、CSSの優先度 の記事をお読みください。

ケーススタディ

入力エラーダイアログのスタイルを変更

> テーマ/style.css

.wpcf7 span.wpcf7-not-valid-tip {
	display: block;
	position: static;
	top: 0;
	left: 0;
	border: none;
	color: red;
}

入力エラーダイアログを出さない & 入力エラーフォームのスタイルを変更

> テーマ/style.css

.wpcf7 span.wpcf7-not-valid-tip {
	display: none;
}
.wpcf7 .wpcf7-not-valid {
	background: pink;
}

+入力エラーメッセージのスタイルを変更

> テーマ/style.css

.wpcf7 .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 8px 35px 8px 14px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
	.wpcf7 .wpcf7-validation-errors {
		color: #B94A48;
		background-color: #F2DEDE;
		border: 1px solid #EED3D7;
	}
	.wpcf7 .wpcf7-mail-sent-ok {
		color: #3A87AD;
		background-color: #D9EDF7;
		border: 1px solid #BCE8F1;
	}

> 入力エラー時

> メール送信完了時

あとは、テンプレート部のスタイルをデザインすれば見栄えのいい問い合わせフォームになると思います。

Comments

コメントを残す