arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[WordPress]Contact Form 7の見た目を変えてみよう with Bootstrap

今回はWordpressのお問い合わせプラグイン「Contact Form 7」の見た目を変えてみたので、その方法について書いていきます。Bootstrapを使ってWordpressブログのレイアウトを組んだ方ならどなたでも使えるものですので、よかったら挑戦してみてください。

今回の変更手順

今回の手順は以下です。

  1. Contact Form 7のテンプレートを準備する
  2. テンプレートの中身をマークアップ
  3. 見た目を整える
  4. お問い合わせページのみにCSSを適用させる

そんなに難しくはないのですが、見たことのないBootstrapのクラス名が出てきた時は公式ドキュメントをご参考になさってください。

1.Contact Form 7のテンプレートを準備する

まだContact Form 7をインストールしていない方は、僭越ながら記事を書いていますので参考になさってください。

…そういえば現在のバージョンは日本語パックがなくなっているんですよね…バッチ処理をしたほうがいいかも。
「Add New」でテンプレートを新規追加します。

Contact Form 7 新規作成メニュー

こんな感じの画面が出てきますでしょうか。

Contact Form 7 新規テンプレート作成画面

この中身を変えていきます。

2.テンプレートの中身をマークアップ

Contact Form 7のテンプレートを以下のようにマークアップします。

一番上に[response]とありますが、送信完了や必須項目に入力がなかった場合にユーザーにお知らせするショートコードです。また、このままだと少し不親切で寂しいので、あとでフォーム前後に適宜文言を加えていきましょう。

3.見た目を整える

CSSを書いて見た目を整えます…といっても、マークアップ時点でBootstrapを使ってレイアウトはできているので、送信時の[response]に関するものと、「必須」のバッジを変えるだけです。

動作確認をしてみましょう。まず項目に何も入れていない時の画面です。

送信失敗時画面

フォームのバリデーションが機能していますね。次は送信完了画面です。

大丈夫みたいですね。先ほど少しContact Form 7の日本語パックについて触れましたが、気になるようであれば、バッチをダウンロードしてサーバーにアップするほうがいいと思います。
私も以下を参考にバッチを当てました。ありがとうございます。

4.お問い合わせページのみにCSSを適用させる

お問い合わせページだけでフォームを使うのであれば、無駄な読み込みをしないように functions.php に変更を加えます。

これは「contact」というスラッグで作成された固定ページでのみ CSS と JavaScript が読み込まれるという意味になります。

今回は以上です、お疲れ様でした!


ブログを始めたばかりですとか、私のようにマイペースでやっていたりすると中々お問い合わせはないのですが、もしかしたら興味を持ってくださる方がいるかもしれない…と準備しておくことは大切だと考えています。
Bootstrapを使わないブログでもContact Form 7のプラグインを使っていればCSSで見た目を変更することが可能ですので、よかったら挑戦してみてくださいね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP