【Diver】Contact Form7 プラグイン 問い合わせフォーム作成方法とスパム対策

 

WordPressでContact Form7 のプラグインを使って簡単に問い合わせフォームを作る方法を解説していきます。

また不特定多数から届くスパム対策もバッチリとしていきます。

 

WordPressでブログを運営している方、特にアフィリエイトをやっている方は、テーマ（テンプレート）はDiverが使いやすくSEO対策もバッチリでしかも高機能と3拍子揃っていますので是非導入してほしいテーマです。

 

＜＜このブログのテーマはDiverを利用しています＞＞

 

 

【Diver】WordPress　Contact Form7 とは？

Contact Form 7とは、WordPressで作成したブログに問い合わせフォームを設置するためのプラグイン（拡張機能）のことです。

 

では実際に問い合わせフォームを作っていきましょう。

 

【Diver】WordPress　Contact Form7 をインストール

では、お使いのWordPressに「Contact Form7」をインストールしましょう。

 

① WordPressの管理画面左側メニューの「プラグイン」にカーソルを合わせます。（又はクリック）

② 「新規追加」をクリック。

 

 

③ 右側の検索窓に[Contact Form7]と入力。

 

自動的に[Contact Form7]が表示されます。

 

④ 「今すぐインストール」をクリック。

 

「今すぐインストール」をクリックしますと即インストール完了します。

 

⑤ 「有効化」をクリックします。

※当ブログでは既に有効化しているので表示は「有効」となっています。

 

 

以下の画面に遷移します。

少しややこしいですが「無効化」となっていれば「有効化」できております。

 

以上でインストール完了です。

 

【Diver】WordPress　Contact Form7 で問い合わせフォームを作成

続いて、インストールした「Contact Form7」で問い合わせフォームを作成します。

「Contact Form7」を有効化すると、WordPressの管理画面左側メニューに「お問い合わせ」という項目が追加されます。

 

① 「お問い合わせ」にカーソルを合わせます。

② 「コンタクトフォーム」をクリック

 

 

③ 「コンタクトフォーム1」をクリックします。

※「コンタクトフォーム1_copy」と表示がありますが私のブログで作っただけなので無視してください。

 

 

編集画面に遷移します。

④ 題名の部分を削除します。

問い合わせに題名（件名）は特に不要なので削除しておきます。

 

↓↓↓↓↓↓

 

⑤ 下部の「保存」をクリック

 

 

出来上がりは以下の通りです。

以上で問い合わせフォームが完成しました。

 

【Diver】WordPress　Contact Form7 で問い合わせページの作成

「Contact Form7」で問い合わせフォームを作成しましたので、次は問い合わせ専用のページを作成します。

先ほど作成したコンタクトフォームをもう一度開いてください。

 

① ショートコードをコピーします。

※コピー　【ctrl】＋【c】

※テキストに貼り付けておきます。

 

 

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

 

 

③ タイトルを「お問合せ」等に変更します。

※別の名前でも問題ありません。任意です。

 

④ コピーしたショートコードを貼り付けます。

※貼り付け　【ctrl】＋【v】

 

 

⑤ 公開をクリックして終了です。

 

 

これで「お問合せ」のページが出来上がりました。

 

 

順番に進めていけば特に躓くことなく作成できますので落ち着いて進めてください。

分からなければいつでもお問合せくださいね。

 

【Diver】WordPress　Contact Form7 にスパム対策

「Contact Form7」にて問い合わせページを作りましたが、この状態でも運用は可能ですが、このままだと海外からのスパム書き込みが大量に届き、メールの受信BOXが迷惑メールまみれになります。

このようなスパムメールが大量に届きます。

これはツールなどを利用して書き込みをしているので対策を施すことで防ぐことが出来ます。

Googleのサービス「reCAPTCHA(v3)」を導入することで回避していきます。

 

Googleリキャプチャ(reCAPTCHA)とは？

Googleリキャプチャ(reCAPTCHA)はGoogleが提供する「フォームの不正利用やスパム対策の認証システム」で、データの送信者が「人間なのかロボットなのか」を判定します。

その認証システム自体は一般的にCAPTCHA(キャプチャ)と言われています。

Google開発したGoogleリキャプチャ(reCAPTCHA)は、現在バージョン3までリリースされています。

 

この説明だけだとまだ「reCAPTCHAって何？」って思う方も多いと思いますが、おそらく次の項をお読みいただければ「ああ、あれか！見たことある！」ってなると思いますのでこのまま読んでみてください。

 

「Contact Form 7」はGoogleリキャプチャ(reCAPTCHA)v3に公式に対応しているので簡単な設定で利用することができます。

v2ではユーザーがチェックボックスや画像選択クイズに答えたりとわずらわしさがありましたが、v3では自動で挙動をチェックするのでユーザーは特に認証のために何もしなくてよくなりました。

 

Googleリキャプチャ(reCAPTCHA)の設定

以下のGoogleリキャプチャ(reCAPTCHA)の公式ページ進んでください。

尚、googleのアカウントが必要なのでお持ちで無い方は作成をお願いします。

本ページではgoogleのアカウント取得方法は割愛します。

 

Googleリキャプチャ(reCAPTCHA)の公式ページ

【https://www.google.com/recaptcha/about/】

 

① v3 Admin Console をクリック

 

 

② ラベルは任意で分かりやすいモノで問題ありません。

③ reCAPTCHA v3 を選択

④ 問い合わせフォームを設置したブログのドメインを記入

※このブログでしたら【freejob-navi.site】です。

 

オーナーの部分はログインしているgoogleアカウント名が自動で入力されます。

 

⑤ 同意するにチェックを入れます。

⑥ 入力に問題が無ければ「送信」をクリック

 

 

 

送信しますと以下のページに遷移します。

サイトキー、シークレットキーの２つを後程使いますので控えておきましょう。（いつでもまた確認できます）

 

サイトキー、シークレットキーのコピーが終わったり「アナリティクスに移動」をクリックします。

以下のページに遷移します。そのまま閉じて頂いて問題ありません。

 

 

次に「Contact Form7」の設定に入ります。

もう少しで終了です。

 

Contact Form7で作られたフォームにv3を実装

次に「Contact Form7」の設定になります。

コピペするだけなので簡単です。

 

 

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

 

 

先ほどコピーした「サイトキー」と「シークレットキー」を入力して「変更を保存」をクリックします。

これで終了です。

 

 

以下のマークがブログに表示されれば設定完了です。

これで「Contact Form7」のスパム対策は完了です。

 

 

以上が「【Diver】Contact Form7 プラグイン 問い合わせフォーム作成方法とスパム対策」となります。

 

不明点がありましたらいつでもお問い合わせください。