WordPressの始め方

WordPressブログのお問い合わせフォームの作り方【Contact Form7】

悩んでいる人

WordPressブログを開設したのでお問い合わせフォームを設置したいです。お問い合わせフォームの作り方を教えてください。

こんなお悩みにお答えします。

もちべー

本記事でわかること

  • お問い合わせフォームを作るべき理由
  • Contact Form7を使ったお問い合わせフォームの作り方
  • お問い合わせフォームの設置方法

今回は、WordPressブログのお問い合わせフォームの作り方を解説していきます。

お問い合わせフォームとは、読者がブログ運営者と連絡をとるための手段のひとつです。

お問い合わせフォームのイメージは、当ブログのお問い合わせフォームを参考にしてください。

お問い合わせフォームを作るって難しそうと思われるかもしれませんが、本記事では、「Contact Form7」というプラグインを使ったお問い合わせフォームの作り方をご紹介していますので、初心者の方でも簡単に作れますよ。

また記事の後半では、お問い合わせフォームの設置方法も解説していますので、ぜひ最後まで読んでくださいね。

まだブログを開設していないという方は、下記の記事をご覧ください。

関連記事
WordPressブログの始め方
【10分で完了】WordPressブログの始め方を初心者向けに完全解説

続きを見る

お問い合わせフォームを作るべき理由3つ

まずは、お問い合わせフォームを作る理由について解説していきます。

すぐに作り方を知りたいという方は、読み飛ばしOKです。

お問い合わせフォームを作る理由

  • 運営者の連絡先として使える
  • プライバシーを守ることができる
  • ブログの信頼性が高まる

順番に解説します。

①:運営者の連絡先として使える

お問い合わせフォームを作る一番の理由は、連絡先として使えることです。

お問い合わせフォームによく届く内容は、下記の3つになります。

よく届くお問い合わせ

  • 読者から記事についての質問
  • 企業からの商品提供・レビュー依頼
  • メディア担当からの掲載依頼

上記のように、お問い合わせフォームには読者からの問い合わせ以外にも、企業から別の仕事の依頼が来ることも多いですよ。

収益を上げるチャンスが広がりますので、お問い合わせフォームは必ず設置しておきましょう。

②:プライバシーを守ることができる

お問い合わせフォームを作ることで、プライバシーを守ることができます。

理由は、メールアドレスを知らせる必要がないからです。

メールアドレスを公開してしまうと、頻繁にスパムメールが送られてきますが、今回ご紹介する「Contact Form7」は、スパムを防止する機能が付いているので、安心して設置できますよ。

③:ブログの信頼性が高まる

お問い合わせフォームを作る3つ目の理由は、ブログの信頼性が高まることです。

たとえば、読者が何か商品についての質問したい場合に問い合わせ先がないと、不安に思いますよね。

読者に「いつでも問い合わせができる」という安心感を与えるためにも、必ずお問い合わせフォームを作りましょう。

Contact Form7を使ったお問い合わせフォームの作り方

ここから「Contact Form7」を使った、お問い合わせフォームの作り方をご紹介していきます。

お問い合わせフォームを作る手順

  • Contact Form7をインストールする
  • お問い合わせフォームを作成する
  • 固定ページにショートコードを埋め込む
  • お問い合わせフォームのテスト送信をする
  • スパム対策の設定をする

順番に解説していきます。

手順①:Contact Form7をインストールする

最初に「Contact Form7」をインストールします。

まず、WordPressの管理画面を開きます。

WordPressの管理画面を開いたら、①:「プラグインをクリック」→②:「新規追加をクリック」→③:「Contact Form7と入力」します。

上記のように、「Contact Form7」のプラグインが出てくるので「今すぐインストール」をクリックします。

インストールが完了したら上記画面の「有効化」をクリックします。

これでインストールは完了です。

手順②:お問い合わせフォームを作成する

「Contact Form7」が有効化できたら、お問い合わせフォームを作りましょう。

WordPressの管理画面を開きます。

WordPressの管理画面から「お問い合わせ」「コンタクトフォーム1」の順にクリックします。

