1. TOP
  2. Contact Form 7 の使い方と初期設定・カスタマイズ方法

Contact Form 7 の使い方と初期設定・カスタマイズ方法

WordPress この記事は約 7 分で読めます。
mail

コンタクトフォーム(Contact Form 7)は、

ブログやホームページに
簡単にお問い合わせフォームを設置できる
WordPressプラグインです。

当然のことながら、

ビジネスでブログやホームページを
運用している場合は
お問い合わせに答えるのは必須となります。

疑問や不安の払拭が売り上げに繋がるからです。

仮に趣味でブログを運営しているだけでも
面白い情報を発信していれば、

仕事の依頼や執筆依頼など
思わぬキッカケが訪れるかもしれません。

WordPressでサイトを運用しているのであれば
コンタクトフォームを導入すれば
簡単にお問い合わせフォームを作成することが可能です。

インストールと設定方法、
そしてコンタクトフォームを
使い倒すための活用方法や
カスタマイズを図解付きで解説します。

1. コンタクトフォームをWordPressにインストールする

まずはコンタクトフォームのプラグインを
WordPressにインストールしましょう。

1-10

WordPress 管理画面から、
プラグイン⇒新規追加をクリック。

2-10

右上のプラグイン検索窓に、
『Contact Form 7』を入力。
『今すぐインストール』をクリック。

3

有効化をクリック。

4

有効化されればコンタクトフォームの
インストールは完了です。

インストール後は専用のコードを
コピー&ペーストするだけで、
簡単にお問い合わせページを作成することができます。

続いて実際にWordPressへ
お問い合わせフォームのページを
作ってみましょう。

2. WordPressにお問い合わせページを設置しよう

WordPressにインストールした
コンタクトフォームを利用して、

実際にお問い合わせページを
作成してみましょう。

独自のコードを投稿画面に設置するだけで
簡単にお問い合わせフォームを
設置することができます。

5

管理画面から、
『お問い合わせ⇒コンタクトフォーム』
をクリック。

6

こちらのショートコードをコピーします。

7

管理画面からでも
ショートコードのコピーが可能です。

8

先ほどのコードを固定ページに
ペースト(貼り付け)したいので、
固定ページを新規に作成します。

9-1

新規固定ページ作成画面では、

 ①ショートコードを本文へコピー
 ②任意のパーマリンクを入力
※参考
 ③通常記事と同様に公開(更新)

この3つの作業を行います。

要は、普通に固定ページとして記事更新するだけです。

※参考:SEO効果を最大化するパーマリンクの設定方法

10

試しに『ページを表示』をクリックし
実際にページを確認してみましょう。

11

これでひとまず設置は完了です。

次の作業で自分の手元に
お問い合わせ内容が届くようにしましょう。

3. コンタクトフォームの3つの初期設定

続いてコンタクトフォームの初期設定方法です。

以下の3つだけは必ず設定しましょう。

3-1. メールアドレスを登録する

まず一つ目はメールアドレスの登録です。

この設定をすることにより、
お客様からのお問い合わせを
あなたのメール受信BOXに届かせることができます。

実際にお客様とやり取りする事になる
お問い合わせ用のアドレスを登録することをオススメします。

12

先ほどのコンタクトフォームの管理画面で
『メール』のタブを選択。

これは自分が見る事になるので
管理しやすいようにカスタマイズしましょう。

  • 送信先
  • …あなたのメール受信BOXのアドレス。

  • 送信元
  • …顧客サポート用のアドレス。

  • 題名
  • …確認メールの件名。

  • 追加ヘッダー
  • …任意。

  • メッセージ本文
  • …お問い合わせ内容。
    (※お客様からのお問い合わせ内容が自動で挿入される)

これだけみても良く分からないと思うので
実際にフォームからお問い合わせを
テスト送信してみましょう。

13

コンタクトフォームからお問い合わせをテスト送信

実際に作成したコンタクトフォームから
メッセージを送信してみます。

必要事項を入力後、送信ボタンをクリックし
『ありがとうございます。』
のメッセージが表示されればOKです。

14

あなたのメール受信BOX(送信先)へお問い合わせ内容が届きました。

このように確認メールが届けば
無事設置できています。

先ほどの入力内容も反映されています。

次に入力項目を設定しましょう。

