【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】
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;
}
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。