【WordPress】問い合わせフォームの設置方法を初心者向けに画像付で解説│スパム対策アリ

ブログ
この記事は約17分で読めます。

当ブログはアフィリエイト広告を利用しています[PR]

ブロガーのこじろーです。
こじろーブログ。では、ブログ未経験者にも分かりやすくWordPressの使い方やアフィリエイトのノウハウを解説しています。
いつでも見直せるよう、ブックマークをしておくことをおすすめします!
初子
初子

WordPressブログにお問い合わせフォームを設置する方法を教えてほしい

初男
初男

Googleアドセンスの審査通過にお問い合わせフォームが必要と聞いたので設置したい

本記事では、WordPressテーマ[Cocoon]にお問い合わせフォームを設置したいというお悩みにお答えしていきます。

》当ブログのお問い合わせフォーム

WordPressやCocoonテーマ自体にお問い合わせフォームの作成機能は実装されておりませんので、今回は以下の2つのツールを使用した方法をご紹介します。

  • プラグイン[Contact Form 7]
  • Googleフォーム
本記事でわかること
  • お問い合わせフォームが必要な理由
  • [Contact Form 7]を使用したお問い合わせフォームの作成方法
  • [Googleフォーム]を使用したお問い合わせフォームの作成方法
  • お問い合わせフォームのスパム対策方法

この記事の信用性

この記事を書いている人

[WordPress]お問い合わせフォームとは?

[WordPress]お問い合わせフォームとは?−[Contact Form 7]で作ったお問い合わせフォーム

お問い合わせフォームとは、Webサイトやブログにアクセスしたユーザーのお問い合わせを受け付けることを目的として設置するWebフォームです。

》当ブログのお問い合わせフォーム

WordPressブログに限らず、運営するWebサイトには[お問い合わせフォーム]の設置をおすすめします。

お問い合わせフォームが必要な5つの理由

お問い合わせフォームが必要な5つの理由
初子
初子

記事さえあれば、ブログにお問い合わせフォームなんて必要ないのでは?

と思っている人は多いと思います。

Webサイトにお問い合わせフォームが必要な理由は大きく5つあります。

お問い合わせフォームが必要な理由
  1. ユーザーとの連絡用窓口
  2. サイトの信頼性や安心感
  3. 企業案件の依頼用
  4. GoogleAdSenseなどの審査用
  5. メールアドレスを公開しなくてもよい

① ユーザーとの連絡用窓口

一番の理由は、ユーザーの連絡用窓口です。

私の運営するトレンドブログの場合は、ブログテーマに関する情報提供をしてもらえるのでとても重宝しています。

② サイトの信頼性や安心感

お問い合わせフォームの無いWebサイトは、トラブルの際、サイト運営者と連絡を取れないという不安をユーザーに与えてしまいます。

お問い合わせフォームを設置することでユーザーの信頼性を高め、安心感を与えることができます。

③ 企業案件の依頼用

私はトレンドブログを運営していることから、定期的に企業から案件をいただくことがあります。

内容自体はピンキリですが中には価値のある案件もあります。

フォームが無ければこのチャンスを逃すことになります。

ブロガーやアフィリエイターにとって、お問い合わせフォームの必要性を一番感じるのは、この項目かもしれませんね。

④ GoogleAdSenseの審査用

GoogleAdSense(グーグルアドセンス)などのアフィリエイト広告サービスの中には、お問い合わせフォームの設置を条件にしているところがあります。

Googleアドセンスの審査通過を目指すブロガーはもちろんですが、やらない人もお問い合わせフォームの設置はしておきましょう。

⑤ メールアドレスを公開しなくてもよい

メールアドレスは個人情報の1つです

連絡の窓口として、メールアドレスを不特定多数が閲覧するブログに設置しておくことはリスクが大きいです。

お問い合わせフォームであれば、問い合わせ相手にメールアドレスを知られることはありません。

以上の5つが、Webサイトにお問い合わせフォームを設置する理由です。

[Contact Form 7]でお問い合わせフォームを作成する方法

[Contact Form 7]でお問い合わせフォームを作成する方法

お問い合わせフォームの設定にはいりましょう。

