Google Checkbox v2 reCAPTCHAのCaptchaテーマを変更する

reCAPTCHAをあなたのウェブサイトのダークテーマに合わせたいですか?GoogleのCheckbox v2 reCAPTCHAにはデフォルトでライトテーマが付属していますが、シンプルなJavaScriptスニペットで簡単にダークテーマに切り替えることができます。この機能拡張は、ダークなカラースキームのサイトや、より洗練された外観にしたい場合に最適です。

このガイドでは、reCAPTCHAのテーマをライトからダークに変更する方法を説明します。

reCAPTCHAテーマを理解する

デフォルトでは、reCAPTCHAは明るいテーマで表示されます。しかし、Googleは組み込みのダークテーマオプションを提供しており、簡単な属性変更で有効にすることができます。

このテーマ変更は以下の場合に適用される:

  • Google チェックボックス v2 reCAPTCHA
  • 見えないreCAPTCHA v2
  • hCAPTCHA

前提条件

テーマを変更する前に、以下を確認してください:

  1. WPFormsでフォームを作成しました。ヘルプが必要な場合は、フォームの作成方法に関するガイドをご覧ください。
  2. フォームにreCAPTCHAを設定します。設定方法についてはWPFormsのreCAPTCHA設定に関するドキュメントをご覧ください。
  3. Google Checkbox v2 reCAPTCHA をフォームの設定 "スパム対策とセキュリティタブで有効にします。
フォーム設定の [全般] タブで Google reCAPTCHA を有効にします。

テーマ変更コードの追加

ダークテーマに切り替えるには、このコードスニペットをサイトに追加してください。カスタムコードの追加にヘルプが必要な場合は、コードスニペットの追加に関するチュートリアルをご覧ください。

このコードは data-theme="dark" 属性を reCAPTCHA 要素に追加します。その他のカスタマイズオプションについては GoogleによるreCAPTCHA開発者ガイド.

コードがあなたのサイトに追加されると、あなたのキャプチャ・テーマはDarkに設定されます。

上記のコードで、キャプチャのテーマをダークに変更できます。

これで完了です!これでキャプチャのテーマをライトから ダークに変更できました。次に、フォームのテキストの外観をカスタマイズしたいですか?フォームフィールドのプレースホルダテキストをスタイリングするガイドをご覧ください。

参考アクション

wpforms_wp_footer_end