Adaptive documents are supported for production use under a "gated" program. If you intend to use Adaptive Documents in a production environment, contact AEM Forms team at DLfirstname.lastname@example.org.
AEM Forms allows form developers to seamlessly embed adaptive forms in an AEM Sites page or a web page hosted outside AEM. The embedded adaptive form is fully functional and users can fill and submit the form without leaving the page. It helps user remain in context of other elements on the web page and simultaneously interact with the form.
For information about embedding an adaptive form in an external web page, see Embed adaptive form in external web page.
In AEM Sites page, you can add an adaptive form or document using:
- AEM Forms Container component
AEM Forms provides a component that you can add to your site pages. The AEM Forms Container component lets you embed an adaptive form or document.
- Asset browser
All the forms and documents you create are available under Assets. You can drag-drop the form or document as an asset on your page.
To embed an adaptive form or document in an AEM sites page that uses an editable template, ensure that the AEM Form component is configured as an allowed component in the associated template. For more information, see Policy & Properties (Layout Container) section in Creating Page Templates.
In case of a Sites page using a static template, you need to configure it in the paragraph system of the site page. See Configuring Components in Design Mode for more information.
From the Component browser panel, drag-drop the AEM Forms Container component on the page.
Alternatively, you can search for an adaptive form or document in the Assets browser and drag-drop it onto the Sites page. It embeds the form or document in an AEM Forms Container.
Multiple AEM Forms Container components on a page are not supported.
- Asset Path: Browse and select the adaptive form to embed. It is auto-populated if you dropped it from the Assets browser.
- (Adaptive form only) Post Submission: Select the action to trigger on form submission. You can choose to show a thank you message or a thank you page.
- Thank You Message: Write a message using the rich text editor to show on form submission. This option is available only when you choose to show a thank you message.
- Thank You Page: Browse and select the page to display on form submission. This option is available only when you choose to show a thank you page.
- Refresh Page on Submission: Enable to refresh the page containing the embedded adaptive form to show the thank you page. Otherwise, the thank you page replaces the adaptive form in the AEM Forms container, without refreshing the page. This option is available only when you choose to show a thank you page.
- Theme: Select a theme that defines styling for components of your adaptive form. Styling includes appearance properties such as font style, background color, dimensions, and alignment.
- Height: Specify the height of the container. Leave it blank to automatically resize the container.
- CSS Client library: Specify path to a CSS client library.
Let's consider the following scenarios for publishing an embedded form in AEM sites page:
- If you are publishing the AEM sites page for the first time and it includes an embedded form, publish the sites page and the embedded form or document.
- If you modified only the embedded form in a published site page, publish the original form and the changes reflect in the published site page. The published site page includes a reference to the form and does not require republishing the page.
- If you modified the sites page and the embedded form or document, republish the sites page and the form.
AEM sites page maintains reference to the adaptive form in the AEM Forms Container. Therefore, all configurations and properties, such as the theme, styles, and submit action, configured in the original form are retained in the embedded form.
To modify any configuration or property of the embedded form, do one of the following.
- Open the original form in Forms Manager user interface and modify it.
- Tap the adaptive form from within the site page in edit mode and then tap Edit Form. The original form opens in edit mode that you can modify.
The changes made in the original form automatically reflect in the embedded form. However, republish the form or the site page to reflect the changes in the published page.
Do keep the following points in mind when embedding adaptive forms in AEM sites pages:
- Header and footer in the original form is not included in the embedded form.
- User drafts and submissions of embedded forms are supported and visible in Drafts and Submitted Forms tabs on the forms portal.
- The submit action configured on the original form is retained in the embedded form.
- Experience targeting and A/B tests configured on the original form do not work in the embedded form. However, you can use experience targeting on the sites page to present different forms based on user profiles.
- If you have Adobe Analytics configured on the original form, the analytics data of the embedded form is captured in Adobe Analytics. However, it is not available in the forms analytics report.
Publishing, modifying, and best practices for an embedded adaptive form are applicable for an adaptive document as well.