Contact Form 7 の使い方と初期設定・カスタマイズ方法
コンタクトフォーム(Contact Form 7)は、
ブログやホームページに
簡単にお問い合わせフォームを設置できる
WordPressプラグインです。
当然のことながら、
ビジネスでブログやホームページを
運用している場合は
お問い合わせに答えるのは必須となります。
疑問や不安の払拭が売り上げに繋がるからです。
仮に趣味でブログを運営しているだけでも
面白い情報を発信していれば、
仕事の依頼や執筆依頼など
思わぬキッカケが訪れるかもしれません。
WordPressでサイトを運用しているのであれば
コンタクトフォームを導入すれば
簡単にお問い合わせフォームを作成することが可能です。
インストールと設定方法、
そしてコンタクトフォームを
使い倒すための活用方法や
カスタマイズを図解付きで解説します。
Contents
1. コンタクトフォームをWordPressにインストールする
まずはコンタクトフォームのプラグインを
WordPressにインストールしましょう。
WordPress 管理画面から、
プラグイン⇒新規追加をクリック。
右上のプラグイン検索窓に、
『Contact Form 7』を入力。
『今すぐインストール』をクリック。
有効化をクリック。
有効化されればコンタクトフォームの
インストールは完了です。
インストール後は専用のコードを
コピー&ペーストするだけで、
簡単にお問い合わせページを作成することができます。
続いて実際にWordPressへ
お問い合わせフォームのページを
作ってみましょう。
2. WordPressにお問い合わせページを設置しよう
WordPressにインストールした
コンタクトフォームを利用して、
実際にお問い合わせページを
作成してみましょう。
独自のコードを投稿画面に設置するだけで
簡単にお問い合わせフォームを
設置することができます。
管理画面から、
『お問い合わせ⇒コンタクトフォーム』
をクリック。
こちらのショートコードをコピーします。
管理画面からでも
ショートコードのコピーが可能です。
先ほどのコードを固定ページに
ペースト(貼り付け)したいので、
固定ページを新規に作成します。
新規固定ページ作成画面では、
①ショートコードを本文へコピー
②任意のパーマリンクを入力 ※参考
③通常記事と同様に公開(更新)
この3つの作業を行います。
要は、普通に固定ページとして記事更新するだけです。
試しに『ページを表示』をクリックし
実際にページを確認してみましょう。
これでひとまず設置は完了です。
次の作業で自分の手元に
お問い合わせ内容が届くようにしましょう。
3. コンタクトフォームの3つの初期設定
続いてコンタクトフォームの初期設定方法です。
以下の3つだけは必ず設定しましょう。
3-1. メールアドレスを登録する
まず一つ目はメールアドレスの登録です。
この設定をすることにより、
お客様からのお問い合わせを
あなたのメール受信BOXに届かせることができます。
実際にお客様とやり取りする事になる
お問い合わせ用のアドレスを登録することをオススメします。
先ほどのコンタクトフォームの管理画面で
『メール』のタブを選択。
これは自分が見る事になるので
管理しやすいようにカスタマイズしましょう。
- 送信先
- 送信元
- 題名
- 追加ヘッダー
- メッセージ本文
…あなたのメール受信BOXのアドレス。
…顧客サポート用のアドレス。
…確認メールの件名。
…任意。
…お問い合わせ内容。
(※お客様からのお問い合わせ内容が自動で挿入される)
これだけみても良く分からないと思うので
実際にフォームからお問い合わせを
テスト送信してみましょう。
実際に作成したコンタクトフォームから
メッセージを送信してみます。
必要事項を入力後、送信ボタンをクリックし
『ありがとうございます。』
のメッセージが表示されればOKです。
このように確認メールが届けば
無事設置できています。
先ほどの入力内容も反映されています。
次に入力項目を設定しましょう。
3-2. 入力項目を設定しよう
コンタクトフォームでは
入力項目を様々な形に
カスタマイズすることが可能です。
詳しい一つ一つの機能は
後ほど解説するので、
まずは全体像をつかみましょう。
コンタクトフォーム編集画面で
メールタブをクリックします。
このように管理画面に入力した内容が、
実際にコンタクトフォームのお問い合わせページに反映されます。
上記画像の通り、コンタクトフォームには
『テキスト・メールアドレス・URL・電話番号・etc…』
と、様々な項目を設定することが可能です。
自分の入力したい項目のタブをクリックする事により、
入力項目を自由に追加することができます。
(※コードが自動生成されます。)
あとは各項目のテンプレ通り、
” label~/label ”
のタグに専用コードをコピーして項目名をテキスト入力すれば
新たな入力項目の挿入完了です。
上記2枚の画像を身比べてもらえれば
何をやったがご理解頂けると思います。
※1、送信ボタンを下にズラしました。
あなたがお問い合わせを通じて得たい情報を
ここで反映させましょう。
3-3. 自動返信メールを設定しよう
コンタクトフォームでは、
自動返信メールを作成する事も可能です。
お客様へ問い合わせを受け付けたことを通知できるので
とても親切な機能です。
自動返信メール機能を利用すれば、
- 挨拶文
- 問い合わせを受け付けたこと
- お問い合わせ内容
- etc…
これらを通知する事が可能です。
自分が何か質問や問い合わせをした時のことを
思い出してもらえれば分かるのですが、
急ぎの返答が欲しい時や、
重要な質問をする時、
『ちゃんとメール届いてるかな?』
と不安になる時もあると思います。
そんな時に自動返信メールが届けば
少なくとも届いた事は確認できるので安心すると思います。
なので自動返信メール機能はぜひ設定すべき機能です。
実際の設定方法をご紹介します。
まずはコンタクトフォームの設定画面に行きましょう。
メールタブを選択し、
ずっと下まで画面をスクロールします。
画面下に メール(2)という項目が出てきますので
『メール(2)を使用』にチェックを入れます。
チェックを入れると
ベロンと入力フォームが出てきます。
上から順番に、
- 送信先
- 送信元
- 題名
- 追加ヘッダー
- メッセージ本文
…〔your-email〕のタグのままでOK。(お客様のアドレス)
…あなたのアドレス。
…確認メールの件名。
…任意。
…お客様へ届く内容。
このような設定をすることが可能です。
全てを確認したら、左下の
『保存』をクリックして設定完了です。
特にメッセージ本文では
上記の画像を参考にして欲しいのですが、
メッセージ本文:
〔your-message〕
の上に文章を入力すれば
その内容をお客様へ自動返信で届けることが可能です。
なのでここへ返答までの時間や営業時間、
挨拶の言葉などを挿入すると良いでしょう。
以上、
- メールアドレス設定
- 入力項目設定
- 自動返信設定
と、コンタクトフォームを利用すための
3つの初期設定について解説してきました。
そしてコンタクトフォームには
まだまだ沢山の機能があります。
それらの機能については
適宜このページで使い方を追記して行こうと思います。
【関連記事】
・WordPressおすすめプラグイン17選