[WordPress]Contact Form 7の見た目を変えてみよう with Bootstrap
今回はWordpressのお問い合わせプラグイン「Contact Form 7」の見た目を変えてみたので、その方法について書いていきます。Bootstrapを使ってWordpressブログのレイアウトを組んだ方ならどなたでも使えるものですので、よかったら挑戦してみてください。
今回の変更手順
今回の手順は以下です。
- Contact Form 7のテンプレートを準備する
- テンプレートの中身をマークアップ
- 見た目を整える
- お問い合わせページのみにCSSを適用させる
そんなに難しくはないのですが、見たことのないBootstrapのクラス名が出てきた時は公式ドキュメントをご参考になさってください。
1.Contact Form 7のテンプレートを準備する
まだContact Form 7をインストールしていない方は、僭越ながら記事を書いていますので参考になさってください。
…そういえば現在のバージョンは日本語パックがなくなっているんですよね…バッチ処理をしたほうがいいかも。
「Add New」でテンプレートを新規追加します。
こんな感じの画面が出てきますでしょうか。
この中身を変えていきます。
2.テンプレートの中身をマークアップ
Contact Form 7のテンプレートを以下のようにマークアップします。
1 2 3 4 5 6 7 8 | [response] <div class="form-horizontal"> <div class="form-group"><label class="col-md-3 control-label"><span class="label label-danger req">必須</span> お名前</label><div class="col-md-5">[text* your-name class:form-control]</div></div> <div class="form-group"><label class="col-md-3 control-label"><span class="label label-danger req">必須</span> メールアドレス</label><div class="col-md-5">[email* your-email class:form-control]</div></div> <div class="form-group"><label class="col-md-3 control-label">題名 </label><div class="col-md-5">[text your-subject class:form-control]</div></div> <div class="form-group"><label class="col-md-3 control-label">お問い合わせ内容</label><div class="col-md-7">[textarea your-message x8 class:form-control]</div></div> <p class="text-center">[submit class:btn class:btn-primary class:btn-lg " 送信 "]</p> </div> |
一番上に[response]とありますが、送信完了や必須項目に入力がなかった場合にユーザーにお知らせするショートコードです。また、このままだと少し不親切で寂しいので、あとでフォーム前後に適宜文言を加えていきましょう。
3.見た目を整える
CSSを書いて見た目を整えます…といっても、マークアップ時点でBootstrapを使ってレイアウトはできているので、送信時の[response]に関するものと、「必須」のバッジを変えるだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .wpcf7 .wpcf7-response-output { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .wpcf7 .wpcf7-validation-errors { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .wpcf7 .wpcf7-mail-sent-ok { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .req{ font-size: 12px; font-weight: normal; vertical-align: baseline; } |
動作確認をしてみましょう。まず項目に何も入れていない時の画面です。
フォームのバリデーションが機能していますね。次は送信完了画面です。
大丈夫みたいですね。先ほど少しContact Form 7の日本語パックについて触れましたが、気になるようであれば、バッチをダウンロードしてサーバーにアップするほうがいいと思います。
私も以下を参考にバッチを当てました。ありがとうございます。
4.お問い合わせページのみにCSSを適用させる
お問い合わせページだけでフォームを使うのであれば、無駄な読み込みをしないように functions.php に変更を加えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | function my_contact_enqueue_scripts(){ wp_deregister_script('contact-form-7'); wp_deregister_style('contact-form-7'); if (is_page('contact')) { if (function_exists( 'wpcf7_enqueue_scripts')) { wpcf7_enqueue_scripts(); } if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } } } add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts'); |
これは「contact」というスラッグで作成された固定ページでのみ CSS と JavaScript が読み込まれるという意味になります。
今回は以上です、お疲れ様でした！
ブログを始めたばかりですとか、私のようにマイペースでやっていたりすると中々お問い合わせはないのですが、もしかしたら興味を持ってくださる方がいるかもしれない…と準備しておくことは大切だと考えています。
Bootstrapを使わないブログでもContact Form 7のプラグインを使っていればCSSで見た目を変更することが可能ですので、よかったら挑戦してみてくださいね。ねこま（@necomacustom）でした。