WordPressプラグイン

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

Contact Form 7, カスタマイズ

企業サイトには欠かせない、ユーザーとの掛け橋である”問い合わせフォーム”。
あなたのサイトではどうカスタマイズしていますか

WordPressでは問い合わせフォーム作成プラグイン「Contact Form 7」を使えば、ブログで使う様な簡素な問い合わせフォームは非常に簡単に作れてしまいます。

カスタマイズをすれば企業サイトでも使えるような問い合わせフォームも同様に作れるのですが、ネットで調べてみると意外とすぐに使える情報が少ないんですよね。というわけで、Contact Form 7 で作る企業向け問い合わせフォームのカスタマイズ方法まとめてみました。

企業サイトのWeb制作を担当する方などに参考にしていただけますと嬉しい限りです。

記事ではContact Form 7のインストール方法から説明していますが、カスタマイズ方法から知りたい方は目次からカスタマイズ方法を解説している項目に飛んでいただければと思います。 

企業向け問い合わせフォームの役割

企業サイトにおける問い合わせフォームは、商品を成約するために顧客(ユーザー)から過不足なく情報を提供してもらう場所です。

「問い合わせフォームって使われるの?」という声や「電話番号とメールアドレスの記載だけで十分!」という意見もあるかもしれませんが、問い合わせフォームはユーザーからの数少ない連絡手段ですし、能動的にアクションを起こすような関心の高いユーザーから情報を得ることができます。

このように商品の成約という観点では非常に重要な役割を担っています。

しかし、問い合わせフォームを設置してもユーザーが最後まで入力するまでに離脱してしまっては、せっかくの機会を逃してしまいます。単純に項目数が多いとかフォームが分かりづらい等でページを閉じてしまうことは良くありますよね。

そのため、問い合わせフォームでは項目数を減らしてシンプルにしつつも、過不足ない情報を入力してもらうことが重要となります。

企業向け問い合わせフォームに必要な項目とカスタマイズ内容

以上の問い合わせフォーム作成のポイントをふまえて、企業向けの問い合わせフォームのサンプルを作ってみました。
 
Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質
 
 
上記フォームではユーザーから問い合わせをしていただけるように、少し細かいですが下記のポイントを意識してカスタマイズしてみました。
 
  • 信頼性を高めるためのシンプルかつ小綺麗なレイアウト
  • ストレスなく入力できるような最低限の入力項目
  • サンクスページの表示
  • 自動返信の設定

そして、もちろんこの問い合わせフォームが Contact Form 7 で実現できます!

それではここからはプラグインの設定方法からカスタマイズまで説明していきますね。

Contact Form 7 のインストール&設定方法

まず、Contact Form 7のインストールと基本の問い合わせフォームの作成、サイト設置方法をご説明します。

設定方法は下記の流れとなります。

  1. プラグインのインストール
  2. コンタクトフォーム(問い合わせフォーム)の作成
  3. サイトへの設置

ちなみに、Contact Form 7ではHTMLなどの言語に詳しくなくてもフォームを簡単に作成できます。(ただ、今回はカスタマイズするために後半でHTMLやCSSのコードも紹介しています)

インストール

WordPress管理画面を開いて「プラグイン」>「新規追加」と進み、「Contact Form 7」と検索してください。

対象プラグインが出てくるので、「今すぐインスト―ル」をクリックしてインストールを行い、有効化します。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

基本の設定方法

プラグインを有効化すると「お問い合わせ」という項目がメニューに表示されます。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

メニューの「お問い合わせ」をクリックすると、コンタクトフォームの作成・編集画面が表示されます。デフォルトで「コンタクトフォーム1」がすでに作成されているのでクリックして中を見てみましょう。

▼コンタクトフォームの編集画面
Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

問い合わせフォームを設置するためのショートコードが表示されるのでコピーしましょう。

続いて問い合わせフォームをサイトに設置します。

コンタクトフォームの編集画面でショートコードをコピーし、固定ページの新規投稿画面の本文に貼り付けます。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

固定ページにデフォルトのお問い合わせフォームが作成されました。

▼デフォルトの問い合わせフォーム
Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

基本の問い合わせフォームは、お名前、メールアドレス、題名、メッセージ本文の4項目のシンプルな問い合わせフォームになっています。個人ブログなどではこれでも十分だと思います。

Contact Form 7 企業向け問い合わせフォームのカスタマイズ方法

ここからは企業向けにカスタマイズした問い合わせフォームのコードや設定方法をご紹介します。コードはそのままコピペでお使いいただけるので、ぜひ参考にしてくださいね。

問い合わせフォームのコードをカスタマイズ

WordPressメニューの「お問い合わせ」に戻り、設定タブ「フォーム」のコードを編集していきます。

内容の追加だけであれば下記の赤枠内で希望項目をクリックすることで、項目が追加されます。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

今回は企業用の問い合わせフォームということで、CSSでデザインを整えるため、フォームのコードを下記のようにカスタマイズしました。そのままフォーム欄にコピペしてご使用ください。

▼カスタマイズ後のコード

<table class="inquiry">
<tr>
<th><span class="formlabel must">必須</span>問い合わせ種類</th>
<td>[radio* your-category use_label_element default:1 "無料相談""見積依頼""その他"]</td>
</tr>
<tr>
<th><span class="formlabel must">必須</span>問い合わせタイトル</span></th>
<td>[text* your-subject placeholder "〇〇についてのご相談"]</td>
</tr>
<tr>
<th><span class="formlabel must">必須</span>お名前</th>
<td>[text* your-name]</td>
</tr>
<tr>
<th><span class="formlabel must">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="formlabel may">任意</span>電話番号</th>
<td>[tel your-tel]</td>
</tr>
<tr>
<th><span class="formlabel must">必須</span>お問い合わせ内容</th>
<td>[textarea* your-message placeholder "問い合わせ内容をご記入ください。"]</td>
</tr>
</table>

