Embedded adaptive form is no longer responsive

[AbidaMe]

Hello,

If we open the publish url for an adaptive form on our desktops, phones and tablets, the form is responsive.

If we embed the adaptive form into a content page in sites, publish the page, and then open the published page, the form is no longer responsive. If we switch between screen sizes in the Edit and Preview mode for the page, the responsiveness appears to work fine. However, when we open the published page on our phones and tablets, the form is only rendering as the desktop screen.

We do not have "Desktop site" or similar options selected on our phones. 

Has anyone else run into this issue?

Can you provide insight on what may be causing this and how we can fix the issue?

Note we are working on AEM as a Cloud Service, not 6.5.

Thank you!

[Karishma_begumSh · Accepted solution]

Hi @AbidaMe 

Ensure viewport meta tag is included in your Sites page HTML

Make sure your head.html or template used for Sites pages includes:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Use the recommended Adaptive Forms embedding method

When embedding Adaptive Forms into AEM Sites pages, Adobe recommends using the Embed component with a proper iFrame OR the AEM Forms Core Component for Adaptive Forms.

<div data-af-url="/content/forms/af/your-form-path"></div>

Load the Forms ClientLibs in your page

Your page must include these client libraries:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories='fd.af.runtime'}"/>

Check for CSS overrides

Inspect the published page in browser dev tools:

• Look for any global styles (e.g., .input, .row, form, etc.) from the Sites page that may override Adaptive Form CSS.
• Especially check for fixed widths or breakpoints being ignored.

Hope this helpful.:)

Regards,

Karishma.

[VishalKa5]

Hi @AbidaMe ,

Yes, this can happen. When you open the form directly on your phone, it looks good and adjusts to the screen. But when you embed the same form inside a content page and publish it, it doesn’t adjust on phones and looks like a desktop version.

This usually happens because the content page is missing a small line of code that tells it how to behave on mobile screens. It's called a viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this, the page (and the form inside it) doesn’t know it’s being viewed on a phone, so it shows the desktop version.

Another reason might be how the form is added to the page. If it’s added using an iframe, it won’t resize properly unless extra settings are used. The best way is to use the AEM Forms component made for adding forms to pages — it handles responsiveness automatically.

Also, check if your site’s styles (CSS) are forcing desktop layout and stopping the form from resizing.

Thanks & regards,

Vishal

[kautuk_sahni]

@AbidaMe Just checking in — were you able to resolve your issue? We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!