SHIROI PONZU

2022.9.17

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

  • お問い合わせフォーム
【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

MW WP FormでGoogle reCAPTCHA v3を設置する手順をご紹介します。

手順

  • プラグインで「reCAPTCHA for MW WP Form」をインストールする
  • Google reCAPTCHAでサイトの登録をする
  • フォームに設置する

 

プラグインで「reCAPTCHA for MW WP Form」をインストールする

まずはreCAPTCHA for MW WP Formをインストールして有効化します。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

Google reCAPTCHAでサイトの登録をする

Google reCAPTCHAでサイトの登録をします。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

入力箇所は4カ所で、

1. ラベル:ドメイン名やサイト名など、管理しやすい名前をつけます。
2. reCAPTCHAタイプ:v3を選択しましょう。
3. 対象ドメイン:サイトのドメインを入力します。
4. reCAPTCHA利用条件:チェックを入れる。

入力が完了したら送信します。

 

サイトキーとシークレットキーが取得できます。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

フォームに設置する

メニューのreCAPTCHAv3から設定画面へ行きます。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

先程取得したサイトキーとシークレットキーを入力します。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

「変更を保存」で設定を保存したら、ショートコードが発行されるので、コピーしてフォームに貼り付けます。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

バリデーション設定でreCAPTCHA-v3を追加します。

 

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

フォームを反映している固定ページに、MW WP Formのフォーム識別子を追記します。※000の部分は任意の数字を反映してください。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

サイトに表示されているか確認しましょう。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

このままではページトップのボタンと被ってしまっているので、cssを調整します。

grecaptcha-badge{
bottom: 100px  !important;
}

grecaptcha-badgeというクラスにbottomを!importantで指定してください。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

タイムアウトのエラーについて

reCAPTCHA for MW WP Form では、入力に時間がかかり過ぎるとタイムアウトになる仕様が組み込まれています。「Invalid reCAPTCHA Secret key.」というエラー表示はそのタイムアウトによるものなので、設定ミスなどではありません。ページを再読み込みすると治ります。

【WordPress】MW WP FormでGoogle reCAPTCHA v3を設置する

 

手順通りにやってもうまく表示されない

<?php wp_head(); ?>と<?php wp_footer(); ?>がきちんと記述されているか確認しましょう。

 

以上で実装は完了です!お疲れさまでした◎

 

Share Please

Read this too