お問い合わせフォーム第二弾！今日は、WordPressでお問い合わせフォームを作るのに一番使われているContact Form 7を使ってフォームをちょっと見栄え良くする方法について書いてみたいと思います。CSS部分はContact Form 7専用ではありませんので、他のプラグインや静的サイトでも共通で使えます。
まずは最初に、装飾をしないデフォルトのフォームを見てみましょう。
もちろん、昨日は果たしているので使えないわけではありませんが、やはり味気ないですよね。そこで、サイト全体のデザインに合わせてフォームを整えてあげるとカッコよくなりますよ。それでは、どうやってフォームを装飾していくのか見ていきましょう。
以下は、私が制作したサイトで装飾したフォームになります。どうですか？結構変わったでしょ。
ではその際に使ったCSSを紹介します。数値や色などは、みなさんのサイトイメージに合わせて調整すれば、そのままコピペで使えます。
/*=================
ContactForm7関連
=================*/
/* 必須マーク */
.must{
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #F92931;
border-radius: 5px;
}
/* 任意マーク */
.free {
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #424242;
border-radius: 5px;
}
/* 項目名を太字にする */
form p {
font-weight: 400;
}
/* 入力項目を見やすくする */
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: 45px;
background: #50c600;
color: #fff;
font-size: 16px;
font-weight: 400;
}
/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}
次にそのCSSをContact Form 7でクラス指定して装飾します。
コピペできるようにそのソースも掲載しておきます。
<span class="must">必須</span> お名前 [text* your-name placeholder"例：大阪 太郎"] <span class="must">必須</span> メールアドレス [email* your-email placeholder"例：contact@example.com"] <span class="free">任意</span> 件名 [text your-subject placeholder"件名を入力してください"] <span class="free">任意</span> メッセージ本文 [textarea your-message placeholder"ご自由に記述してください"] [recaptcha] [submit "送信"]
やり方はこれだけではなくいろんな方法がありますが、今回ご紹介した方法は比較的簡単で初心者にも実装できます。ちょっとフォームが味気ないと感じていらっしゃる方はぜひお試しください。あと、ユーザービリティーを高めるために必ずプレースホルダー（placeholder）を設定しましょう。これは、Contact Form 7の標準機能で実現できます。上記のフォームでも設定しているので参考にしてみてください。
他にも、確認画面を出したりサンクスページを表示したり色々できますが、ユーザービリティーを損なわない程度でケースバイケースに実装すればいいと思います。
参考：Contact Form 7のサイトはこちらから
