【WordPress】Contact Form 7のデザインをカスタマイズしてみた!

(この記事は2021年12月14日に投稿されました。)

WordPressのContact Form 7はお問合せフォームを簡単に作成できるプラグインになります。

Contact Form 7で作成するお問い合わせ画面のデザインはとてもシンプルです。

そのため、テーマがとてもおしゃれなのにお問い合わせフォームがシンプルという寂しい感じになってしまいます。

しかし、Contact Form 7で作成したお問い合わせフォームはCSSを引き当てることでシンプルなデザインから少しおしゃれなデザインへと変更することができます。

初心者の方には少し難しいかもしれませんがこちらの記事のコードをコピペすることで、おしゃれなお問合せフォームへと変身させることが可能になります。

今回は、WordPressのContact Form 7のデザインをカスタマイズしてみましたので紹介していきます。

この記事はこんな方におすすめ
・お問合せフォームのデザインを変えたい人
・初心者でもCSSを触ってみたい人




Contact Form 7とは

Contact Form 7とは、サイトにお問合せフォームを設置することができるプラグインになります。

お問合せフォームは1から作成しようとすると、とても面倒で初心者だととても時間がかかります。

しかし、Contact Form 7を利用すると、固定ページにショートコードを追記するだけで下記のようなお問合せフォームを作成することができます。

contact form 7で設置したお問合せフォーム

Sossy

Contact Form 7は初心者でも簡単にお問合せフォームを設置することができるプラグインになります。
お問い合わせフォームはサイトを運営する上で必須になりますのでインストールすることをおすすめします。

Contact Form 7のデザインをカスタマイズする方法

Contact Form 7のデザインをカスタマイズする方法について紹介していきます。

基本的には、下記の2つの方法でContact Form 7のデザインのカスタマイズが可能です。

⚫︎ お問い合わせフォームのパーツにクラス名やid名をつけてカスタマイズする方法
⚫︎ カスタムCSSを追加してカスタマイズする方法

言葉だけではよく変わらないかと思いますので、それぞれについてご紹介していきます。

お問い合わせフォームのパーツにクラス名やid名をつけてカスタマイズする方法

まず、1つ目はお問い合わせフォームのパーツにクラス名やid名をつけてカスタマイズする方法です。

こちらの方法は単純にパーツにクラス名やid名をつけてCSSファイルと紐付けてカスタマイズしていきます。

お問い合わせのパーツにクラス名かid名を指定する

まずは、お問い合わせの編集画面でパーツにクラス名かid名を指定していきます。

[お問い合わせ]をクリックするとお問い合わせフォームの編集画面が表示されます。

お問い合わせフォームの編集画面

そして、それぞれのパーツにクラス名かid名を設定するため、下記のコードを追加していきます。

例として、デフォルトの「氏名」のラベルのパーツにクラス名を指定しています。

⚫︎ クラス名を指定する場合

⚫︎ id名を指定する場合

「class:クラス名前」を追記することでクラスをつけることができ、「id:id名」を追記することでidをつけることができます。

試しに下記のコードでContact Form 7のデザインをカスタマイズしてみます。

⚫︎ お問い合わせ画面

⚫︎ 実行結果

お問い合わせ画面

クラスを指定した状態でお問い合わせフォームが表示されています。

しかし、クラス名のCSSをまだ設定していませんので、デザインはデフォルトのままとなっています。

CSSファイルでContact Form 7のデザインをカスタマイズ

お問い合せフォームの各パーツにクラス名かid名を指定できましたら、CSSファイルでContact Form 7のデザインを下記のようにカスタマイズします。

⚫︎ style.css

⚫︎ 実行結果(PC画面)

クラス名でContact Form 7のデザインをカスタマイズした結果(PC)

⚫︎ 実行結果(スマホ画面)

クラス名でContact Form 7のデザインをカスタマイズした結果(スマホ)

シンプルなデザインから少し色がついたデザインを変えてみました。

また、ユーザーが入力しやすいように入力エリアの大きさを大きくしたり、パーツを中央に配置しています。

カスタムCSSを追加してカスタマイズする方法

2つ目は、カスタムCSSを追加してカスタマイズする方法です。

こちらの方法はお問い合わせフォームの固定ページのみにCSSを引き当てることができるカスタムCSSを追加してカスタマイズしていきます。

WP Add Custom CSSをインストールする

まずは、「WP Add Custom CSS」をインストールします。

WP Add Custom CSSとはWebサイト全体、および特定の投稿、ページ、カスタム投稿タイプのみにカスタムCSSを追加することができるプラグインになります。

つまり、インストールすると、下記の画像のようにページや記事など特定のページだけにCSSを引き当てることができるようになります。

⚫︎ 投稿記事のエディタ画面

WP Add Custom CSSでカスタムCSSを追加した後の投稿記事のエディタ画面

⚫︎ 固定ページのエディタ画面

WP Add Custom CSSでカスタムCSSを追加した後の固定ページのエディタ画面

こちらもシンプルなデザインから少し色がついたデザインを変えてみました。

また、「WP Add Custom CSS」をインストールしないで、CSSファイルにそのまま追記しても問題はありません。

しかし、同じクラス名やid名がある場合、他の要素にも影響が出てしまい、デザインが崩れてしまう恐れがありますので「Add Custom CSS」をインストールすることをおすすめします。

カスタムCSSでContact Form 7のデザインをカスタマイズ

WP Add Custom CSSでインストールしましたら、カスタムCSSでContact Form 7のデザインをカスタマイズします。

お問合せ画面のパーツは下記のコードとなります。

⚫︎ お問い合わせ画面

また、固定ページで作成したお問合せフォームのカスタムCSSに下記のコードを追記していきます。

⚫︎ カスタムCSS

⚫︎ 実行結果(PC画面)

カスタムCSSでContact Form 7のデザインをカスタマイズした結果(PC)

⚫︎ 実行結果(スマホ画面)

カスタムCSSでContact Form 7のデザインをカスタマイズした結果(スマホ)

シンプルなデザインから少し色がついたデザインを変えてみました。

また、ユーザーが入力しやすいように入力エリアの大きさを大きくしたり、パーツを中央に配置しています。

Sossy

シンプルなデザインに比べて少し見やすいデザインになりました。
相対色などを意識するともって見やすくておしゃれなデザインになるかと思います。

Contact Form 7のデザインをカスタマイズしてみた

Contact Form 7のデザインをカスタマイズしてみました。

パソコン用とスマホ用の2パターンを作成してみます。

⚫︎ お問い合わせ画面

⚫︎ カスタムCSS

⚫︎ 実行結果(PC画面)

Contact Form 7のデザインをカスタマイズしてみた(PC)

⚫︎ 実行結果(スマホ画面)

Contact Form 7のデザインをカスタマイズしてみた(スマホ)

お問合せフォームのデザインをカスタマイズしてみました。

デザインはシンプルになりますが、お問合せフォームはユーザーが利用するため、派手なデザインよりもシンプルなデザインの方がおすすめです。

まとめ

⚫︎ Contact Form 7とは、サイトにお問合せフォームを設置することができるプラグイン

⚫︎ Contact Form 7のデザインをカスタマイズするには下記の方法がある
・お問い合わせフォームのパーツにクラス名やid名をつけてカスタマイズする方法
・カスタムCSSを追加してカスタマイズする方法

コメントを残す

メールアドレスが公開されることはありません。