Use Google reCAPTCHA in an AEM Adaptive Form based on Core Components

Last update: 2023-10-16
Applies to Article link
Adaptive Form based on Core Components This article
Adaptive Form based on Foundation Components Click here

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 Google reCAPTCHA v2 in Adaptive Forms. You can use it to present a CAPTCHA challenge on form submission. To use the reCAPTCHA in an Adaptive Form:

  1. Connect your AEM Forms environment with reCAPTCHA service by Google
  2. Configure your Adaptive Form to display the CAPTCHA challenge on form submission

Connect your AEM Forms environment with reCAPTCHA service by Google

To connect your AEM Forms environment with reCAPTCHA service by Google

  1. Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.

    Create Google reCAPTCHA configuration of Google's website to obtain reCAPTCHA Keys

  2. 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 tap Properties.
        2. In the Configuration Properties dialog, enable Cloud Configurations.
        3. Tap Save & Close to save the configuration and exit the dialog.

  3. Configure the Cloud Service:

    1. On your AEM author instance, go to tools-1 > Cloud Services and tap reCAPTCHA.
    2. Select a Configuration Container, created or updated in previous section. Tap Create.
    3. Specify Title, Name, Site Key, and Secret Key for reCAPTCHA service (Obtained in Step 1). Tap Create.

    Configure the Cloud Service to connect your AEM Forms environment with reCAPTCHA service by Google

    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

To use reCAPTCHA in Adaptive Forms:

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

  2. Go to Forms > Forms and Documents.

  3. Select an Adaptive Forms and tap 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 tap 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 Configuration Container

  4. Select an Adaptive Forms and tap Edit. The Adaptive Form opens in Adaptive Forms Editor.

  5. 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.

  6. Select the Adaptive Form reCAPTCHA component and tap the properties Properties icon 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.

  7. Tap 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.
    Google protected by reCAPTCHA badge

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

Previous page
Next page

On this page