--> ブログのお問い合わせフォームを作る2つの方法【WordPress版】
ブログ

ブログのお問い合わせフォームを作る2つの方法【WordPress版】

WodPressの個人ブログにお問い合わせフォームはあった方がいいの?お問い合わせフォームはなんで必要なの?

こんな疑問に答えます。

本記事の内容

  • 個人ブログにもお問い合わせフォームを設置すべき?
  • お問い合わせフォームを作る2つの方法

筆者

そうし
そうし
元サラリーマン。現在は当ブログの運営とWebライターとして活動しています!

この記事を書いているぼくは、当ブログ開設後3記事で収益化。現在も毎日5000文字以上を書き続けています。

今回は個人ブログにもお問い合わせフォームを設置するべき理由と、実際にお問い合わせフォームを設置する方法を画像付きで解説します。

では、さっそくいきましょう。

個人ブログにもお問い合わせフォームを設置するべき?

質問を持つ人

結論、個人ブログにもお問い合わせフォームを設置するべきです。

その理由は、以下の3つです。

  • 万が一の連絡窓口になる
  • 仕事依頼がくることがある
  • ブログの信頼感が増す

たとえば、ブログの情報が間違っていた時に読者から連絡がくることが考えられます。

また、仕事依頼はSNSではなくお問い合わせフォームからくることがほとんど。

さらに、お問い合わせフォームがあることで「このブログはちゃんと運営されているんだ」という信頼感や安心感を与えることができます。

以上の3つの理由から、個人のブログにおいてもお問い合わせフォームを設置した方がいいんです。

SNSじゃダメなのか?

連絡の窓口はSNSでもダメではありません。

ただ、窓口がSNSだけの場合、以下の2つの状況では連絡が取れないんですよね。

  • 読者がSNSのアカウントを持っていない場合
  • 個人ではなく企業として連絡をしたい場合

以上の2つの状況を考えると、SNSだけでは機能しない場面があることが分かります。

そのため、個人のブログであってもお問い合わせフォームを設置するべきなんです。

コメント欄ではダメなのか?

お問い合わせフォームはコメント欄では代用できません。

なぜなら、コメント欄では他の人に見られたくない連絡ができないからです。

たとえば、具体的な仕事の金額の話などはコメント欄ではしませんよね。

そのため、お問い合わせフォームでクローズドのコミュニケーションを取れるようにしておくべきなんです。

ブログにお問い合わせフォームを作る2つの方法

男の人が指し示している

ブログにお問い合わせフォームを作る方法は、主に以下の2つです。

  • Contact Form7(プラグインあり)
  • Googleフォーム(プラグインなし)

最初にプラグインを使った方法をを解説します。

プラグインなしで作成したい人は「プラグインなしの作り方にジャンプ」してくださいね。

プラグインあり:Contact Form7

ContactForm7

まずは、Contact Form7というプラグインを使った方法です。

手順は以下の通りです。

  1. プラグインをインストール
  2. お問い合わせフォームを作成
  3. お問い合わせフォームを設置
  4. ブログ内に表示させる
  5. その他の設定

それぞれ解説していきます。

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

では最初に、Contact Form7をインストールします。

contactform7の画面

インストールが完了したら「有効化」をクリック

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

その後、管理画面の左側に追加された「お問い合わせ」から「新規追加」をクリック

contactform7の画面

タイトルに「お問い合わせ」と入力し、内容はそのまま「保存」をクリック

contactform7の画面

以下の画像のコードをコピーします。

contactform7の画面

その後「固定ぺージ」の中の「新規追加」をクリック

contactform7の画面

手順③:お問い合わせフォームを設置

ここから、

  • ブロックエディタ
  • クラシックエディタ

それぞれ設置の仕方が違うので解説します。

クラシックエディタ

次は、クラシックエディタの設定方法です。

「コンタクトフォーム」をクリックし「お問い合わせ」のショートコードをコピー

contactform7の画面

「固定ページ」の「新規追加」をクリック

contactform7の画面

タイトルに「お問い合わせ」と入力し、コピーしたコードを張り付けて、公開をクリック

(まだこの時点ではサイトには表示されません)

contactform7の画面

手順④:ブログ内に表示させる

ここから、作った問い合わせフォームを実際にブログ内に表示する手順です。

(Contact Form7とGoogleフォーム共通の方法です)

「外観」から「メニュー」をクリック

contactform7の設定画面

既存のメニュー(カテゴリー分けなど)がある場合は、そのメニューに追加すればOK。

ない人は、新しいメニューを作成してください。

どちらの場合も、固定ページの「お問い合わせ」にチェックをいれて「メニューに追加」をクリック。

お問い合わせが追加されればOKです。

contactform7の設定画面

上の画像では枠で囲まれていないのですが、画像の下部分の「メニュー設定」で、表示する場所を変えられますよ。

最後に「メニューを保存」をクリックして完了です。

トップページを確認し表示されていればOK。

contactform7の設定画面

「お問い合わせ」をクリックして、以下のように表示されれば完成です。

お問い合わせフォーム

 

サイドバーに表示

