コンタクトフォーム７にreCAPTCHA設定

Server

自分のサイトでお問い合わせページを作るときにちょっとつまづいたので、一連の流れを覚えておくためにも記事にしてみました

お問い合わせページを作成して、reCAPTCHA v2を設定してテストメールを受け取るまでの流れです

必要なプラグインをインストール

１．WP Mail SMTP

WP Mail SMTP は、WordPressのメール送信機能を改善する無料プラグインです
通常、WordPressのメール送信は wp_mail() 関数を使用し、サーバーのPHPの mail() 関数に依存しますが、多くのレンタルサーバーでは適切に設定されていないことがあり、メールが迷惑メールフォルダに入ったり、届かなかったりすることがあります

WP Mail SMTPの主な機能

  1. SMTPサーバーを使用してメールを送信
    • Gmail、Outlook、SendGrid、Mailgun、Amazon SES などのSMTPサービスに対応
    • ConoHa VPSなど、自前でSMTPサーバーを設定している場合にも利用可能
  2. メールの送信テスト
    • プラグインの管理画面からテストメールを送信し、正常に動作しているか確認できる
  3. 送信ログの記録（Pro版）
    • メールが送信された履歴をWordPress内に記録（有料版の機能）
  4. メール送信者情報の変更
    • 「送信者名」「送信者メールアドレス」をカスタマイズ可能

２．Contact Form 7

Contact Form 7 は、WordPressの問い合わせフォームを簡単に作成・管理できる無料プラグインです

Contact Form 7の主な特徴

  1. シンプルな問い合わせフォームを簡単に作成
    • フォームのHTMLを編集して自由にカスタマイズできる
    • ショートコードを使って投稿や固定ページにフォームを埋め込み可能
  2. reCAPTCHA・Akismetによるスパム対策
    • GoogleのreCAPTCHAやAkismetを利用してスパムを防止
  3. メール通知機能
    • フォーム送信後に、管理者や送信者に自動でメールを送信できる
  4. カスタマイズ可能な入力項目
    • 名前、メールアドレス、件名、メッセージのほか、チェックボックスやドロップダウンメニューなどを追加可能
  5. WP Mail SMTPとの併用でメール送信の信頼性向上
    • Contact Form 7のメール送信はWordPressの wp_mail() 関数を使用するため、WP Mail SMTPと組み合わせることでメール送信の問題を回避できる

３．ReCaptcha v2 for Contact Form 7

ReCaptcha v2 for Contact Form 7 は、WordPressの問い合わせフォームプラグイン Contact Form 7 に Google reCAPTCHA v2 を統合するためのプラグインです。

このプラグインの役割

WordPressの Contact Form 7 には標準で Google reCAPTCHA v3 のサポートがありますが、v3は透明な動作のため誤検知が発生しやすい という問題があります
そのため、ReCaptcha v2 for Contact Form 7 を使うことで、明示的な「私はロボットではありません」チェックボックスや画像認証を追加でき、スパム防止の精度を向上させることができます

主な機能

  1. Contact Form 7にreCAPTCHA v2を追加
    • 「私はロボットではありません」のチェックボックスをフォームに設置可能
    • 「画像認証（ピクチャーパズル）」タイプの認証も使用可能
  2. スパム防止効果の向上
    • v3よりもスパム判定が安定しており、フォーム送信時の誤検知を防げる
  3. 簡単な設定
    • Googleの reCAPTCHA v2 の「サイトキー」と「シークレットキー」を設定するだけで利用可能
  4. Contact Form 7との完全互換
    • Contact Form 7にreCAPTCHA v2を直接組み込むため、追加のコード変更が不要

WP Mail SMTPでテストメール送信

gmailのアプリパスワードを取得

google アカウント管理ページからアプリパスワードを取得します

Learn More About Google's Secure and Protected Accounts - Google
Sign in to your Google Account and learn how to set up security and other account notifications to create a personalized...
myaccount.google.com

セキュリティタブをクリック

