言わずと知れた WordPress にコンタクトフォームを設置するプラグイン「Contact Form 7」のデザインのカスタマイズ方法です。
フロントエンドの開発セオリーを知っている人にとってはあたりまえの話ですが、迷える子羊のために。
Contact Form 7 の使い方については解説しません。ググってください。
Contact Form 7 のテンプレートは以下のように設定した前提で解説します。
マークアップ構造を分析
初期状態
<div class="wpcf7" id="wpcf7-f49-p2-o1"> <form action="/wordpress/contac/#wpcf7-f49-p2-o1" method="post" class="wpcf7-form"> <div style="display: none;"> ... </div> <dl> <dt>名前 (必須)</dt> <dd> <span class="wpcf7-form-control-wrap your-name"> <input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </dd> </dl> <p> <input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" /> <img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="送信中 ..." style="visibility: hidden; "> </p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div>
送信エラー時
<div class="wpcf7" id="wpcf7-f49-p2-o1"> <form action="/wordpress/contac/#wpcf7-f49-p2-o1" method="post" class="wpcf7-form"> <div style="display: none;"> ... </div> <dl> <dt>名前 (必須)</dt> <dd> <span class="wpcf7-form-control-wrap your-name"> <input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" size="40"> <span class="wpcf7-not-valid-tip">必須項目に記入もれがあります。</span> </span> </dd> </dl> <p> <input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" /> <img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="送信中 ..." style="visibility: hidden; "> </p> <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block; ">入力内容に不備があります。確認してもう一度送信してください。</div> </form> </div>
・span.wpcf7-not-valid-tip という入力エラーダイアログが挿入される。
・入力エラーのフォームに .wpcf7-not-valid というクラスが付加される。
・div.wpcf7-response-output に wpcf7-validation-errors というクラスが付加されエラーメッセージが挿入される。
div.wpcf7-response-output に付加されるクラスは、条件に応じて以下のようになります。
メール送信成功時 | wpcf-7-mail-sent-ok |
---|---|
メール送信失敗時 | wpcf7-mail-sent-ng |
入力項目エラー時 | wpcf7-validation-errors |
ということを確認したら、CSSでカスタマイズしていきます。
CSSを上書きしてカスタマイズする
まずはプラグインのディフォルトCSSを見てみます。
> plugins/contact-form-7/includes/css/styles.css
div.wpcf7 { margin: 0; padding: 0; } div.wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; } div.wpcf7-mail-sent-ok { border: 2px solid #398f14; } div.wpcf7-mail-sent-ng { border: 2px solid #ff0000; } div.wpcf7-spam-blocked { border: 2px solid #ffa500; } div.wpcf7-validation-errors { border: 2px solid #f7e700; } span.wpcf7-form-control-wrap { position: relative; } span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 10pt; width: 280px; padding: 2px; } span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; } span.wpcf7-list-item { margin-left: 0.5em; } .wpcf7-display-none { display: none; } div.wpcf7 img.ajax-loader { border: none; vertical-align: middle; margin-left: 4px; } div.wpcf7 .watermark { color: #888; }
何度も言うようですが、このプラグイン内のCSSファイルを直接編集してはいけません。
自分のテーマ内のスタイルシートからCSSを上書きします。
CSSの記述方法ですが、!important を多用するのはよろしくありません。ダメです!
プラグインのディフォルトCSSより優先度が高くなるセレクタの指定方法をしましょう。
つまり .wpcf7 セレクタを上位に記述すればOKです。
例えば、span.wpcf7-not-valid-tip 入力エラダイアログのスタイルをカスタマイズしたい場合は、以下のようにセレクタを指定してCSSを記述します。
> テーマ/style.css
.wpcf7 span.wpcf7-not-valid-tip { ... }
※CSSの優先度については、CSSの優先度 の記事をお読みください。
ケーススタディ
入力エラーダイアログのスタイルを変更
> テーマ/style.css
.wpcf7 span.wpcf7-not-valid-tip { display: block; position: static; top: 0; left: 0; border: none; color: red; }
入力エラーダイアログを出さない & 入力エラーフォームのスタイルを変更
> テーマ/style.css
.wpcf7 span.wpcf7-not-valid-tip { display: none; } .wpcf7 .wpcf7-not-valid { background: pink; }
+入力エラーメッセージのスタイルを変更
> テーマ/style.css
.wpcf7 .wpcf7-response-output { margin: 10px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wpcf7 .wpcf7-validation-errors { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; } .wpcf7 .wpcf7-mail-sent-ok { color: #3A87AD; background-color: #D9EDF7; border: 1px solid #BCE8F1; }
> 入力エラー時
> メール送信完了時
あとは、テンプレート部のスタイルをデザインすれば見栄えのいい問い合わせフォームになると思います。
Comments
[…] 4.WPプラグイン Contact Form 7 デザインのカスタマイズ […]