サイドバーに表示する場合は「外観」の「ウィジェット」を開きます。

「カスタムHTML」をサイドバーに追加しタイトルを変更します。

そして、ショートコードを張り付けて「保存」をクリック。

(テーマによって画面が違います)

contactform7の設定画面

その他の設定

次に、Contact Form7のその他の設定を解説します。

自動返信メール

自動返信メールは、読者がお問い合わせのメールを送った時に、読者に自動的に送られるメールのことです。

ここでは、自動返信メールの内容を変更する方法を解説します。

「コンタクトフォーム」からお問い合わせの「編集」をクリック

contactform7の設定画面

「メール」を選択します。

contactform7の設定画面

少し下にスクロールして「メール(2)」にチェック

contactform7の設定画面

「題名」の[_site_title]を変更することで返信メールの題名を変えることができます。

また、メールの本文を変えたい場合は[your-message]の下に文章を入力します。

画像では以下のようにしています。

題名

お問い合わせありがとうございます。

本文

お問い合わせありがとうございます。折り返しご連絡させていただきますが、お時間をいただくことがございます。何卒、ご了承ください。また、お急ぎの場合はTwitterのDMにてご対応させていただきます。

問い合わせ後に表示されるメッセージ

contactform7の設定画面

これは、読者がお問い合わせを送った時に画面に表示されるメッセージです。

特に変更する必要はないですが、こだわりがある場合は変更してもOKですよ。

セキュリティ強化

セキュリティ強化はぜひしておいてください。

セキュリティ強化をしておくことで、スパムのお問い合わせが来なくなります。

これにはGmailのアドレスが必要なので、作成しておいてください。

»Gmailアドレスを作成する

まずは、GooglereCAPTCHAに移動します。

画面上部の「v3 Admin Console」をクリック。

 

contactform7の設定画面

以下の画像に従って、入力していきます。

contactform7の設定画面

送信が完了したら、以下の画像のようにサイトキーとシークレットキーが発行されます。

contactform7の設定画面

次に、WordPressの管理画面で「お問い合わせ」から「インテグレーション」をクリック

contactform7の設定画面

「インテグレーションのセットアップ」をクリック

contactform7の設定画面

サイトキーとシークレットキーを張り付け「変更を保存」をクリックして完了です。

contactform7の設定画面

以上で、Contact Form7を使ったお問い合わせフォームの設定は完了です。

プラグインなし:Googleフォーム

Googleフォーム

プラグインを使わない、Googleフォームでのお問い合わせフォームの作成を解説します。

以下の4つの手順で解説します。

  1. Googleフォームにアクセスして項目を作る
  2. メールアドレスの項目を追加
  3. コードをコピーしてフォーム作成
  4. ブログ内にお問い合わせフォームを表示する

順番に見ていきます。

手順①:Googleフォームにアクセスして項目を作る

まずはGoogleフォームにアクセスします。

Googleフォームの設定「新しいフォームを作成」をクリックGoogleフォームの設定すると、以下の画像の画面が表示されるはずです。Googleフォームの設定

「無題のフォーム」の部分は変更し、「+」を押して項目を追加します。

Googleフォームの設定名前を記入する欄と問い合わせ内容を記入する欄を追加します。

必須の項目には下の画像のように、「必須」にチェックを入れておきます。Googleフォームの設定ちなみに、パレットのボタンを押せば色を変えられます。Googleフォームの設定手順②:メールアドレスの項目を追加

次に、右上の設定ボタンをクリック

Googleフォームの設定「全般」から「メールアドレスを収集する」にチェックを入れます。

Googleフォームの設定

すると、以下の画像のように「メールアドレス」を入力する欄が追加されるので、右上の「送信」をクリック。

Googleフォームの設定手順③:コードをコピーしてフォーム作成

以下の画像を見ながら、コードをコピーしてください。

Googleフォームの設定では、WoresPressにフォームを設置していきます。

「固定ページ」から「新規追加」をクリック。

Googleフォームの設定ここからは、ブロックエディタとクラシックエディタで設定方法が違うのでそれぞれ解説します。

ブロックエディタ

ブロックエディタでは「+」→「カスタムHTML」と進みます。

Googleフォームの設定そしてコードを張り付け、「公開する」をクリックします。

タイトルは自由でいいですが「お問い合わせ」が分かりやすくていいですね。

Googleフォームの設定以上でOK。

(まだこの時点では、サイト内にお問い合わせフォームは表示されません)

クラシックエディタ

次は、クラシックエディタです。

クラシックエディタでは「テキスト」にコードを貼り付け、「公開」をクリック。

Googleフォームの設定以上でOKです。

(まだこの時点では、サイト内にお問い合わせフォームは表示されません)

手順④:ブログ内にお問い合わせフォームを表示する

ブログ内に表示させる方法は、すでに解説済みなのでそちらにジャンプします。

まとめ:ブログにはお問い合わせフォームを設置しよう

formを書いている手

今回はブログにお問い合わせフォームを設定する方法を見てきました。

個人ブログであってもお問い合わせフォームは必要です。

ぜひ設置してみてくださいね。

今回は以上です。