２段階認証プロセスをクリックして２段階認証を有効にします

２段階認証プロセスの下のほうにあるアプリ パスワードを選択します

適当なアプリ名を入力してアプリパスワードを生成してメモしておきます

WP Mail SMTPの設定

wordpressのダッシュボードからWP Mail SMTPの設定を選択

一般のタブの中にあるセットアップウィザードを起動をクリック、手順に沿って選択していきます

  • SMTP メーラーを選択する：その他の SMTP
  • メーラー設定を調整する
    • SMTP ホスト：smtp.gmail.com
    • 暗号化：TLS
    • SMTP ポート：587
    • 認証：認証を有効化
    • SMTP ユーザー名：sample@gmail.com（先ほど作成したアプリパスワードのメールアドレス）
    • SMTP パスワード：先ほど作成したアプリパスワード
    • 送信者名：サイト名などをなんでもいいです
    • 送信者名を強制使用：有効
    • 送信元メールアドレス：sample@gmail.com
    • 送信元メールアドレスを強制使用：有効
  • それ以降はデフォルトの内容でチェックを入れていって問題ありません

これでテストメールの送信ができると思います

Google reCAPTCHA v2 キーの取得

google cloudの公式ページにアクセスします

Cloud Computing Services | Google Cloud
Meet your business challenges head on with cloud computing services from Google, including data management, hybrid & mul...
cloud.google.com

プロジェクトを作成

ヘッダーのコンソールを選択して、プロジェクトを新規作成します

reCAPTCHA Enterprise の設定

ヘッダーにある プロダクト から セキュリティとID をクリック

下のほうにある reCAPTCHA Enterprise をクリック

使ってみる をクリック

適当なラベルを入力します

reCAPTCHA タイプを選択
今回は V2 を選択します

ドメインに適用するサイトのドメインを入力します

先ほど作成したGoogle Cloud Platformプロジェクト名を選択します

送信 を押します

サイトキー と シークレットキー が表示されるのでメモしておきます

wordpress ダッシュボードでの設定

wordpressのダッシュボードの お問い合わせ から recaptchaバージョン からrecaptcha v2 を選択

再びダッシュボードの お問い合わせ から インテグレーション で、rechatpchの項目の インテグレーションのセットアップ を選択

先ほど取得したサイトキーとシークレットキーを入力して保存

再びダッシュボードの お問い合わせ から コンタクトフォーム を選択

初めての方は新規追加でコンタクトフォームを作成、フォームの名前を入力します

フォームタブ を選択、初期のサンプルに、以下のように [recaptcha] のコードを追加して 保存 を押します

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[recaptcha]

[submit "送信"]

次に メールタブ を選択

メールのテンプレートをここで編集できます
この設定のように、お問い合わせからメールが送信されたときに、自分に届くメールの内容をここで設定します

基本的には以下のように設定します

  • 送信先： sample@gmail.com（先ほどアプリパスワードを生成した自分のメールアドレス）
  • 送信元： [_site_title] <wordpress@sample.com（自分のドメイン）>
  • 題名： [_site_title] “[your-subject]”
  • 追加ヘッダー： Reply-To: sample@gmail.com
  • メッセージ本文：
    • 差出人: [your-name] [your-email]
    • 題名: [your-subject]
    • メッセージ本文:[your-message]– 本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。

メール (2)には自動返信用のメールの設定を入力します

  • ]送信先： [your-email]
  • 送信元： [_site_title] <wordpress@sample.com（自分のドメイン）>
  • 題名： [_site_title] “[your-subject]”
  • 追加ヘッダー： 空欄
  • メッセージ本文： メッセージ本文:[your-message]– あなたのメールアドレスを使用して、私たちのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信がありましたので、その控えとして本メールを送ります。もしもその送信について心当たりのない場合は、どうぞこのメッセージを無視してください。

タブの上部にあるショートコードをコピーして、お問い合わせ用の固定ページに貼り付けます

これでreCAPTCHA v2がついたお問い合わせページを作成することができました

コメント