elementorのFormウィジェット（Pro版）は簡単に問い合わせフォームや調査フォーム、イベント登録フォームなど作れる優れものです。今回はお問い合わせフォームのスパムメール対策としてreCAPTCHAv3の設定をしたいと思います。
reCAPTCHAとは
グーグルが提供するbot対策ツールで、お問い合わせやコメント投稿などでスパムメールを防ぐためのセキュリティツールです。バージョン２以前は「私はロボットではありません」にチェックするものや、指定の画像を選択するものでしたが、いずれもセキュリティ面で劣るため現在はバージョン３に移行しつつあります。reCAPTCHAv3はユーザーは何かをチェックするような行為はしないのでユーザビリティが向上し離脱率の改善につながります。
前提条件
- ページビルダーはelementorのPro版であること
- Formウェジェットを使って「お問い合わせ」フォームが作成済みであること
- googleのアカウント登録が済んでいるいること
完成イメージ
reCAPTCHA v3の導入方法
自身のGoogleアカウントでGoogle reCAPTCHAのサイトを開き、画面上部にあるv3 Admin Consoleをクリックします。
- ラベル：分かりやすい名前をつけましょう
- reCAPTCHAタイプ：reCAPTCHA v3を選択
- ドメイン：自分のサイトのドメイン
- オーナー：googleアカウント名
- reCAPTCHA利用条件に同意する：チェックする
- アラートをオーナーに送信する：チェックする
７．設定内容に問題なければ「送信」をクリックします。
すると「登録されました」と共にサイトキーとシークレットキーが発行されます。
この後、Wordpress側にキーを入力するので画面はそのままにしておきましょう。
WordPressに登録
WordPressのダッシュボードからelementor＞設定を開き、「連携」タブを選択します。reCAPTCHA V3の項目にサイトキーとシークレットキーを入力する欄がありますので、そこにそれぞれのキーを入力します。間違え防止のため、コピペして下さい。
完了したら、「変更を保存」ボタンを押してください。
Formウィジェットへの配置
お問い合わせフォームを作成します。今回はelementorのFormウェジェットを使用します。
フォームを編集からコンテンツを開きます。項目を追加ボタンで追加します。各項目は以下の通り。
タイプ：reCAPTCHAv3
label：reCAPTCHA
Badge：Bottom Right
それでは画面を確認してみましょう。
画面右下にreCAPTCHAが固定表示されました。
reCAPTCHAの場所は設定のBadgeを変更することで変えられます。
Bottom Roght：画面右下
Bottom Left：画面左下
インライン：ウェジェット内
以上です。
