Contact Form 7のデザインカスタマイズ

多くの人がWordPressのメールフォームとしてよく使用する「Contact Form 7」。
シンプルゆえに使いやすいですが、デザインもシンプルなので物足りなさを感じてしまう方もいると思います。

CSSで出来るシンプルなデザインをご紹介します。

基本構造

<label> 氏名
    [text* your-name] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

See the Pen ContactForm7 – BASIC by Rinne Rise (@rinne-rise) on CodePen.

「Contact Form 7」を設定すると上記のような初期設定でメールフォームが制作されていると思います。
こちらをCSSでデザインカスタマイズをしてみましょう。

初心者向き

See the Pen ContactForm7 – BASIC Light by Rinne Rise (@rinne-rise) on CodePen.

See the Pen ContactForm7 – BASIC Dark by Rinne Rise (@rinne-rise) on CodePen.