Use Google reCAPTCHA in an AEM Adaptive Form based on Core Components using-reCAPTCHA-in-adaptive-forms

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:

1. Open your AEM Forms as a Cloud Service instance.

2. Go to Tools > General > Configuration Browser. In the Configuration Browser, you can:

3. 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:

     1. In the Configuration Browser, click Create.
     2. In the Create Configuration dialog, specify name, title, and select the Cloud Configurations option.
     3. Click Create

   • To enable the Cloud Configurations option for an existing folder:

     1. In the Configuration Browser, select the folder and select Properties.
     2. In the Configuration Properties dialog, enable Cloud Configurations.
     3. Select Save & Close to save the configuration and exit the dialog.

Configure the Cloud Service:

1. On your AEM author instance, go to > Cloud Services and select reCAPTCHA.
2. Select a Configuration Container, created or updated in previous section. Select Create.
3. 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.

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.