[submit id:formbtn "送信"]

CSSのカスタマイズ

続いてCSSを編集して、問い合わせフォームのレイアウトをカスタマイズしていきたいと思います。

【注意点】
CSSはコピペで使えるようにしていますが、環境差分もありますので必ず事前にプラグインでバックアップを取得しておくようにお願いします。

027 - Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質
【2019年最新】UpdraftPlusで超簡単にWordPressのバックアップを取得する方法こちらの記事ではWordPressプラグインの中で最も簡単にバックアップが取得できる『UpdraftPlus』の使い方を丁寧に紹介してい...

メニューにある「外観」>「テーマ編集」を選び、style.cssに下記のコードを追加します。

/*Contact Form 7カスタマイズ*/

/*項目の下線*/
.inquiry th, .inquiry td {
 border: none;
 background: #fff;
 border-bottom: 3px dotted silver;
}

/*必須・任意のラベルの形状*/
.formlabel  {
 padding:5px;
 font-size: 0.8em;
 border-radius:5px;
 margin-right:10px;
 position:relative;
}

/*必須のカラー*/
.must {
 background: #FF82B2;
 color:#fff;
}

/*任意のカラー*/
.may {
 background: #75A9FF;
 color:#fff;
}

/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:15px;
 width:20%;
 background:#ffaa56;
 color:#fff;
 font-size: 1.2em;
 font-weight:bold;	 
 border-radius:5px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー*/
#formbtn:hover{
 background:#ff8f57;
 color:#fff;
}

/*ラジオボタンのデザイン変更*/
.inquiry .wpcf7-radio input[type=radio]{
 display: none;
 vertical-align: middle;
}
.inquiry .wpcf7-radio > .wpcf7-list-item {
  margin-left: 0;
}
.inquiry .wpcf7-radio input[type=radio] + span{
  padding-left: 25px;
  position:relative;
  margin-right: 25px;
	vertical-align: middle;
}
.inquiry .wpcf7-radio input[type=radio] + span::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  border: 1px solid gray;
  border-radius: 50%;
}
.inquiry .wpcf7-radio input[type=radio]:checked + span{
  color: #d01137;
}
.inquiry .wpcf7-radio input[type=radio]:checked + span::after{
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 11px;
  height: 11px;
  background: #d01137;
  border-radius: 50%;
}

CSSのカスタマイズポイント

上のCSSは以下ポイントを踏まえて作っています。

  • 文字の大きさは現在使用中のテーマのサイズから相対でサイズ指定
  • 送信ボタンは中央で大きく分かりやすく
  • ラジオボタンは選択するとその文字のカラーも変更

ラジオボタンはプラグインの方でソースコードがラップされていたので、クラス名を解析しながらデザインを充てました。必要に応じてカラーや文字サイズを変えて使ってみてください。

自動返信の設定

ユーザーが問い合わせをした際に自動返信メールを送る設定をすることができます。ユーザーの問い合わせがちゃんと送信されているという安心感につながるのでぜひ設定しておきましょう。

フォーム編集ページの設定タブ「メール」に進みます。ここでは設定項目が2つありますので各項目の違いを確認しておきましょう。

・メール   :ユーザーからの問い合わせをどこのメールアドレスに送信するかの設定。
・メール(2):自動返信の設定

自動返信の設定を有効化するために「メール(2)を使用」にチェックを入れてください。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

メール(2)の設定画面が表示されるので自動返信の設定を行います。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

設定内容は下記のように入力しましょう。

送信先: ユーザーのアドレスである [your-email] を入力します。

送信元:企業名やサイト運営者名を入力します。

題名:自動返信メールであることが分かる件名を設定しましょう。

(例)お問い合わせありがとうございました。”[your-subject]”

メッセージ本文:問い合わせされた内容をユーザー自身が確認できるように記述しておくと丁寧かと思います。

(例)メッセージ本文:
[your-message]


このメールは <<ブログ名>>  (http://***.com) のお問い合わせフォームから送信されました。

内容をご確認の上、2営業日以内にご返信させていただきます。

サンクスページの設定

問い合わせを送信した後、「お問い合わせありがとうございました」というサンスクページが表示されると、問い合わせした側としては確実に問い合わせが送れたという安心感がありますよね。

問い合わせ後のメッセージ(成功/失敗)や入力エラー時のメッセージなどの設定は、編集ページの設定タブ「メッセージ」で行うことができます。

Contact Form 7の企業向けカスタマイズ方法|コピペで使えて高品質

まとめ

Contact Form 7 の企業向け問い合わせフォームのカスタマイズ方法をご紹介しました。

Contact Form 7 を使うと簡単に問い合わせフォームを設定することができ、カスタマイズすることで企業サイトでも使える綺麗なフォームになります。ユーザーとの接点となる箇所なので、丁寧に作り込んでいきたいですね。

この記事でご紹介した問い合わせフォームのコードやCSSを使えばすぐに「それっぽい」問い合わせフォームが作れますので、是非ご活用してみてください。

PC1台で自由なライフスタイルを実現する無料メルマガ

RELATED POST
『ブログ×外注化』で月40万円を稼ぎ、独立起業するための思考や情報を学ぶメールマガジン
無料登録はコチラ
ブログで月40万円を稼ぎ、自由なライフスタイル目指す無料メルマガ
登録はコチラ