今回は簡単なトピックですが、Contact Form 7 で問い合わせフォームを作っているサイトで、バリエーションエラー時のエラー箇所を分かりやすく色づけする簡単なCSSのご紹介。

Contact Form 7 ではエラー時、項目の下にエラーメッセージを出してくれますが、これだと目立たないので、ユーザーにどこがエラーになったのかもっと直感的に教えてあげる方法としてエラー箇所にピンク色を敷いてあげましょう。

CSS

input.wpcf7-not-valid, textarea.wpcf7-not-valid, select.wpcf7-not-valid {
    background: #FCC;
}