Written by Manabu Bannai

【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;
}