【WordPress】お問い合わせフォームを簡単設置!Contact form 7の使い方

【WordPress】お問い合わせフォームを簡単設置!Contact form 7の使い方WordPress

WordPressサイトにお問い合わせフォームを簡単に設置できる方法をお探しの方向け。

 

WordPressにはお問い合わせフォームを簡単に設置できる「Contact form 7」という日本人の方が作成されたプラグインがあります。

この記事では、「Contact form 7」使って、WordPressサイトにお問い合わせフォームを設置する方法を解説します。

スポンサーリンク

Contact form 7でお問い合わせフォームを設置する手順

WordPressサイトに「Contact form 7」というプラグインを使ってお問い合わせフォームを設置する手順を解説します。

  • 手順①:プラグインのインストール
  • 手順②:フォーム作成
  • 手順③:フォームの編集

上記のとおりです。

手順①:プラグインのインストール

まず最初に、WordPressサイトに「Contact form 7」をインストールしましょう。

ダッシュボード>プラグイン>新規追加 を選択します。

プラグイン検索窓に「Contact form 7」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。

「Contact form 7」をインストールして有効化すると、左側メニューに「お問い合わせ」というメニューが出現します。

以上で「Contact form 7」のインストールは完了です。

手順②:フォーム作成

プラグインをインストールしたら、フォームを作成します。

左側のメニューの「お問い合わせ」をクリックすると、コンタクトフォームの設定画面が表示されます。

コンタクトフォームの設定画面には①「新規作成」と②フォーム一覧が表示されます。

この記事では、フォーム一覧ですでに用意されているサンプルのフォームを編集して解説しますので、「コンタクトフォーム1」をクリックします。

新たにフォームを作成したいときは「新規追加」から作成して下さい(編集方法は全く同じです)。

手順③:フォームの編集

「コンタクトフォーム1」をクリックすると、編集画面が表示されます。

各項目の詳細は次のとおりです。

  1. フォーム名を変更する事ができます(フォーム名はユーザーには表示されませんので、管理しやすい名称に変更しましょう)。
  2. フォームの項目を追加する事ができます。(今回は初期設定のまま使用しますので、何もしません)
  3. 自動返信メールを設定しますので、こちらをクリックします。

この記事では、項目を追加しませんので、このまま次の自動返信メールの設定に進めます。

 

Contact form 7で作成したお問い合わせフォームの自動返信メールを設定する手順

「Contact form 7」で作成したお問い合わせフォームの自動返信メールを設定する手順を解説します。

自動返信メールは次の2つの設定ができます。

  • 手順①:サイト管理者宛ての自動返信メール
  • 手順②:ユーザー宛ての自動返信メール

順番に解説します。

手順①:サイト管理者宛ての自動返信メールを設定する方法

サイト管理者宛ての自動返信メールを設定する方法を解説します。

下図のタブ「メール」をクリックすると、次の項目が表示されます。

各項目の詳細は次のとおりです。

  • ①送信先:自分宛てのメールですので、普段使用しているメールアドレスを入力します。
  • ②送信元送信元のメールアドレスは、Webサイトと同じドメインのメールアドレスを入力しないとエラーが表示されます。また、初期設定では@の前が「wordpress」となっているので変更しましょう。
[your-name] はユーザーが「お名前」の項目に入力した名前が表示されます。
  • ③題名:自動返信メールのタイトルです。※[your-subject]にはユーザーが「題名」の項目に入力した題名が表示されます。
  • ④追加ヘッダー:無くても大丈夫です。初期設定の意味は、送信されたメールに返信すると、宛先が[your-email](相手が「メールアドレス」に入力したアドレス)になるという意味です。
  • ⑤メッセージ本文:メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれユーザーが入力した項目が表示されます。
  • ⑥その他選択肢:どちらも使いません
  • ⑦ファイル添付使いません

ここで設定する自動返信メールはサイト管理者宛てに届くメールなので、「①送信先」と「②送信元」を確認するだけでもOKだと思います。

「③題名」を「〇〇サイトからのお問い合わせ」という件名に変更しておくと、お問い合わせフォーム経由でメールが届いたことをメールボックスで見つけやすくなります。

手順②:ユーザー宛ての自動返信メールの設定

次に、ユーザー宛ての自動返信メールを設定します。

ユーザー宛ての自動返信メールを設定する場所は、「メール」タブの下にある「メール(2)を使用」にチェックを入れると、設定画面が表示されます。

各項目の詳細は次のとおりです。

  • ①送信先:相手宛てのメールなので、相手のアドレス[your-email]です。
  • ②送信元送信元のメールアドレスは、Webサイトと同じドメインのメールアドレスを入力しないとエラーが表示されます。初期設定では、@の前が「wordpress」となっているので変更しましょう。
