reCAPTCHAv3logo

elementorのFormウィジェットにreCAPTCHAv3を設置する方法

elementorのFormウィジェット(Pro版)は簡単に問い合わせフォームや調査フォーム、イベント登録フォームなど作れる優れものです。今回はお問い合わせフォームのスパムメール対策としてreCAPTCHAv3の設定をしたいと思います。

目次
    Add a header to begin generating the table of contents

    reCAPTCHAとは

    グーグルが提供するbot対策ツールで、お問い合わせやコメント投稿などでスパムメールを防ぐためのセキュリティツールです。バージョン2以前は「私はロボットではありません」にチェックするものや、指定の画像を選択するものでしたが、いずれもセキュリティ面で劣るため現在はバージョン3に移行しつつあります。reCAPTCHAv3はユーザーは何かをチェックするような行為はしないのでユーザビリティが向上し離脱率の改善につながります。

    前提条件

    • ページビルダーはelementorのPro版であること
    • Formウェジェットを使って「お問い合わせ」フォームが作成済みであること
    • googleのアカウント登録が済んでいるいること

    完成イメージ

    reCAPTCHA v3の導入方法

    自身のGoogleアカウントでGoogle reCAPTCHAのサイトを開き、画面上部にあるv3 Admin Consoleをクリックします。

    1. ラベル:分かりやすい名前をつけましょう
    2. reCAPTCHAタイプ:reCAPTCHA v3を選択
    3. ドメイン:自分のサイトのドメイン
    4. オーナー:googleアカウント名
    5. reCAPTCHA利用条件に同意する:チェックする
    6. アラートをオーナーに送信する:チェックする

    7.設定内容に問題なければ「送信」をクリックします。

    すると「登録されました」と共にサイトキーとシークレットキーが発行されます。

    この後、Wordpress側にキーを入力するので画面はそのままにしておきましょう。

    WordPressに登録

    WordPressのダッシュボードからelementor>設定を開き、「連携」タブを選択します。reCAPTCHA V3の項目にサイトキーとシークレットキーを入力する欄がありますので、そこにそれぞれのキーを入力します。間違え防止のため、コピペして下さい。
    完了したら、「変更を保存」ボタンを押してください。

    Formウィジェットへの配置

    お問い合わせフォームを作成します。今回はelementorのFormウェジェットを使用します。

    フォームを編集からコンテンツを開きます。項目を追加ボタンで追加します。各項目は以下の通り。

    タイプ:reCAPTCHAv3

    label:reCAPTCHA

    Badge:Bottom Right

    それでは画面を確認してみましょう。

    画面右下にreCAPTCHAが固定表示されました。

    reCAPTCHAの場所は設定のBadgeを変更することで変えられます。

    Bottom Roght:画面右下

    Bottom Left:画面左下

    インライン:ウェジェット内

    以上です。

    Facebook
    Twitter

    関連する記事

    上部へスクロール