まず、お問い合わせフォーム作成用のWordPressプラグイン[Contact Form 7を利用した作成方法を解説していきます。

Googleフォームを使用した作成方法こちら

プラグイン[Contact Form 7]とは?

[Contact Form 7]でお問い合わせフォームを作成する方法

[Contact Form 7](コンタクト フォーム 7)は、WordPressのお問い合わせフォームを作成するプラグインです。

WordPress製のWebサイトやブログのお問い合わせフォームの多くはContact Form 7で作られています。

Contact Form 7を使用したお問い合わせフォームをブログに設置するまでの手順は次の通りです。

[Contact Form 7]でお問い合わせフォームを作成する手順
  1. Contact Form 7をインストール
  2. Contact Form 7の設定 ※ショートコード作成など
  3. 固定ページ設定 
  4. お問い合わせページにショートコード貼り付け、URL変更、設置など
  5. スパム対策

Contact Form 7のインストール

Contact Form 7のインストール
  • STEP1
    プラグインの追加画面へ移動
    Contact Form 7のインストール−【WordPress】プラグイン設定-プラグインの新規追加

    1.WordPress管理画面

    [プラグイン]⇒[新規追加]

    Contact Form 7の設定-Contact Form 7のインストール−プラグインの追加1

    2.[プラグインを追加画面]画面が表示されたら①にプラグイン名(Contact Form 7)を入力します。

    ②に入力したプラグインが表示されたら[今すぐインストール]をクリックします。

    Contact Form 7の設定-Contact Form 7のインストール−プラグインの追加2

    3.③[今すぐインストール]ボタンが[有効化]に変わればクリックします。

    これでContact Form 7のインストールが終わりました。

Contact Form 7の設定

次は、Contact Form 7の設定に入ります。

設定の目的は固定ページに貼り付ける[ショートコード]の生成です。

基本的にはデフォルトのままで問題ありません。

今回は各項目の紹介をして行きますが、設定の必要が無ければショートコードの生成だけを行ってください。

Contact Form 7の設定1

1.[プラグイン]一覧画面が表示されるので、①Contact Form 7の[設定]をクリックします。

Contact Form 7のインストール後に出現する②[お問い合わせ]項目からもContact Form 7の設定ページへ行くことができます

Contact Form 7の設定2

2.[コンタクトフォーム]画面が開いたら①[新規追加]をクリックします。

②サンプルフォーム[コンタクトフォーム1]の[編集]からもフォームの設定は可能です。

今後、新フォームを作成する場合は、[お問い合わせ]⇒[新規追加]から作成します。

WordPress管理画面-お問い合わせ-新規追加
Contact Form 7の設定3

3.[コンタクトフォームを追加]画面に入ったらタイトルに[お問い合わせ]と入力します。

このタイトルは、Contact Form 7の設定ページで使用するタイトルなので外部に公表されることはありません。※いつでも変更可能です

Contact Form 7の設定4

4.タイトル下に4つのタブがありますので、順番に解説していきます。

  1. フォームタブ…フォーム項目の設定
  2. メールタブ…受信メールの設定
  3. メッセージタブ…メール送信後のメッセージ(自動配信)の内容
  4. その他の設定タブ…カスタマイズコードを追加できます

① フォーム

フォームタブは、お問い合わせフォームに明記する項目(入力項目)の設定をします

Contact Form 7の設定-フォーム設定

1.お問い合わせユーザーから取得するデフォルトの項目は上の4つです。

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

このままで問題はありませんが、もし取得したい項目がある場合は追加をしてください。

最後に保存をクリックします。

Contact Form 7の設定-フォーム設定2-ショートコード発行

2.設定を保存すると[コンタクトフォームが作成されました。]という文言が表示され、タイトル下にショートコードが発行されます。

ショートコードのtitle(タイトル)部分は、上のタイトル名[お問い合わせ]が使用されます

タイトル名を変更するとショートコードのtitleも変更されます。

② メール

[メール]タブでは、あなたのメールアドレス宛に届く受信メールの内容の設定をします。

Contact Form 7の設定-メール設定
メールの項目
① 送信先問い合わせメールを受信するメールアドレス
※デフォルトはWordPressのログイン時のアドレスです
送信元問い合わせメールの送信元のメールアドレス 
③ 題名メールの題名
④ 追加ヘッダーメールの返信先
※デフォルトは問い合わせユーザーのメールアドレスが設定
⑤ メッセージ本文本文
⑥ ファイル添付入力はいりません ※画像では隠れてます
① 送信先問い合わせメールを受信するメールアドレス
※デフォルトはWordPressのログイン時のアドレスです
② 送信元問い合わせメールの送信元のメールアドレス 
③ 題名メールの題名
④ 追加ヘッダーメールの返信先
※デフォルトは問い合わせユーザーのメールアドレスが設定
⑤ メッセージ本文本文
⑥ ファイル添付入力はいりません ※画像では隠れてます 
–!>

基本的にはこのままで結構です。

Contact Form 7の設定-メール設定2

2.最後に保存を押します。

③ メッセージ

メッセージタブでは、お問い合わせフォーム上で表示される様々なメッセージ内容の変更が可能です。

Contact Form 7の設定-メッセージ設定

基本的にはデフォルトで問題はありません。

④ その他設定

その他の設定タブは、特に設定をすることはありません。

Contact Form 7のショートコードをコピー

Contact Form 7の設定-Contact Form 7のショートコードをコピー

1.全設定を終了したらショートコードをコピーします

これでContact Form 7の設定は終了となります。

Contact Form 7の設定-Contact Form 7のショートコードをコピー2

[WordPress設定⇒お問い合わせ]からもショートコードを取得できます。

WordPressの固定ページ設定

お問い合わせのショートコードを生成したので次はそれを貼り付けて、お問い合わせを表示させるためのページを固定ページに用意します。

WordPress管理画面-固定ページから新規追加

1.WordPressメニューバーで[固定ページ]⇒[新規追加]をクリックします。

WordPressの固定ページ設定-ショートコードの貼り付け1

2.新規固定ページのエディター(編集画面)が開いたら①にタイトルを入力し、②のどちらかの[+]をクリックしてブロック一覧を表示させ、③ショートコードを呼び出しクリックします。

ショートコードが表示されない場合は、検索窓に[ショートコード]と入力して呼び出します。

WordPressの固定ページ設定-ショートコードの貼り付け2

3.ショートコードの入力ブロックが表示されたら、お問い合わせのショートコードを貼り付けます。

WordPressの固定ページ設定-ショートコードの貼り付け3

4.貼り付けたら下書き保存をクリックします。

WordPressの固定ページ設定-ショートコードの貼り付け4

5.①をクリックし②[新しいタブでプレビュー]でプレビューを確認しましょう。

WordPressの固定ページ設定-ショートコードの貼り付け5-お問い合わせページのプレビュー画面

6.プレビュー画面にお問い合わせフォームが表示されていればOKです。

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

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

次は、Googleフォームを使ったお問い合わせフォームの作成方法をお伝えしていきます。

Googleフォームとは?

Googleフォームは、文字通りGoogleが提供する無料のフォーム作成ツールです。

お問い合わせやアンケートや投票などの用途でに対応しており、回答の形式も豊富に用意されています。また、集計機能が装備されているので分析用ツールとしても使用可能です。

Googleフォームの設定

Googleフォーム版のお問い合わせフォームの作成にはGoogleアカウントが必要です

フォームの登録内容は[Contact Form 7]の項目と同じものにし、全項目を入力必須で設定します。

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

Googleフォームを開きます。

Googleフォームの設定1

1.空白をクリックします。

Googleフォームの設定2

2.タイトルを[お問い合わせ]に変更します。

Googleフォームの設定3

3.下の[無題の質問]をクリックすると、エリアが拡大します。

①に氏名を入力、②[記述式]を選択、③[必須]にチェックをしてください。

④[+]をクリックすると、下に新しいパーツが出現します。

Googleフォームの設定4

4.次は、①メールアドレス、②[記述式]を選択、③[必須]にチェックをして、④の[+]をクリックし、先と同じように下に新しいパーツを出します。

Googleフォームの設定5

5.同様に、①題名、②[記述式]を選択、③[必須]にチェック、④の[+]をクリックして新しいパーツを出します。

Googleフォームの設定6

6.最後は、①メッセージ本文、②[段落]を選択、③[必須]にチェックをします。

ここでは②は[記述式]では無く、[段落]を選択します。

Googleフォームの[記述式]と[段落]の違いは入力できる文字数です。[記述式]は20文字程度の短文、長文の回答が来る可能性のある項目は[段落]を使用下さい。

登録は以上です。

まだ増やしたい場合は[+]をクリックして項目を追加してください。

Googleフォームの設定7

7.全項目の登録を終えたらページ右上の[送信]をクリックします。

Googleフォームの設定8

8.[フォームを送信]画面が表示されます。

送信方法の[< >]を選択すると表示される埋め込みのHTMLを右下の[コピー]をクリックしてコピーします。

これでGoogleフォームの設定は終了です。

WordPressの固定ページ設定

次は固定ページの設定を行います。

WordPressの固定ページ設定1-固定ページから新規追加

1.固定ページの新規追加をクリックします。

WordPressの固定ページ設定2

2.固定ページが開いたら①にタイトルを入力し、②のどちらかの[+]をクリックしてブロックを追加します。

③ショートコードをクリックします。

ショートコードが表示されない場合は、検索窓に[ショートコード]と入力して呼び出します。

WordPressの固定ページ設定3

3.ショートコードの入力フォームが表示されたら、先ほどコピーしたショートコードを貼り付けます。

WordPressの固定ページ設定4

4.下書き保存をクリックします。

WordPressの固定ページ設定5

5.①をクリックし②[新しいタブでプレビュー]でプレビューを確認しましょう。

WordPressの固定ページ設定6-Googleフォーム版のお問い合わせページのプレビュー

このように表示されたら、Googleフォーム版のお問い合わせフォームの完成です。

お問い合わせフォーム公開とURL変更の設定

お問い合わせフォーム公開とURL変更の設定

お問い合わせフォーム公開

下書き状態のお問い合わせフォームを公開しましょう。

お問い合わせフォーム公開

1.エディターに戻り、右上の[公開]をクリックで、お問い合わせフォームが公開されます。

URL(パーマリンク)の変更設定

お問い合わせページ公開後はURL(パーマリンク)の変更をしましょう。

https://kojirosblog.com/お問い合わせ

公開直後のURLは、固定ページのタイトル名(ここでは『お問い合わせ』)がスラッグとして生成されてしまいます。

このURLをコピペして他の場所に張り付けると、英数字記号が混合した長い文字列に変換されてしまうので、こだわりが無ければ英語に変更することをお勧めします

URL(パーマリンク)の変更設定1

1.固定ページを開き、右のメニューに入ります。

①[固定ページ]を選択し、②現在のURLをクリック、③が表示されたら[contactform]と入力します。

URL(パーマリンク)の変更設定2

2.上と下のURLが変更されていれば設定は終了です。

最後に[更新]をクリックしたら、お問い合わせフォームの完成です。

一度、自分自身でテスト送信をしてメールが届くか確認をしておきましょう。

お問い合わせフォームのスパム対策方法[reCAPTHA]

お問い合わせフォームのスパム対策方法[reCAPTHA]

Webサイトの成長とともに、お問い合わせフォームやコメント欄にスパムメールが繁殖してきますので、スパム対策をすることをおすすめします。

今回は、Googleが無料で提供しているスパム対策ツール[Google reCAPTCHA]ツールをご紹介します。

[Google reCAPTCHA]とは?

[Google reCAPTCHA]とは?
reCAPTCHAとは?

reCAPTCHAとは、botによるWebサイトへのスパム攻撃を防御してくれるGoogle提供の無料サービスです。

お問い合わせフォームの送信画面やログイン画面で、「私はロボットではありません」という文言とチェックボックスを見たことがあると思います。

[Google reCAPTCHA]とは?-認証のチェックボックス

それがreCAPTCHAです。

上の画像は、旧バージョンのreCAPTCHA V2で表示される認証方式でしたが、現在のreCAPTCHA V3では、人間かbotかを自動判別してくれるようにアップデートされ、基本的にはユーザーの入力操作が不要になりました。

このGoogleのツールを使用してスパム対策をしていきます。

[Google reCAPTCHA]の設定にはGoogleアカウントが必要です。

reCAPTHAの設定手順

1.[Google reCAPTCHA]のサイトへ移動します。

reCAPTHAの設定手順1

2.[v3 Admin Console]をクリックします。

reCAPTHAの設定手順2

3.登録情報が表示されますので順番に入力をしていきます。

  1. [ラベル]にブログタイトルを入力します。
  2. [reCAPTCHAタイプ]は[スコアベース(V3)]を選択します。
  3. [ドメイン]にブログのドメインを入力します。

[https://]部分は入力しません。

当ブログだと以下の赤文字のドメインを入力します。

× https://kojirosblog.com

○ kojirosblog.com

入力を終えたら④の送信をクリックします。

reCAPTHAの設定手順3

4.サイトキーと②シークレットキーが発行されるので、それぞれをコピーします

reCAPTHAの設定手順4

5.WordPress管理画面に移動します。

[お問い合わせ]⇒[インテグレーション]

reCAPTHAの設定手順5

6.下へスクロールし、[reCAPTCHA]項目の[インテグレーションのセットアップ]をクリックします。

reCAPTHAの設定手順6

7.①[サイトキー]と[シークレットキー]を入力し②[変更を保存]をクリックします。

reCAPTHAの設定手順7

8.[設定を保存しました。]を確認したら[reCAPTHA]のスパム対策は終了です。

これでreCAPTCHAが作動します。

reCAPTCHAのショートコードの確認方法

今後、[サイトキー]や[シークレットキー]を忘れたり、確認をしたいという場合は以下の方法で確認可能です。

reCAPTCHAのショートコードの確認方法1

1.[reCAPTCHA]のサイトにアクセスし、ログインし[v3 Admin Console]をクリックします。

reCAPTCHAのショートコードの確認方法2

2.reCAPTCHAの管理画面が表示されたら、右上の歯車アイコンをクリックします。

reCAPTCHAのショートコードの確認方法3

3.reCAPTCHAの設定画面が表示されます。

①[reCAPTCHA のキー]をクリックすると、②[サイトキー]や[シークレットキー]が表示されます。

reCAPTCHAの解除方法

reCAPTCHAの解除方法は、Contact Form 7に登録した[サイトキー]と[シークレットキー]の削除をすればOKです。

reCAPTCHAの解除方法1

1.削除はWordPress管理画面のお問い合わせから行います。

お問い合わせ⇒インテグレーション

reCAPTCHAの解除方法2

2.下へスクロールし[reCAPTCHA]の[インテグレーションのセットアップ]をクリックします。

reCAPTCHAの解除方法3

3.[reCAPTCHA]の詳細画面が表示されたら、[キーを削除]をクリックします。

reCAPTCHAの解除方法4

4.[reCAPTCHA]の[サイトキー-]と[シークレットキー]が削除されたのを確認して終了です。

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

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

お問い合わせフォームは完成しましたが、WordPressブログ上にリンクが無いので誰もアクセスすることができません。

メニューバーを作成し、そこにお問い合わせページのリンクを追加する方法を解説していきます。

今回は、フッター部分にお問い合わせフォームを設置する方法をお伝えしていきます。

お問い合わせフォームの設置方法1-WordPress-管理画面-外観-メニュー

1.WordPress管理画面に移動します。

外観⇒メニュー

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

2.メニュー画面が表示されます。

右側の[メニュー構造]の①[メニュー名]に『フッターメニュー』と入力します。

②[メニュー設定]の[メニューの位置]では、お問い合わせフォームの表示場所を決めます。 

[フッターメニュー]と[フッターモバイルボタン]にチェックを入れ、最後に③[メニュを作成]をクリックします。

お問い合わせフォームをヘッダーに表示させたい場合はメニュー名を[ヘッダーメニュー]、メニューの位置を[ヘッダーメニュー]などにしてください。

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

3.画面左側のメニュー項目がアクティブになるので、固定ページタブをクリックして開きます。

[お問い合わせ]にチェックを入れ[メニューに追加]をクリックします。

お問い合わせフォーム項目が見つからない場合は[すべて表示]タブをクリックしてください。お問い合わせフォームが存在していれば表示されます。

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

4.右側の[メニュー構造]エリアにお問い合わせが追加されたら[メニューを保存]をクリックして終了です。

実際にフッターに表示されているかパソコンとスマホの両方のデバイスで確認をしてみましょう。

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

[お問い合わせ]項目の確認で終わらず、クリックして[お問い合わせページ]に遷移するまでの確認をしておくことをおすすめします。

まとめ:【WordPress】問い合わせフォームの設置方法を初心者向けに画像付で解説

本記事では、お問い合わせフォームの作成と設置をする方法を解説しました。

本記事で分かったこと(まとめ)
  • プラグイン[Contactform]を使用したお問い合わせフォームの作成方法
  • Googleフォームを使用したお問い合わせフォームの作成方法
  • お問い合わせフォームのスパム対応ツール[Google reCAPTCHA]の実装方法

ブログやアフィリエイトで稼ぎたい人はお問い合わせフォームを必ず設置しておきましょう。

お問い合わせフォームの作成以外にWordPressの初期設定を終えていない人は、WordPressの初期設定をまとめた記事を併せてお読みください。

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

コメント

タイトルとURLをコピーしました