※[your-name] はユーザーが「お名前」の項目に入力した名前が表示されます。
  • ③題名:メールの件名です。一般的には「お問い合わせいただき、ありがとうございます」等と書く場合が多いです。
  • ④追加ヘッダー:Reply-Toの後ろにアドレスを入力すると、自動返信メールに返信した際、宛先メールアドレスを指定できます。
  • ⑤メッセージ本文:メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれユーザーが入力した項目が表示されます。ユーザーに送信されるメールなので、署名を追加しましょう。
  • ⑥その他選択肢:どちらも使いません
  • ⑦ファイル添付使いません

 

Contact form 7で作成したフォームをWebページに表示させる手順

「Contact form 7」で作成したフォームをWebページに表示させる方法を3つの手順で解説します。

  • 手順①:ショートコードをコピペする
  • 手順②:お問い合わせページを作成する
  • 手順③:お問い合わせページをメニューに追加する

上記のとおりです。

手順①:ショートコードをコピーする

フォーム編集画面のフォーム名の下に下図のような「ショートコード」が表示されますので、この「ショートコード」をコピーします。

このショートコードをWebページに貼り付けるだけで、フォームが表示される仕組みです。

手順②:お問い合わせページを作成する

次に、コピーしたショートコードを貼り付けるページを準備します。

「Contact form 7」で作成したフォームをページに表示させるため、「お問い合わせ」という名称の固定ページを作成します。

固定ページの作成は、
ダッシュボード>固定ページ>新規作成 を選択します。

ページ作成の流れは次のとおりです。

  1. ページタイトルとパーマリンクを編集します。※パーマリンクは「inquiry」としましたが、「contact」でも何でも良いです。
  2. テキストをクリックしてテキストページを表示させます。※ビジュアルエディタのままでショートコードをコピペすると、[]の部分が文字化けし、ショートコードがきちんと反映されないことがあります。
  3. フォーム管理画面に記載されていたショートコードを貼り付けます。
  4. 更新をクリックします。

以上でお問い合わせフォームの設置は完了です。

説明文の記載も可能

ショートコードの前後に文章を記載する事ができますので、お問い合わせに関する注意事項を記載する事ができます。

手順③:お問い合わせページをメニューに追加する

お問い合わせフォームの設定は一通り完了しましたが、メニューに追加しないとお問い合わせフォームはユーザーに表示されません。

ユーザーの目に留まるよう、メニューに「お問い合わせ」という項目を追加します。

ダッシュボード>外観>メニュー を選択します。

  1. 固定ページ蘭にある「お問い合わせ」にチェックを入れます。
  2. メニューに追加をクリックします。

右側のメニューに「お問い合わせ」が追加されます。

この後、「メニューを保存」をクリックすると、メニューに反映されますが、説明を追加したいので(メニューの下に表示される英字)、若干手を加えます。

  1. メニュー名の右側にある矢印(▼)をクリックします。
  2. 説明欄に英文字を入力します。※今回の例では「inquiry」と入植しました。「contat」でも良いと思います。

入力後、「メニューを保存」をクリックすると設定終了です。

 

ちなみに、説明欄の表示方法は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」で解説しています。

プレビューで確認してみよう

プレビューでお問い合わせフォームがきちんと反映されているか、メニューがきちんと表示されているか確認します。

きちんと表示されていますね。

以上でお問い合わせフォームの設置は完了です。

 

お問い合わせフォームContact form 7の機能を強化する方法

おまけとして、「Contact form 7」の機能を強化する方法を2つ紹介します。

興味のある方はチャレンジしてみて下さい。

  • SMTPサーバーを経由して迷惑メールに入り難くする方法
  • フォーム経由のスパム登録をブロックする方法

上記のとおりです。

SMTPサーバーを経由して迷惑メールに入り難くする方法

使っているサーバーにもよりますが、Contact Form7の自動返信メールが迷惑メールフォルダに入ってしまう場合があります。

そのような時は、SMTPサーバーを経由して自動返信メールを配信すると、通常のメール送信のようにユーザーに自動返信メールを送信する事ができるようになり、迷惑メールボックスに入り難くなります。

設定方法は以下の記事をどうぞ。

フォーム経由のスパムをブロックする方法

お問い合わせフォームを公開すると、海外からスパム登録をされる事があります。

公開して数ヶ月は大丈夫だと思いますが、長い期間フォームを公開していると徐々にスパム登録が増えるようになります。

もし、スパム登録をブロックしたいという方は、以下の記事で設定方法を解説していますので、是非どうぞ。

 

まとめ

以上、WordPressサイトにお問い合わせフォームを設置する方法について解説しました。

「Contact Form7」を使えばプログラミングの知識ゼロで簡単にお問い合わせフォームを設置できますので、お問い合わせフォームを設置したいという方は、「Contact Form7」を使ってみて下さい。

 

「Contact Form7」でフォームを作るのが難しい・ハードルが高いと感じたら、以下の記事で紹介している外部サービスやメール配信ツールを使うのも一つの方法だと思います。

ひとまず「Contact Form7」でフォームを設置してみて、顧客管理機能や、一斉配信などの機能が必要と感じたら、他のツールもひととおり試してみましょう。

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました