Integrate Turnstile CAPTCHA with Adaptive Forms
This feature is under Early Adopter Program. You can write to aem-forms-ea@adobe.com from your official email id to join the early adopter program and request access to the capability.
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a program commonly used in online transactions to distinguish between humans and automated programs or bots. It poses a challenge and evaluates user response to determine if it’s a human or a bot interacting with the site. It prevents the user to proceed if the test fails and helps make online transactions secure by keeping bots from posting spam or malicious purposes.
AEM Forms as a Cloud Service supports the following CAPTCHA solutions:
Integrate AEM Forms environment with Turnstile Captcha
Cloudflare’s Turnstile Captcha is a security measure that aims to protect forms and sites from automated bots, malicious attacks, spams and unwanted automated traffic. It presents a checkbox on form submission to verify that they are human, before allowing them to submit the form. AEM Forms as a Cloud Service supports Turnstile Captcha in Adaptive Forms Core Components.
Prerequisites to integrate AEM Forms environment with Turnstile Captcha :headding-anchor:prerequisite
To configure Turnstile for AEM Forms Core Components, you need to obtain the Turnstile sitekey and secret key from the Turnstile website.
Steps to configure Turnstile for AEM Forms :headding-anchor:steps-to-configure-turnstile
-
Create a Configuration Container on your AEM Forms as a Cloud Service environment. A Configuration Container holds Cloud Configurations used to connect AEM to external services. To create and configure a Configuration Container to connect your AEM Forms environment with Turnstile:
-
Open your AEM Forms as a Cloud Service instance.
-
Go to Tools > General > Configuration Browser.
-
In the Configuration Browser, you can select an existing folder or create a folder. You can create a folder and enable the Cloud Configurations option for it or enable the Cloud Configurations option for an existing folder:
-
To create a folder and enable the Cloud Configurations option for it:
- In the Configuration Browser, click Create.
- In the Create Configuration dialog, specify a name, title, and select the Cloud Configurations option.
- Click Create.
-
To enable the Cloud Configurations option for an existing folder:
- In the Configuration Browser, select the folder and select Properties.
- In the Configuration Properties dialog, enable Cloud Configurations.
- Select Save & Close to save the configuration and exit the dialog.
-
-
-
Configure the Cloud Service:
-
On your AEM author instance, go to > Cloud Services and select Turnstile.
-
Select a Configuration Container, created or updated, as described in the previous section. Select Create.
-
Specify Widget Type as managed, widget type can change which depends on the key obtained in the prerequisite, Title, Name, Site Key, and Secret Key for Turnstile service obtained in prerequisite. Select Create.
-
Once the Turnstile Captcha service is configured, it is available for use in an Adaptive Form.
Use Turnstile in an Adaptive Form :headding-anchor:using-turnstile-foundation-components
-
Open your AEM Forms as a Cloud Service instance.
-
Go to Forms > Forms and Documents.
-
Select an Adaptive Form and select Properties. For the Configuration Container option, select the Configuration Container that contains the Cloud Configuration that connects AEM Forms with Turnstile, and select Save & Close.
If you do not have such a Configuration Container, see section Connect your AEM Forms environment with Turnstile to learn how to create a Configuration Container.
-
Select an Adaptive Form and select Edit. The Adaptive Form opens in Adaptive Forms Editor.
-
From the component browser, drag-drop the Captcha component onto the Adaptive Form.
-
Select the Captcha component and click on properties icon. It opens the properties dialog.
Specify the following properties:
-
Title: Specify the title for your Captcha component, you can identify a form component easily with its unique name both in the form and in the rule editor.
-
Validation Message: Provide a validation message for validating Captcha on form submission.
-
Validate Captcha: You can select one of the options, to validate Captcha:
- At form Submission
- On a user action.
-
Captcha Service: Select your Captcha service, here you select Cloudfare Turnstile Captcha service.
-
Captcha Configuration: Select a Cloud Configuration configured for Turnstile. for example, here you select the managed key.
note note NOTE You can have multiple Cloud Configurations in your environment for a similar purpose. So, choose the service carefully. If no service is listed, see Connect your AEM Forms environment with Turnstile to learn how to create a Cloud Service that connects your AEM Forms environment with Turnstile service. -
Error Message: Provide the error message to display to the user when the Captcha submission fails.
-
Captcha Size: You select the display size of the Turnstile challenge dialog. Use the Compact option to display a small sized and the Normal option to display a relatively large-size Turnstile challenge dialog.
note note NOTE This is applicable for widget type Managed and Non-interactive. If the widget type is invisible, the size property is not required and it is disabled.
-
-
Select Done.
Now, only legitimate forms, in which the form filler successfully clears the challenge posed by the Turnstile service are allowed for the form submission.
Frequently Asked Questions
- Q: Can I use more than one Captcha component in an Adaptive Form?
- Ans: Using more than one Captcha component in an Adaptive Form is not supported. Also, it is not recommended to use a Captcha component in a fragment or a panel marked for lazy loading.
See Also :headding-anchor:see-also
- Create an AEM Adaptive Form
- Add an AEM Adaptive Form to the AEM Sites page
- Apply themes to an AEM Adaptive Form
- Add components to an AEM Adaptive Form
- Use CAPTCHA in an AEM Adaptive Form
- Generate a PDF version (DoR) of an AEM Adaptive Form
- Translate an AEM Adaptive Form
- Enable Adobe Analytics for an Adaptive Form to track form usage
- Connect Adaptive Form to Microsoft SharePoint
- Connect Adaptive Form to Microsoft Power Automate
- Connect Adaptive Form to Microsoft OneDrive
- Connect Adaptive Form to Microsoft Azure Blob Storage
- Connect Adaptive Form to Salesforce
- Use Adobe Sign in an AEM Adaptive Form
- Add a new locale for an Adaptive Form
- Send Adaptive Form data to a database
- Send Adaptive Form data to a REST endpoint
- Send Adaptive Form data to AEM Workflow
- Use Forms Portal to list AEM Adaptive Forms on an AEM website
- Add versionings, comments, and annotations to an Adaptive Form
- Compare Adaptive Forms