AEM Forms as a Cloud Service - Rules are not working on Page

Hi ​@GunasekharM,

Based on your description, this behavior is expected when Adaptive Forms are embedded into an AEM Sites page without including the required Forms runtime client libraries and theme styling. Standalone Adaptive Forms pages automatically load these dependencies, but Sites pages require explicit configuration.

Below is a summary of the root cause and recommended fixes:

Root Cause

When an Adaptive Form is embedded into a Sites page:

• The Forms runtime client libraries (which power rules, validations, and dynamic behavior) are not loaded by default.
• The Adaptive Forms theme CSS is also not applied unless explicitly included.

This results in:

• Rules, validations, and calculations not executing
• Missing or broken styling (default/plain rendering)

Recommended Fixes

1. Include Forms Runtime Client Libraries

Please update your Sites page component to include the required client libraries:

customheaderlibs.html

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
</sly>

customfooterlibs.html

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}"
         data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
</sly>

After adding these, please deploy the changes via your Cloud Manager pipeline.

2. Verify Embedding Approach

Ensure you are using a supported component:

• Adaptive Forms – Embed (v2) → for embedding an existing form
• Adaptive Form Container → for building forms directly on the Sites page

If using Embed (v2) in non-iframe (div) mode, loading the runtime clientlibs is mandatory for rules and submission to work.

3. Apply the Adaptive Forms Theme

To ensure proper styling, you can choose one of the following:

Option A (Recommended): Integrate Forms Theme into Sites Theme

• Merge your Adaptive Forms theme into your Sites theme
• Deploy via Front-End Pipeline
• This ensures consistent styling across all embedded forms

Option B: Add Theme Client Library to Page

• Identify your theme clientlib category (e.g., adaptiveform.theme.canvas3 or custom)
• Include it in your header libs:

<sly data-sly-call="${clientlib.css @ categories='your-forms-theme-category'}"/>

4. Verification Steps

After implementation, please validate:

• In DevTools → Network:
  • Confirm core.forms.components.runtime.* JS/CSS files are loading
  • Confirm your theme CSS is loading
• Test a rule (e.g., show/hide field):
  • Ensure no console errors appear
  • Confirm expected behavior executes

If the issue persists, it would help if you could share:

• Whether you're using Embed (v2) or Form Container
• Confirmation that the clientlibs were added and deployed
• Your theme clientlib category name

Thanks
Pranay