上記の画面が表示されたら、「フォーム」「メール」「メッセージ」「その他の設定」の順に設定していきます。

フォームの設定

お問い合わせフォームでは、基本的に下記の4つの項目を設定します。

  • 氏名
  • メールアドレス
  • 題名
  • メッセージ本文

追加したい項目があれば下記の赤枠の中のボタンをクリックします。

お問い合わせのハードルを下げるためにも、デフォルトの4つの項目だけにしておくことをおすすめします。

なので特に追加しない場合は、そのまま次のメールの設定に進みましょう。

メールの設定

次に、お問い合わせがあった際に届くメールの設定をしていきます。

メールの設定で確認する項目は、下記の5つです。

  • 送信先:WordPressに登録している「管理者メールアドレス」宛に送る
  • 送信元:「wordpress@サイト名」のアドレスから、問い合わせのメールが送られてくる
  • 題名:サイト名 とお問い合わせフォームに記載されている題名がメールの題名になる
  • 追加ヘッダー:Cc、Bcc、その他のメールヘッダーを追加する
  • メッセージ本文:問い合わせメールの内容を設定する

基本的には、何も変更しなくてOKです。

このメール設定では読者がお問い合わせを送信した際に、自動で返信する「自動返信メール」の設定ができるので、続けて解説していきます。

メール設定の画面を下にスクロールしていくと「メール(2)」という項目が出てきます。

その下の「メール(2)を使用」にチェックを入れると、下記の画面になります。

「題名」と「メッセージ本文」を下記のように入力しましょう。

  • 題名:"[your-subject]"を消してメールのタイトルを入力する
  • メッセージ本文:「メッセージ本文:[your-message]」を消して返信したいメッセージを入力する

メッセージ本文の最初に「[your-name]様」にしておくことで、相手の名前が記載されて丁寧な印象になります。

最後に「保存」をクリックすることをお忘れなく!

もちべー

お問い合わせをした読者は、メッセージが本当に届いているのか不安になることもあるので、この自動返信の設定をしておくことをおすすめします。

メッセージの設定

メッセージの設定では、お問い合わせを送信したときなどに表示されるメッセージの編集をすることができます。

上記のように、デフォルトで文章が設定されているので、基本的には変更の必要はありません。

実際にお問い合わせを送信すると上記のようなメッセージが表示されます。

その他の設定

その他の設定では、「フォーム」「メール」「メッセージ」以外の設定をします。


具体的には、上記の画像の空欄に追加するコードを入力していきます。

その他の設定で入力するコード

  • 購読者限定モード:subscribers_only: true
  • デモモード:demo_mode: on
  • メールをスキップする:skip_mail: on
  • 検証としての承諾確認:acceptance_as_validation: on
  • メッセージ保存の抑制:do_not_store: true
  • JavaScript コード:on_sent_ok: "alert('sent ok');" on_submit: "alert('submit');"

くわしくは、Contact Form 7公式サイトの「その他の設定」をご確認ください。

ここでも「保存」をクリックすることをお忘れなく!

もちべー

手順③:固定ページにショートコードを埋め込む

お問い合わせの保存をクリックしたら、固定ページを作成してショートコードを埋め込みます。

上記画像の赤枠のコードをコピーします。

「固定ページ」「新規追加」の順にクリックして、固定ページを作成する画面を開きます。

次に画面左上の「+」をクリックして「カスタムHTML」をクリックします。

上記の画面が表示されたら、ページのタイトルを入力して、下の空欄に先ほどコピーしたコードを貼り付けます。

コードを貼り付けた後、上記画面右上の「プレビュー」で確認したら「公開」をクリックします。

上記のようなお問い合わせフォームができたら完成です。

手順④:お問い合わせフォームのテスト送信をする

お問い合わせフォームが作成できたら、実際にテスト送信してみましょう。

上記画面のように各項目を入力して「送信」をクリックします。

入力したメールアドレスに通知が届けばテスト送信完了です。

