With Studio.Design, you can add Google reCAPTCHA v3 to protect forms on your published site from spam and abuse.
Studio.Design only supports Google reCAPTCHA v3. Google reCAPTCHA v2 is not supported.
Important:
reCAPTCHA is applied at the project level, so your settings will affect all forms within that project. You cannot configure reCAPTCHA on a per-form basis.
If incorrect values are entered, form submissions may fail. Be sure to carefully verify your keys, domain, and threshold settings, and test thoroughly before going live.
Google reCAPTCHA's availability and pricing are subject to change based on Google's policies. Before setting up or continuing to use reCAPTCHA, please review the latest information from Google's official documentation and terms of use:
How to Set Up Google reCAPTCHA v3
Note:
These steps include instructions for an external service. Our chat support may not be able to help with the specifications, behavior, or steps outside of what's covered in this article for external services.
The external service screenshots and specifications in this article are based on information as of January 2022. If anything looks different, please check the external service for the latest information.
Step 1: Get Your "Site Key" and "Secret Key" from Google reCAPTCHA v3
Sign in to the Google reCAPTCHA Admin Console with your Google account.
Click [Create] in the top-right corner or from the list screen.
* If you haven't registered any sites yet, the setup screen will appear automatically on your first visit.
Fill in each field:
Label: Any name you'd like to use to identify your site
reCAPTCHA type: Make sure to select "reCAPTCHA v3"
Domains: Add the domains used by your project
preview.studio.site(for testing form behavior in Live Preview)Your published site's domain (e.g.,
xxxx.studio.site,xxxx.com)
Terms of Service: Review the "reCAPTCHA Terms of Service" carefully and check the box if you agree.
Review your entries and click [Submit].
On the confirmation screen after registration, make a note of your "Site Key" and "Secret Key."
Step 2: Meet Google reCAPTCHA's Terms of Use
The Google reCAPTCHA Terms of Use require you to inform users about data sharing with Google and obtain their consent.
We recommend creating a Privacy Policy page (or similar) on your published site that includes information about Google reCAPTCHA v3, such as:
That your site uses Google reCAPTCHA v3
That information is sent to Google when forms are submitted
The purpose of the collected information (e.g., security, fraud prevention)
Your data handling policies
Step 3: Configure Google reCAPTCHA v3 in Studio.Design's Apps
Register the keys you obtained in Step 1 in Studio.Design.
Open the [Home] tab of the project dashboard for the site you want to configure.
Click [Apps] in the left-side menu.
Click [Google reCAPTCHA v3] from the list.
Enter your "Site Key," "Secret Key," and "Threshold."
Review your entries and save.
Here's what to enter for each field:
Site Key: The site key you obtained from the Admin Console
Secret Key: The secret key you obtained from the Admin Console
Threshold: A value between 0 and 1.0
For more information on how the threshold works, see the official documentation. A value around 0.5 is a good starting point.
Step 4: Test Your Setup
After configuring, verify that form submissions work correctly.
Open the page with your form in the editor and launch Live Preview.
Confirm that the reCAPTCHA logo appears in the bottom-right corner of the page where the form is located.
Fill in the required fields and confirm that the form submits successfully.
Repeat the same form submission test on your published site.
Once everything is working properly, you'll be able to see traffic data in the Google reCAPTCHA Admin Console.
Remove Google reCAPTCHA v3
To remove Google reCAPTCHA v3, clear the fields in the Apps settings.
From the [Home] tab of the project dashboard, open [Apps] and click [Google reCAPTCHA v3].
Clear all three fields: "Site Key," "Secret Key," and "Threshold."
Save your changes.
Test form submissions in both Live Preview and your published site.
Confirm that the reCAPTCHA logo no longer appears in the bottom-right corner and that forms submit successfully.
FAQ
Can I test what happens when a submission is flagged as a bot (submission failure)?
Can I test what happens when a submission is flagged as a bot (submission failure)?
Yes. By temporarily setting the reCAPTCHA threshold to a high value like "1.0," you can simulate bot detection behavior.
Set a high threshold temporarily and try submitting a form to see what happens when a submission is blocked.
After testing, make sure to change the threshold back to a value suitable for normal use.
What does the user see when a submission is flagged as a bot (submission failure)?
What does the user see when a submission is flagged as a bot (submission failure)?
When a form submission is blocked due to bot detection, the following error message is displayed to the user. The wording and design of this message cannot be customized.
フォーム送信失敗。ロボットによる操作ではないこと確認してください。 [閉じる]
リキャプチャ recaptcha recap recapt