3-2. 入力項目を設定しよう

コンタクトフォームでは
入力項目を様々な形に
カスタマイズすることが可能です。

詳しい一つ一つの機能は
後ほど解説するので、
まずは全体像をつかみましょう。

コンタクトフォーム編集画面で
メールタブをクリックします。

15-6

このように管理画面に入力した内容が、
実際にコンタクトフォームのお問い合わせページに反映されます。

16

上記画像の通り、コンタクトフォームには
『テキスト・メールアドレス・URL・電話番号・etc…』
と、様々な項目を設定することが可能です。

自分の入力したい項目のタブをクリックする事により、
入力項目を自由に追加することができます。
(※コードが自動生成されます。)

17

あとは各項目のテンプレ通り、
” label~/label ”
のタグに専用コードをコピーして項目名をテキスト入力すれば
新たな入力項目の挿入完了です。

上記2枚の画像を身比べてもらえれば
何をやったがご理解頂けると思います。

 ※1、送信ボタンを下にズラしました。

あなたがお問い合わせを通じて得たい情報を
ここで反映させましょう。

3-3. 自動返信メールを設定しよう

コンタクトフォームでは、
自動返信メールを作成する事も可能です。

お客様へ問い合わせを受け付けたことを通知できるので
とても親切な機能です。

自動返信メール機能を利用すれば、

  • 挨拶文
  • 問い合わせを受け付けたこと
  • お問い合わせ内容
  • etc…

これらを通知する事が可能です。

自分が何か質問や問い合わせをした時のことを
思い出してもらえれば分かるのですが、

急ぎの返答が欲しい時や、
重要な質問をする時、

『ちゃんとメール届いてるかな?』

と不安になる時もあると思います。

そんな時に自動返信メールが届けば
少なくとも届いた事は確認できるので安心すると思います。

なので自動返信メール機能はぜひ設定すべき機能です。

実際の設定方法をご紹介します。

まずはコンタクトフォームの設定画面に行きましょう。

18

メールタブを選択し、
ずっと下まで画面をスクロールします。

19

画面下に メール(2)という項目が出てきますので
『メール(2)を使用』にチェックを入れます。

チェックを入れると
ベロンと入力フォームが出てきます。

20-3

上から順番に、

  • 送信先
  • …〔your-email〕のタグのままでOK。(お客様のアドレス)

  • 送信元
  • …あなたのアドレス。

  • 題名
  • …確認メールの件名。

  • 追加ヘッダー
  • …任意。

  • メッセージ本文
  • …お客様へ届く内容。

このような設定をすることが可能です。

全てを確認したら、左下の
『保存』をクリックして設定完了です。

特にメッセージ本文では
上記の画像を参考にして欲しいのですが、

 メッセージ本文:
 〔your-message〕

の上に文章を入力すれば
その内容をお客様へ自動返信で届けることが可能です。

なのでここへ返答までの時間や営業時間、
挨拶の言葉などを挿入すると良いでしょう。

以上、

  • メールアドレス設定
  • 入力項目設定
  • 自動返信設定

と、コンタクトフォームを利用すための
3つの初期設定について解説してきました。

そしてコンタクトフォームには
まだまだ沢山の機能があります。

それらの機能については
適宜このページで使い方を追記して行こうと思います。

【関連記事】
・WordPressおすすめプラグイン17選

\ SNSでシェアしよう! /

次世代ビジネス研究所の注目記事を受け取ろう

mail

この記事が気に入ったら
いいね!しよう

次世代ビジネス研究所の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

運営者紹介 運営者一覧

次世代ビジネス研究所

次世代ビジネス研究所

大学卒業後、某企業へ就職。
その後サラリーマン生活を経て、脱サラ・起業。
気まぐれで独り言を不定期更新。

関連記事

  • loading

    BJ Lazy Load の使い方と初期設定方法-WordPress表示高速化プラグイン

  • wordpress

    【2016年版】 WordPressプラグインおすすめ17選

  • wp

    WordPressを導入したらまずすべき7つの初期設定

  • favicon

    ファビコンを WordPress に設定するプラグイン-RealFaviconGenerator のインストール方法

  • profile

    WordPress のサイドバーに画像を挿入するプラグイン Image Widget の使い方

  • source

    W3 Total Cache の使い方と初期設定・インストール方法