Use Google reCAPTCHA in an AEM Adaptive Form based on Core Components using-reCAPTCHA-in-adaptive-forms
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:
Connect your AEM Forms environment with reCAPTCHA service by Google connect-your-forms-environment-with-recaptcha-service-by-google
Form authors can use the reCAPTCHA service by Google to implement reCAPTCHA in Adaptive Forms. It offers advance CAPTCHA capabilities to protect your site. For more information on how reCAPTCHA works, see Google reCAPTCHA. AEM Forms as a Cloud Service supports Google reCAPTCHA v2 in Adaptive Forms. You can use it to present a CAPTCHA challenge on form submission. To connect your AEM Forms environment with reCAPTCHA service by Google
-
Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.
-
Create 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 reCAPTCHA service by Google:
-
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 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 reCAPTCHA.
- Select a Configuration Container, created or updated in previous section. Select Create.
- Specify Title, Name, Site Key, and Secret Key for reCAPTCHA service (Obtained in Step 1). Select Create.
Once the reCAPTCHA service is configured, it is available for use in an Adaptive Form. For more information, see using Google reCAPTCHA in an Adaptive Form.
Use Google reCAPTCHA in an Adaptive Form using-reCAPTCHA
To use reCAPTCHA in Adaptive Forms:
-
Open your AEM Forms as a Cloud Service instance.
-
Go to Forms > Forms and Documents.
-
Select an Adaptive Forms and select Properties. For the Configuration Container option, select the Configuration Container that contains the Cloud Configuration that connects AEM Forms with reCAPTCHA service by Google and select Save & Close.
If you do not have such a Configuration Container, see section Connect your AEM Forms environment with reCAPTCHA service by Google to learn how to create such a Configuration Container.
-
Select an Adaptive Forms and select Edit. The Adaptive Form opens in Adaptive Forms Editor.
-
From the component browser, drag-drop the Adaptive Form reCAPTCHA component onto the Adaptive Form.
Google reCAPTCHA validation is time-sensitive and expires in about a couple of minutes. Therefore, Adobe recommends placing the Adaptive Form reCAPTCHA component just before the Submit button.
-
Select the Adaptive Form reCAPTCHA component and select the properties icon. It opens the properties dialog. Specify the following mandatory properties:
- Name: You can identify a form component easily with its unique name both in the form and in the rule editor, but the name must not contain spaces or special characters.
- CAPTCHA Configuration: Select a Cloud Configuration configured to present the Google reCAPTCHA dialog for the form. You can have multiple Cloud Configurations in your environment for similar purpose. So, choose the service carefully. If no service is listed, see Connect your AEM Forms environment with reCAPTCHA service by Google to learn how to create a Cloud Service that connects your AEM Forms environment with reCAPTCHA service by Google.
- Captcha Size: You can select the display size of Google reCAPTCHA challenge dialog. Use the Compact option to display a small sized and the Normal option to display a relatively large-size Google reCAPTCHA challenge dialog.
-
Select Done.
Now, the protected by reCAPTCHA is displayed on your Adaptive Form. It is displayed on all the Adaptive Forms which are configured to use the Google reCAPTCHA service.
Now, only legitimate forms, in which the form filler successfully clears the challenge posed by the Google reCAPTCHA service, are allowed for 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 Captcha component in a fragment or a panel marked for lazy loading.
See Also 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