「Contact Form 7」お問い合わせフォームの設置と基本設定や使い方

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレスプラグイン「Contact Form 7」は、ブログやwebサイトにお問い合わせフォームを簡単に設置することができるプラグインです。

ビジネスを目的としたブログなどをワードプレスで運営していくなら、ユーザーからのお問い合わせに回答する機会もあるかと思います。

そうした情報のやり取りや意思疎通を繰り返していくことによって、品質やサービスの向上に繋げていくことができます。

普通にお問い合わせページを作成するとなるとwebの専門的な知識が必要になりますが、「Contact Form 7」プラグインを導入するだけで、ワードプレス初心者でも手軽にブログ内に設置できるので非常に便利です。

そこで今回は「Contact Form 7」をインストールして設置する方法や、基本設定や使い方などをご紹介していきます。

ワードプレスに「Contact Form 7」をインストール

まず、「Contact Form 7」プラグインをワードプレスに導入する為に、管理画面メニューから「プラグイン」⇒『新規追加』をクリックします。

右上の「プラグイン検索」でContact Form 7を検索して、『今すぐインストール』をクリック後に『有効化』をクリックします。

これでワードプレスに「Contact Form 7」のインストールは完了です。

プラグインを有効化すると管理画面メニュー内に「お問い合わせ」の項目が追加されます。

続いてブログ内にお問い合わせページを作成していきます。

有効化した「Contact Form 7」を使用してお問い合わせページを作成するには、ワードプレスの管理画面から「お問い合わせ」⇒『コンタクトフォーム』をクリックします。

「コンタクトフォーム１」に表示されている以下のショートコードをコピーします。

上記の赤枠部分のコードをコピーしたら、お問い合わせ用の固定ページ内に貼り付ける為、「固定ページ」⇒『新規追加』をクリックします。

新規固定ページの作成画面に移動したら「テキストモード」に変更して、テキスト内に先程コピーしたショートコードを貼り付けます。

後は記事の作成と同様にタイトル、記事URL(パーマリンク)を入力して、画面右上の『公開』ボタンをクリックして作成した固定ページを公開します。

公開後に画面上部の『ページを表示』をクリックして、正常に反映されているかページを確認しておきましょう。

作成したお問い合わせページをグローバルメニューに追加したい場合は、「外観」⇒「メニュー」を選択後、固定ページ「お問い合わせ」にチェックして『メニューに追加』をクリックします。

メニュー項目にお問い合わせページが追加されるので、後は『メニューを保存』をクリックして追加&設置が完了となります。

メニューを新規で作成される方は上部の「新規メニューを作成」を選択するか、「外観」⇒「カスタマイズ」⇒「メニュー」からでも作成して設置することが可能です。

これでお問い合わせページの作成及び設置は完了です。

続いて「Contact Form 7」の基本設定を行うには、ワードプレスの管理画面メニューの「お問い合わせ」⇒「コンタクトフォーム」⇒「コンタクトフォーム１」から編集を進めていきます。

新しいお問い合わせフォームを作りたい時は「新規追加」から作成できます。

「Contact Form 7」を使用していく上で以下の基本設定は必要になるので、お問い合わせフォームを導入したら必ず設定及び確認をしておきましょう。

お問い合わせフォーム内に表示する項目を変更・追加することができます。

タイトルは自由に変更することができ、複数お問い合わせフォームを作成した時に判別しやすいようにわかりやすい名前に変更できます。

また、現在表示されているフォームの項目内容を、上記の赤枠で囲ったエリアの項目から追加して編集することも可能です。

項目を追加したい場合は任意のものを選択して「タグを挿入」をクリックすると、以下のようなタグがテキスト内に挿入されます。

このタグを「<label>項目名とタグ</label>」に編集して、画面下か右上にある『保存』をクリックすれば追加できます。

上記の要領で必要な項目を追加したり、並び順を変更したりもできます。

ここではお問い合わせが送信された時に、自分宛と送信者宛に自動で送られるメールを設定することができます。

①送信先	自分がメール受信に使うアドレスになります。
②送信元	「your-name」には送信者が名前に入力したものが表示されます。
③題名	「your-subject」には送信者が題名に入力したものが表示されます。
④追加ヘッダー	特に必要はありません。
⑤メッセージ本文	「your-message」には送信者がメッセージ本文に入力したものが表示されます。

①送信先	送信者側のアドレスになります。
②送信元	ブログのドメイン以外のアドレスを入力するとエラーとなる可能性があります。
③題名	自分が入力したタイトル名が表示されます。(例：お問い合わせ頂きありがとうございます)
④追加ヘッダー	特に必要はありません。
⑤メッセージ本文	「your-message」には送信者がメッセージ本文に入力したものが表示されます。