Embed an Adaptive Form to an AEM sites page
| Version | Article link |
|---|---|
| AEM 6.5 | Click here |
| AEM as a Cloud Service | This article |
Overview
AEM Forms allow 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. This allows your users to conveniently fill and submit forms without ever leaving the page they are on. This integration provides a convenient way to reuse Adaptive Forms they have already created.
You can use AEM Page Editor to quickly embed multiple forms to your AEM Sites pages. Using AEM Page Editor allows content authors to create seamless data capture experiences within a Sites page using the power of Adaptive Forms components including dynamic behavior, validations, data integration, generate document of record and business process automation. It also lets you use various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.
AEM Forms provide Adaptive Form Container and Adaptive Forms – Embed(v2) components. You can use Adaptive Forms – Embed(v2) component to add an existing Adaptive Form or create a form using Adaptive Forms Editor , while Adaptive Form Container to create new form within an Experience Fragment or AEM Sites page.
How to create or embed an Adaptive Form in AEM Sites page or in AEM Experience Fragment?
You can take full advantage of this feature by using the following options:
-
Create an Adaptive Form using approved templates and embed it to an AEM Sites page: You can use pre-approved templates to quickly create and embed Adaptive Forms that align with your organization’s branding guidelines and design standards.
-
Embed existing forms to an AEM Sites page: You can easily integrate forms that you have already created into your websites, enabling visitors to interact with them directly.
-
Convert an embedded Adaptive Form to Experience Fragment: Convert an embedded Adaptive Form added to an AEM Sites page to an Experience Fragment for reusing the form across multiple AEM Sites pages.
-
Create and add a custom Adaptive Form to an AEM Sites page: You can use the Adaptive Form Container component to build a brand-new form from scratch, tailoring it specifically to your requirements and design preferences.
-
Create and add a custom Adaptive Form to an Experience Fragments: You can extend the reach of your forms by adding them to AEM Experience Fragments, allowing for seamless reuse across multiple pages or sites.
-
Add multiple forms to an AEM Sites page or Experience Fragment: You can create or add multiple Adaptive Forms to an AEM Sites page to provide multiple choices to users based on their preferences and requirements. You can use AEM Page Editor to quickly embed multiple forms to your AEM Sites pages. You can use the Adaptive Form Container component multiple times to add Adaptive Forms in an AEM Sites page. You can use the Adaptive Forms - Embed component multiple times in an AEM Sites page, only if Form covers entire width of the frame option is selected. In case the Form covers entire width of the frame option is not checked, AEM Sites page supports only one Adaptive Form to exist without an iframe. To add more Adaptive Forms using the Adaptive Forms - Embed component, select Form covers entire width of the frame option.
Considerations to embed an Adaptive Form in AEM Sites page or AEM Experience Fragment
-
When you create or add a form using the Adaptive Forms – Embed(v2) component, the forms undergo translation and localization using the AEM Forms translation flow. In this case, a single form is maintained and referenced in all the language copies of the Sites pages. Adaptive Forms – Embed(v2) component does not provide access to various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.
-
When you use the Adaptive Form Container to create a form, the forms undergo translation and localization through the AEM Sites translation flow. For each language, a separate copy (language copy) of the sites page and corresponding forms is generated and when a content author modifies a rule in a form on the parent page, the same changes must be made in all language copies of the form. Adaptive Form Container also lets you use various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.
Requirements to embed an Adaptive Form in AEM Sites page or AEM Experience Fragment
Before you start embedding a new Adaptive Form or a pre-existing Adaptive Form using Adaptive Forms – Embed(v2), enable Adaptive Forms Core Components and add Adaptive Forms Client Libraries to your AEM Sites page:
