MENU

ブログにお問い合わせフォームを作る方法を解説!設置するメリットもWordPressの実際の画面付きで解説!

こんにちは。

ハルです!

今回はブログにお問い合わせフォームを作る方法を解説します。

私がWordpressを使ってブログを書いているので同じくWordpressを使っている方向けに画像付きで解説します。

↑ブログを今から始める方はWordpressで始めることをオススメします。

目次

アドセンス広告の審査合格のために必要!お問い合わせフォームを設置するメリット3選!

お問い合わせフォームの設置方法を解説する前にお問い合わせフォームを設置するメリットを知ってモチベを上げておきましょう。

メリット1:ブログの信用度が上がる

お問い合わせフォームを設置すると読者からの連絡や質問をいつでも受けることができる体制が整うのでブログの信用度が上がります

さらにそこで読者とコミュニケーションを取れば読者がファンになってくれる可能性もあるし、読者の声を聴くことでモチベを上げることにも繋がります。

トラブルがあった際の連絡先としての役割もあるのでお問い合わせフォームがあると便利です。

お問い合わせフォームを設置するメリット

・ブログの信用が上がる

・読者がファンになってくれる可能性が増える

・読者と関わることができる

・トラブルがあった際の連絡先としての役割

メリット2:アドセンス広告の審査に合格するために必要

初心者にとって1番大きなメリットはこれだと思います。

アドセンス広告の審査に合格するための1つの条件としてお問い合わせフォームの設置はすごく重要になります。

理由の1つはアドセンス広告の審査をしているGoogleの考え方が徹底して読者最優先なのでお問い合わせフォームを設置して読者に安心感をもたらしているかどうかでかなりGoogleからの評価が変わってしまいます。

それにGoogle側としても何かあった時に連絡する方法があるというのは安心ですよね。

アドセンス広告以外のアフィリエイト広告を貼る時も企業側に安心感を与えることができるので絶対設置しておきましょう。

そもそもアドセンス広告とアフィリエイト広告が分からない方はこちらの記事をご覧ください。

お問い合わせフォームを設置するメリット

・アドセンス広告の審査に合格するために必要

・アフィリエイト広告を貼る時に企業側に安心感を与えられる

アドセンス広告の審査に合格するための方法は他にもたくさんあるのでアドセンス広告の審査に合格したい方は是非そちらの記事も読んでみて下さい。

メリット3:仕事や広告の依頼を受けられる

ブログを運営していると仕事や広告をもらうことが出来ることがあるそうです。

私はまだ経験したことが無いので分かりませんがこれからブログ運営を頑張って仕事をもらえるように頑張りたいですね。

お問い合わせフォームを設置するメリット

仕事や広告の依頼を受けられる

お問い合わせフォームの作り方(Wordpressを使って画像付きで解説)

ではメリットを知ってモチベを上げたところでお問い合わせフォームの作り方を見ていきましょう。

プラグインContact Form 7を導入

今回はプラグインを導入してお問い合わせフォームを作っていくのでまずはプラグイン導入画面に移動して下さい。

導入方法

手順1.管理画面で「プラグイン」→「新規追加」

手順2.画面右上にある検索欄で「Contact Form 7」と検索(間違えないようにコピペして検索すれば確実です)

手順3.すると富士山みたいな画像のプラグインが出てくるので「今すぐインストール」を押して「有効化」を押します

これでプラグインの導入は終わりです。

次に今インストールしたプラグインの設定をしてお問い合わせフォームを作っていきましょう。

プラグインContact Form 7の設定方法

では早速インストールしたプラグインを設定していきましょう。

設定方法

手順1.画面左のメニューバーから「お問い合せ」をクリック

手順2.コンタクトフォーム1をクリック(画像では私が既に名前を変えてしまっているのでお問合せになっています)

haru

万が一コンタクトフォーム1が無い場合や分からない場合は手順1でクリックした「お問い合せ」の下にあるコンタクトフォーム新規追加をクリックして下さい

フォームの設定方法

「ここにタイトルを入力」の部分は管理者だけが見ることが出来るタイトルなので自分が分かるように書いておけばOKです。

画面に映っているフォームは特に変更が必要ないのでそのままその隣の「メール」を押して下さい。

メールの設定方法

画面の緑□(送信先)の部分がメールの宛先になるので自分が受け取りたいメールアドレスに変更しておきましょう。

初期設定のままだとWordpressの管理者のメールアドレスとして設定したメールに届くようになっています。

管理者のメール宛で構わない場合は変更の必要はありません。

管理者のメールアドレスの確認方法↑

管理画面左のサイドバー>設定>一般>管理者メールアドレス

変更した際は「保存」をクリックすることをお忘れなく!

「保存」の上に映っているメール2は読者がメールを送ってくれた際に自動送信メールを読者に送る設定をするためのボタンです。

変更してもしなくても良いのですが、読者がちゃんとメール送れたのかな?と不安になるのを防ぐことができるので個人的には設定しておくことをオススメします。

ではメール2の設定方法を紹介します。

まずはメール2に✓を入れます。

すると画像のような画面が出てきます。

これが読者がメールを送ってくれた際に自動送信される内容になります。

お好みに合わせて変更して下さい。

haru

ちなみに私はこんな風に変えています
是非参考にしてみて下さい

↓ハルが変更した題名とメッセージ本文の部分、写真だと見にくいと思ったのでここに載せておきます。

題名:[_site_title] お問い合せありがとうございます”[your-subject]”

メッセージ本文:

[your-name]様

運営者のハルです!

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

わざわざお問い合わせして頂きとても嬉しいです。

このメールは自動送信メールとなっていますのでメールを確認次第折り返しお返事お送りします。

お問い合わせ内容:

[your-message]

お問い合わせ内容を今一度ご確認ください。

1番下の2つは✓しなくて大丈夫です。

メッセージの設定方法

次にメッセージの画面の設定です。

この画面は読者がメールを送信した際に表示される言葉が書かれている画面です。

お好みに合わせて変更しておきましょう。

そのままで良い場合は変更の必要はありません。

固定ページにお問い合わせフォームを載せる方法

ここまででお問い合わせフォーム自体は完成していますがサイトに最後にブログにお問い合わせフォームを掲載する必要があります。

今からそのやり方を紹介しますのでここで満足して離脱しないようにして下さいね。

先ほどまでの一連の流れを終えて保存も完了したらお問い合わせに先ほど追加したコンタクトフォームが追加されているのでそのショートコードをコピーします。

haru

コピーはパソコンのキーボードのctrlキーとアルファベットのcの同時押しです

ショートコードをコピーしたら次の手順に進みます。

手順1.管理画面の左バーの固定ページをクリック

手順2.次に新規追加をクリック

タイトルには「お問い合わせフォーム」や「お問い合せ」などお問い合わせフォームということが読者に伝わるようなタイトルにしましょう。

次に赤〇をクリックします。

赤〇をクリックしたらショートコードをクリックして下さい。

そして先ほどコピーしたショートコードをペーストして下さい。

haru

ペーストはパソコンのキーボードのctrlキーとアルファベットのvの同時押しです

これで終わりのように見えますが最後にパーマリンクを設定しましょう。

手順1.赤〇(設定)をクリックする

手順2.緑□(URL)をクリック

手順3.青→パーマリンクを書き換える

パーマリンクは「contact-form」や「contact」のように英語でお問い合わせフォームと分かるように記入しましょう。

最後にプレビューできちんと設定できているか確認してから保存して公開して下さい。

スパムメールの対策をする方法(reCAPTCHA)

最近はお問い合わせフォームを利用したスパムメールが来ることもあるらしいです。

haru

そんなの来たことないんだけどな…

でも対策しておくことに越したことはないのでお問い合わせフォームを設置すると同時にスパム対策はしっかりしておきましょう。

スパム対策の方法として今回は「reCAPTCHA」を利用して対策していこうと思います。

reCAPTCHAの設定方法

まずは「Google reCAPTCHA」にアクセスします。

haru

Google様が提供しているサービスなのでGoogleアカウントを持っていない方は先にアカウントを作成して下さい

次に緑□をクリックします。

手順1.緑□(ラベル)にサイト名を入力する

haru

このサイトだとharu99530.comの部分です

手順2.reCAPTCHAのタイプは赤□(reCAPTCHAv3)に✓します

手順3.青□にドメインを入力する(ドメイン名はhttps://などの部分は必要ありません)

haru

このサイトだとサイト名と同じくharu99530.comの部分です

最後にreCAPTCHAの利用条件を確認して同意するに✓を付けて送信を押します。

送信するとサイトキーとシークレットキーが表示されるのでどこかにコピペして保存しておきましょう。

サイトキーとシークレットキーを保存したら次に管理画面に戻って緑□にあるお問い合わせ>インテグレーションを開きます。

次に赤□のインテグレーションのセットアップをクリックします。

先ほど保存したサイトキーとシークレットキーを入力して「変更を保存」をクリックすればスパム対策は終わりです。

ちなみにサイトキーとシークレットキーを保存し忘れた際の確認方法も紹介しておきます。

Google reCAPTCHA」にアクセスしてから緑□をクリックするところは先ほどと同じです。

1度登録すると次からはこんな感じの画面になるので赤〇の部分のボタンを押して設定を開くとサイトキーとシークレットキーを確認することが出来ます。

お問い合わせフォームの作り方2(Googleフォームで作る方法)

さて次にプラグインではなくGoogleフォームを使ってお問い合わせフォームを作る方法を紹介します。

Googleフォームでお問い合わせフォームを作るとプラグインを使わなくていいのでブログが重くなる心配がなくなります。

その代わりにGoogleフォームのお問い合わせフォームはデザインが限られており、自動送信メールを作ることが出来ないというデメリットもあります。

メリット

・プラグインを導入しなくていいのでブログが重くならない

デメリット

・デザインが限られている

・自動送信メールを作ることが出来ない

プラグインを導入しなくていいのはかなり大きなメリットだと思うし、簡単に作れるのでこちらのやり方も是非知っておいてください。

Googleフォームでお問い合わせフォームを作る方法

1.まずは「Googleフォーム」に移動します。

2.次に青□(空白)を選択します。

3.赤□の部分を「お問い合わせ」に書き換えます。

4.その下の「無題の質問オプション1」をクリック←ここからは質問を1つずつ作成していきます。

4.赤□の部分を「お名前」に書き換える

5.青□の部分を「記述式」に変更する

6.緑□で「必須」にチェックを入れる

7.オレンジ〇の+をクリック

新しく作成した質問欄をまた書き換えていきます。

8.赤□を「メールアドレス」に書き換える

9.青□の部分を「記述式」に変更する

10.緑□で「必須」にチェックを入れる

11.オレンジ〇の+をクリック

12.赤□を「件名」に書き換える

13.青□の部分を「記述式」に変更する

14.緑□で「必須」にチェックを入れる

15.オレンジ〇の+をクリック

16.赤□を「メッセージ本文」に書き換える

17.青□の部分は「段落」のまま変更なし

18.緑□で「必須」にチェックを入れる

19.赤□(送信)を押して下さい。

20.赤□をクリックして下さい。

21.青□をクリックしてショートコードをコピーして下さい。

haru

学校や会社のアカウントで作成しないように注意して下さいね
学校のアカウントで作ると画像の黒塗りしてる部分に学校名が表示されます

ショートコードをコピーしたら次に管理者画面に戻って固定ページを作成します。

手順1.管理画面の左バーの固定ページをクリック

手順2.次に新規追加をクリック

タイトルには「お問い合わせフォーム」や「お問い合せ」などお問い合わせフォームということが読者に伝わるようなタイトルにしましょう。

次に赤〇をクリックします。

赤〇をクリックしたらショートコードをクリックして下さい。

そして先ほどコピーしたショートコードをペーストして下さい。

haru

ペーストはパソコンのキーボードのctrlキーとアルファベットのvの同時押しです

これで終わりのように見えますが最後にパーマリンクを設定しましょう。

手順1.赤〇(設定)をクリックする

手順2.緑□(URL)をクリック

手順3.青→パーマリンクを書き換える

パーマリンクは「contact-form」や「contact」のように英語でお問い合わせフォームと分かるように記入しましょう。

最後にプレビューできちんと設定できているか確認してから保存して公開して下さい。

最後に

今回はお問い合わせフォームの作り方をプラグインを導入する方法とGoogleフォームを使って作る方法の2つ紹介しました。

どちらにもメリット・デメリットはありますがお問い合わせフォームはブログにとって絶対設置すべき!と言ってもいいくらい重要なものなので自分のお好みに合わせて使い分けて下さいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次