reCAPTCHAフィールドを挿入する

reCAPTCHA は Google が提供するサービスで、フォームの送信をスパムや不正使用から保護するのに役立ちます。このサービスは、正当なユーザーだけがサイトでフォームを送信できるように設計されています。フォームでの reCAPTCHA の利用について詳しくご覧ください。

この指導セッションでは、以下のことを理解します。

1. フォームに reCAPTCHA を組み込む方法
2. サイトで reCAPTCHA 認証を有効にする方法
3. reCAPTCHAをカスタマイズするテクニック

重要な： フォーム送信をコンパイルするためにカスタム フォーム アクションを指定した場合、reCAPTCHA は動作しません。

重要な： Webflow reCAPTCHAを使用するフォームはエクスポートされたサイトでは機能しません。サイトをエクスポートする予定がある場合は、フォームにreCAPTCHAを接続する必要があります。 Google の reCAPTCHA ガイドさらに、エクスポートされたサイトでフォーム送信を収集する方法についても説明します。

フォームに reCAPTCHA を組み込む方法

フォームにreCAPTCHAを貼り付けるには、 パネルを追加 > 要素 セクション > フォーム 領域。reCAPTCHA 要素をフォームに挿入する必要があります。

重要な： reCAPTCHAは、サイト設定 > フォームセクションで検証を有効にするまで、ライブサイトに表示されません。これにより、reCAPTCHA検証がサイト全体で有効になることに注意してください。 全て サイト上のすべてのフォームに reCAPTCHA 要素を含めるようにしてください。

役立つヒント: reCAPTCHA はサイト訪問者の言語を自動的に検出し、その言語でウィジェットを表示します。

サイトで reCAPTCHA 認証を有効にする方法

次の手順に従って、サイトに reCAPTCHA を設定できます。

1. サイトを登録してAPIキーを生成する
2. reCAPTCHA認証をオンにする

サイトを登録してAPIキーを生成する

1. に行く Google の reCAPTCHA ページ
2. を選択 reCAPTCHAタイプ: reCAPTCHA v2
3. 選ぶ 「私はロボットではありません」Checkbox

その後、サイトにリンクされているすべてのドメインを登録します。 ドメイン登録すると、reCAPTCHA 設定に 2 つの API キー (サイト キーとシークレット キー) が提供されます。これらのキーは、次の手順で reCAPTCHA 検証を有効にするときに使用されます。

注記： 使用しているカスタム ドメイン (例: 「example.com」) を必ず追加してください。サブドメインを公開、ステージング、またはテストに使用している場合は、「example.webflow.io」(「example」をサブドメインに置き換えます) を組み込むこともできます。カスタム ドメインのサブドメインは自動的に登録されます。つまり、「example.com」を登録すると、「subdomain.example.com」も登録されます。 Google reCAPTCHAのドメイン名認証について詳しく読む.

重要な： ドメインの登録が有効になるまでに最大 30 分かかる場合があります。

reCAPTCHA認証をオンにする

重要な：サイトでreCAPTCHAを有効にする前に、 reCAPTCHAを有効にすると、 全て サイトにフォームを設置します。reCAPTCHA要素のないフォームは 提出に失敗するこの調整は 即座に サイトを再公開するかどうかに関係なく、[保存] をクリックした後 (以下の手順 4)、reCAPTCHA を有効にする前に、各フォームに reCAPTCHA 要素を追加してください。

サイトで reCAPTCHA 検証を有効にするには:

1. 案内する サイト設定 > フォーム セクション > reCAPTCHA検証
2. Google（ reCAPTCHA v2サイトキー そしてその reCAPTCHA v2 秘密キー）を関連分野に入力する
3. reCAPTCHA認証を有効にする
4. 保存 あなたの調整
5. 公開 あなたのサイト

重要な： 保護と適切な機能のために、 秘密鍵 の中に サイトキー 分野。

注記： デザインを続行する場合、またはライブ サイト上のすべてのフォームで reCAPTCHA を有効にする準備ができていない場合、サイト設定に戻って後で有効にすることができます。

reCAPTCHA フィールドを追加した後、公開したサイトでフォームが正しく動作することを確認することをお勧めします。

よくある質問と解決策

reCAPTCHA で問題が発生した場合に備えて、潜在的な問題、警告、エラー メッセージ、およびそれらのトラブルシューティング方法を説明します。

公開したサイトで reCAPTCHA 要素を確認できません

reCAPTCHA 検証を有効にし、フォームに reCAPTCHA 要素を含め、サイトを再公開したことを確認します。

あなたのウェブページ

役立つヒント: キャッシュをクリアしても問題が解決しない場合は、シークレットウィンドウでテストしてみてください。reCAPTCHAがエラーなしで正しく表示されたら、この操作でreCAPTCHA設定のキャッシュが更新されます。これで、reCAPTCHAはすべてのブラウジングセッションで期待どおりに動作するはずです。問題が解決しない場合は、APIキー（ reCAPTCHA v2 サイトキー そしてその reCAPTCHA v2 秘密キー）して新しいキーを生成します。その後、 サイト設定サイト キーとシークレット キーでは大文字と小文字が区別されることに注意してください。

reCAPTCHAをパーソナライズする方法

reCAPTCHA ではカスタマイズ オプションが限られていますが、カスタム属性を使用してパーソナライズできます。カスタム属性で適用されたスタイルは、ライブ サイトにのみ反映されることに注意してください。

reCAPTCHA のカラースキームを変更する

デフォルトでは、reCAPTCHA コンポーネントは灰色の背景に黒のテキストのライト テーマで提供されます。黒の背景に白のテキストのダーク テーマに切り替えることもできます。ダーク テーマを有効にするには、次の手順を実行します。

1. 選択してください 再キャプチャ キャンバス上のコンポーネント
2. 案内する 要素設定 > カスタム属性
3. クリックしてください "プラス” アイコン
4. 「data-theme」と入力して 名前 分野
5. 「暗い」と入力 価値 分野

reCAPTCHAのサイズを変更する

reCAPTCHA 要素には定義済みのサイズが付属しています。カスタム属性を追加することで、さらに圧縮することができます。

reCAPTCHA コンポーネントのサイズを縮小するには:

1. を選択 再キャプチャ キャンバス上の要素
2. アクセス 要素設定 > カスタム属性
3. 「プラス” アイコン
4. 「データサイズ」を 名前 分野
5. 「コンパクト」と入力して 価値 分野