メールが届かない場合は「迷惑メール」に振り分けられている可能性があるので確認してみてくださいね。

もちべー

手順⑤:スパム対策の設定をする

ここでは、「Contact Form7」でスパム対策をする際におすすめの「Google reCAPTCHA v3」の設定方法を解説していきます。

Google reCAPTCHAは、Googleが無料で提供しているスパムからの送信を防ぐためのセキュリティシステムです。

Contact Form7だけでもスパムを防げますが、それでも届く場合はGoogle reCAPTCHAを設定しておきましょう。

「Google reCAPTCHA」には、いくつかバージョンがありますが、今回はreCAPTCHAのv3を使った解説をしていきます。

reCAPCHAを利用するにはGoogleのアカウントが必要になるので、持っていない方は作成しておきましょう。

Googleアカウント作成ページはこちら>>

まずは、「Google reCAPTCHA」の公式サイトにアクセスします。

Google reCAPTCHAの公式サイトはこちら>>

上記の画面が表示されたら「v3 Admin Console」をクリックします。

  • ラベル:ブログ名を入力する
  • reCAPTCHAタイプ:スコアペース(v3)にチェックをいれる
  • ドメイン:ブログのドメインを入力する
  • 利用条件に同意:チェックをいれる

赤枠の各項目を入力したら「送信」をクリックします。

上記の画面が表示されたら、「サイトキー」「シークレットキー」をコピーします。

※一旦この画面はそのままにしておきます。

ここでWordPressの管理画面を開きます。

WordPressの管理画面から「お問い合わせ」「インテグレーション」「インテグレーションのセットアップ」の順にクリックします。

上記の画面が表示されたら、先ほどコピーした「サイトキー」と「シークレットキー」を貼り付けして、「変更を保存」をクリックします。

以上でGoogle reCAPTCHAの設定が完了です。

もちべー

お問い合わせフォームの設置方法

最後に、作成したお問い合わせフォームをブログ内に設置していきます。

設置する場所は以下の2箇所です。

  • ヘッダー・フッターメニュー
  • サイドバー

順番にご紹介します。

ヘッダー・フッターメニューに設置する

ヘッダーとフッターメニューに設置する方法を解説します。

上記画像は、当ブログのヘッダーメニューになります。

上記画像は、当ブログのフッターメニューになります。

まずは、WordPressの管理画面を開きます。

WordPressの管理画面から「外観」「メニュー」をクリックして、上記の画面が表示されたら「メニュー名」を入力して「メニューを作成」をクリックします。

上記の画面で、「お問い合わせ」にチェックを入れて「メニューに追加」をクリック、「メニュー設定」にチェックをいれて「メニューを保存」をクリックします。

これで、ヘッダーメニューとフッターメニューに設置できました。

サイドバーに設置する

続いて、サイドバーに設置する方法を解説します。

WordPressの管理画面を開きます。

WordPressの管理画面から「外観」「ウィジェット」の順にクリックします。

固定ページタブの右の「矢印」をクリックして→「サイドバー」「ウィジェットを追加」の順にクリックします。

上記の画面が表示されたら、「タイトル」を入力して「保存」をクリックします。

固定ページが全て表示されるので、除外したいページがあれば「除外ページの欄にページIDを入力してください。

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

もちべー

まとめ:お問い合わせフォームを設置してブログの信頼性を高めよう!

今回は、WordPressブログのお問い合わせフォームの作り方と設置方法を解説しました。

お問い合わせフォームを設置することで、読者に安心感を与えることができて、ブログの信頼性が高まります。

本記事でご紹介した「Contact Form7」を使うことで簡単に設置できますので、ぜひ導入してみてくださいね。

お問い合わせフォームの他に作っておきたい項目については、下記でご紹介しています。

ブログの手順をもう一度確認したい方は下記の記事からどうぞ。

関連記事
ブログの始め方ロードマップ
ブログの始め方完全ロードマップ!月5万円稼ぐまでの手順6つを解説

続きを見る

今回は以上になります。

最後まで読んでいただき、ありがとうございました。

-WordPressの始め方