PC1台で自由に人生をデザインするリクのブログ

Contact Form 7(お問い合わせフォーム)をカスタマイズしてデザインを変更する方法

 

WordPressサイトに簡単に『お問い合わせフォーム』を設置することができる、そんな優れもののプラグインである『Contact Form 7』

必須プラグインと言っても過言ではなく、普段からお世話になっている人も多いかと思います。

 

ただ、Contact Form 7は簡単にお問い合わせフォームを設置することができる反面、デフォルトのデザインのまま放置してしまっている人も多いかもしれません。

実際に僕自身もそうだったのですが、当サイトへのお問い合わせが増えてくるにつれ、ユーザビリティを考慮した上でデザインのカスタマイズをするまでに至りました。

お問い合わせフォームをカスタマイズしている人はそう多くないので、他サイトとの差別化を図れるとともにお問い合わせ案件も少し増えるかもしれません。

 

CSSでデザインを指定すれば簡単にカスタマイズすることができるので、今回を機に設定を施してみましょう。

 

サイトには必ずお問い合わせフォームを設置しよう

 

そもそもサイトにお問い合わせフォームを設置することをおすすめするのは、サイトの信頼度が高まるという大きなメリットがあるためです。

サイトを訪れた読者さんがコンテンツに対する疑問やわからないことがあったときに、お問い合わせフォームを通じてサイト運営者と簡単にコンタクトを取ることができますよね。

そうして読者さんの不安を解消できる場としてお問い合わせフォームを設置しておくことは、ユーザビリティの面を考慮しても欠かせない大切な要素です。

 

たまにお問い合わせフォームを設置していないというサイトも見受けられますが、それはユーザーに不親切なサイトだと見なされたり、読者さんの不安をそのまま放置してしまうことにもなってしまいます。

信頼性が高くユーザーに寄り添ったサイト作りをしていくためにも、まだお問い合わせフォームを設置していないとい設置していないという場合は、まずプラグインを導入してしまいましょう。

Contact Form 7を導入しお問い合わせフォームを設置する方法も以前ご紹介しましたので、ぜひともリンクから解説をご参照くださいね。

 

Contact Form 7をカスタマイズしてデザインを変更する方法

 

さて、それではさっそくContact Form 7をカスタマイズして、デザインを変更していきましょう。

実際に当サイトで変更したお問い合わせフォームは、以下のようなデザインとなっています。

 

具体的にどの部分を変更したのかというと、

  • フォームにプレスホルダー(背景の透かし文字)を追加
  • 『必須』を『アスタリスク*』に変更
  • フォームの幅と高さを変更
  • 『送信』ボタン前に文言を追加

といったところです。

 

実際のお問い合わせページはこちらをご参照ください、カスタマイズしたことによりデフォルトのものよりも使いやすさが向上しました。

それでは実際のカスタマイズ方法を解説していきましょう。

 

フォームにプレースホルダーを表示する

 

各入力フォームに、プレースホルダーを表示していきます。

プレースホルダーとはフォーム内に表示されている半透明の説明文のことで、ユーザーがフォームにカーソルを合わせたり文字を入力した時点で消えるようになっています。

 

まずは、WordPressのダッシュボード画面から『お問い合わせ』→『コンタクトフォーム』を選択し、実際にあなたが作ったフォームの編集ページを表示させましょう。

そして編集画面からプレースホルダーを表示させたい部分のコードを、以下のように変更します。

  • お名前
  • メールアドレス

 

僕は『お名前』部分と『メールアドレス』部分にプレースホルダーを表示させていますが、実際の画面では以下のように表示されます(当サイトのものです)。

 

先ほど追記したコード内の『" "』内を変更することにより、お好みの文言でプレースホルダーを表示させることができます。

自分の好みに合ったものを設定してみてくださいね。

 

必須項目にアスタリスク*を表示する

 

デフォルトのお問い合わせフォームでは、必須項目に対して『名前(必須)』というように表示されるようになっています。

今回は、『(必須)』の部分をアスタリスク*に変更する方法を解説していきましょう。

 

まずは、先ほどと同様にコンタクトフォームの編集画面を開き、以下のようにラベル部分を変更します。

“asterisk”というクラス名で指定することにより、実際の画面でアスタリスクが表示されるようになります。

『” “』内の部分は、お好みで変更して使用してくださいね。

 

続いて、CSSでデザインを調整していきましょう。

WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択し、以下のコードを追記します。

 

実際の表示画面では、以下のようなデザインとなっています。

 

ちなみに、この場合は『*』は必須項目であるという文言をフォーム内に入れておくと、なお良いですね。

僕は送信ボタン前に、以下のように文言を追記しています。

 

CSSでフォームのデザインを指定する

 

そして、CSSでフォームのデザインを指定していきます。

WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択しましょう。

先ほどのアスタリスク*で追記したものも含んで、以下のようなコードを当サイトでは追記しています。

 

コンタクトフォームは、全体が<div class=”wpcf7″>で囲われているため、これを利用した形となっています。

ちなみに送信ボタンのみ別指定しており、カーソルを乗せたときはbox-shadowのみ変化させるよう設定していますが、お好みでカスタマイズしてみてくださいね。

 

最後に

 

以上、Contact Form 7をカスタマイズしてお問い合わせフォームのデザインを変更する方法を解説しました。

WordPressはContact Form 7を始め数々の優れものなプラグインがあるので、ぜひとも導入してあなたのサイトを自由にカスタマイズしてみましょう。

 

WordPress初心者がインストールすべき21個のおすすめプラグインを紹介しているので、もしよければご参照くださいね。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です