2017/02/14 (更新日: 2017/09/22)

【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】

PROGRAMMING WordPress

Contact Form 7を見やすく表示するためのCSSです。
コピペ用に作りました。

フォームは使いやすさ＆見やすさが命だと思うので、同意出来る方はぜひご利用ください。

完成イメージ

基本的にはこんな感じです。入力必須項目の背景が黄色になっています。

エラー表示（バリデーション）

入力エラーがあると上記のようになります。シンプルっちゃシンプルですが、見やすいかなと。

設定画面のHTMLは下記のように入力

管理画面から編集できるHTMLはこのように設定してください。初期設定だとlabelとかありますが、不要なタグは省いています。

<span class="must">必須</span> お名前
[text* your-name]

<span class="must">必須</span> メールアドレス
[email* your-email]

<span class="free">任意</span> 題名
[text your-subject]

<span class="free">任意</span> メッセージ本文
[textarea your-message]

[submit "送信"]

上記のとおり、続いてCSSを見ていきましょう。

コピペ用のCSS

下記をそのままコピペどうぞ。動きます。

/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #F92931;
	border-radius: 20px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: rgba(255, 255, 142, 0.46);
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%;
	height: 80px;
	background: #27c038;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

WordPress