こちらの記事は、
【formrunで作成したお問い合わせフォームをHTMLサイトに設置】
という工程で発生した事象について記載しています。
WordPressへの設置ではありません。
多くの場合、エラーメッセージでググれば解決策にたどりつけるのですが、このエラーの解決策が見つからず、自力で解決したので備忘録です。
この記事はこんな方にオススメ
- お問い合わせフォームを「formrun」で作成
※フォームは「コード型」で作成(フォームクリエイターではない) - 作成したお問い合わせフォームをHTMLサイトに設置
※WordPressへの設置ではない - お問い合わせフォームにreCAPTCHAを設置する際「サイト所有者のエラー」が出てつまづいている(←この記事で解決)
はじめに
まずは完成形から。
↑これが、formrunで作成したフォームの部分です。
赤枠の部分に「私はロボットではありません」というチェックボックスがあります。
次にエラー画面です。
↑赤枠の部分に「サイト所有者のエラー:サイトキーが無効です」と表示されています。
この記事では、エラーを解消し、前述の完成形に持っていった解決法を紹介します。
事前設定
formrunでreCAPTCHAを使うには、formrun、Google reCAPTCHAそれぞれで準備が必要です。
※reCAPTCHAはGoogleのサービスなので、Googleアカウントが必要です。
Google reCAPTCHA
Google reCAPTHAのサイトに行って、reCAPTHAを設置したいサイトを登録し、「サイトキー」「シークレットキー」を取得します。
↓画面右上の「Admin Console」をクリック。
↓画面右上の「+」をクリック。
↓必要項目を入力したら、利用条件に同意して「送信」をクリック。
- ラベル → 任意で入力
- reCAPTCHAタイプ → reCAPTCHA v2 を選択
- ドメイン → reCAPTCHAを設置するドメインを入力
↓下の画面まで来たらGoogle側の設定は完了ですが、サイトキーとシークレットキーは後ほど使うので画面は閉じないでください。
formrun
formrunのアカウント登録やコード型フォームの作り方 ・公開方法などは、公式に詳しく載っているのそちらを参照してください。
ここでは、公開済みのコード型フォームにreCAPTCHAを追加する…という前提で進めていきます。
↓「フォーム設定」画面を開く。
- 「Google Recaptchaを使用する」にチェック
- 先ほど取得した、Google reCAPTCHA の 「シークレットキー」を入力
- 「更新する」をクリック
これで事前設定が完了です。
サイトにreCAPTCHAを実装する
いよいよ、サイトにreCAPTCHAを実装していきます。
HTMLファイルに必要なコードを追加していきます。
- </head>タグの直前に下記コードを追加。
1<script src='https://www.google.com/recaptcha/api.js'></script> - <body>〜</body>内のreCAPTCHAを表示させたい位置に下記コードを追加。
1<div class="g-recaptcha" data-sitekey="your google recapcha site key"></div>
「your google recapcha site key」の部分は、先程取得したGoogle reCAPTCHA の 「サイトキー」に置き換えてください。(←これに気づくのにめっちゃ時間かかりました…。)
これで「サイト所有者のエラー:サイトキーが無効です」のエラーが解消されてreCAPTCHAが機能すると思います。
ぜひお試しください。
まとめ
formrun で Google reCAPTCHA を実装する際「サイト所有者のエラー:サイトキーが無効です」のエラーが出た時の確認手順。
- HTMLタグに自分のサイトキーを埋め込んでいるか
1<div class="g-recaptcha" data-sitekey="your google recapcha site key"></div>
*「your google recapcha site key」を、自分のreCAPTCHAのサイトキーに置き換えているか
- Google reCAPTCHAの設定画面で、ドメイン欄に登録されているのは「ドメインのみ」か
*「https://」などが入力されていないか
- Google reCAPTCHAの設定画面で、reCAPTCHAタイプが 「reCAPTCHA v2」になっているか
*formrunではv2のみ提供