WordPressプラグイン「Contact form 7」で手軽にお問い合わせフォームを作ろう

サイトの骨格を作る

WordPressでは、お問い合わせフォームをプラグインで簡単に作る事が出来ます。WordPressでお問い合わせフォームと言えば、「Contact form 7」という日本人の方が作成されたプラグインが非常に有名です。

今回はこの「Contact form 7」というプラグインを利用し、お問い合わせフォームを作っていきます。

Contact form 7の設定

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

クリックすると、コンタクトフォームの設定画面が表示されます。

画面には「新規作成」とフォーム一覧が表示されますが、今回はすでに用意されているサンプルのフォームを編集して使用しますので、「コンタクトフォーム1」をクリックします。

新たにフォームを作成したいときは「新規追加」から作成可能です

 

お問い合わせフォームの編集

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

各番号の意味を解説します。

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

 

フォームの自動返信メールの設定

自動返信メールは、サイト管理者宛てと、フォームに入力したユーザー宛ての2種類を設定します。

サイト管理者宛ての自動返信メールの設定

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

ユーザー宛ての自動返信メールの設定

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

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

 

フォームを表示させる

作成したフォームをウェブサイトに表示させます。表示させる方法は非常に簡単で、1行のショートコードをコピペするだけでフォームを表示させる事が出来ます。

フォームの管理画面に表示されている「ショートコード」を表示したいページにコピペするだけで、フォームが表示されます。

お問い合わせページを作成する

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

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

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

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

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

説明文の記載も可能

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

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

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

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

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

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

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

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

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

メニューの使い方に関する詳しい解説は以下の記事を参考にして下さい。

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

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

きちんと表示されていますね。これで、お問い合わせフォームの設置は完了です。

 

まとめ

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

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

Contact Form7を設置したら、自動返信メールが迷惑メールフォルダに入らないよう、設定しておくことをオススメします。以下の記事で解説していますので、興味のある方は参考にして下さい。

お問い合わせフォームを経由のスパムメールをブロックする方法

お問い合わせフォーム経由のスパムメールをブロックする方法を以下の記事で詳しく解説していますので、「Contact Form7」を導入している方は、是非参考にして下さい。

「Contact Form7」でフォームを作るのが難しいと感じたら

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

無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

サイトの骨格を作る
クリエイトエクスプレス
トップへ戻る
タイトルとURLをコピーしました