Embed an Adaptive Form to an AEM sites page embed-an-adaptive-form-to-aem-sites-page
Overview 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? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-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 consideration
-
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-an-adaptive-form
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:
When the When form covers entire width of a page option is selected in the Form Containers configure dialog box and Adaptive Forms using Core Components are used, it is necessary to include the client libraries on your corresponding Site’s page.
Add the Customheaderlibs and Customfooterlibs client libraries to your AEM Sites page using the deployment pipeline. To add the client libraries:
-
Access and clone your AEM Cloud Service Git Repository.
-
Open the AEM Cloud Service Git Repository folder in a plan text editor. For example, Microsoft® Visual Code.
-
Open the
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.htmlfile and add the following code to the file:code language-none //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> -
Open the
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.htmlfile and add the following code to the file:code language-none //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> -
Open the
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.htmlfile and add the following code to the file:code language-none //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> -
Open the
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.htmlfile and add the following code to the file:code language-none //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> -
Run the deployment pipeline to deploy the client libraries to your AEM as a Cloud Service environment.
To enable Adaptive Forms – Embed(v2) component in template’s policy, perform the following steps:
- Open the AEM Sites page or Experience Fragment for editing. To open the page for editing, select the page, and click Edit.
- Open the template of your Sites or Experience Fragment page. To open the template, go to the Page Information
- In the Structure view, click the Policy
- Click Done.
Embed an Adaptive Form using the Adaptive Forms - Embed(v2) component embed-an-adaptive-form-in-sites-editor-or-experience-fragment
Use the Adaptive Forms - Embed(v2) component to create an Adaptive Form directly within the AEM Sites editor using the Form Creation wizard. The resulting form is saved as an external entity, allowing for its reuse in other Sites pages and standalone forms. You can embed a brand-new form from scratch, tailoring it specifically to your requirements and design preferences, directly in an AEM Sites page or in Experience Fragment. For single-use forms, direct authoring to an AEM Sites page is recommended, while Experience Fragments are ideal for forms that must be reused across multiple pages on your website.
You can easily embed a new form using Adaptive Forms - Embed(v2). For example, imagine incorporating a new contact us form into an AEM Sites page or AEM Experience Fragment. Any updates or modifications made to the contact form within the AEM Sites page or Experience Fragment automatically apply to all the pages where it is deployed. This simplifies the management of your website’s forms, ensuring a seamless user experience while streamlining the overall process.
Using Adaptive Forms - Embed(v2), you can:
- Embed new form using the Adaptive Forms Wizard in AEM Sites Page
- Embed new form using the Adaptive Forms Wizard in an Experience Fragment
- Embed an existing Adaptive Form in an AEM Sites page
- Embed an existing form in an Experience Fragment
- Convert an Adaptive Form in AEM Sites page to an Experience Fragment
Embed new form using the Adaptive Forms Wizard in AEM Sites Page embed-form-using-adaptive-form-wizzard-aem-sites
Steps to embed new form to an AEM Sites page are:
-
Open the AEM Sites page in edit mode.
-
From the Component browser panel, drag-drop the Adaptive Forms - Embed(v2) component on the page.
-
Click the Plus icon and you are redirected to the form creation wizard.
-
Create a new Adaptive Form from the Form Creation wizard.
The Asset Path already includes the path of a created Adaptive Form -
Save the settings. The Adaptive Form is now embedded in the page.
Next, you can set the Submit Action and advanced properties of an embedded Adaptive Form using the Form creation wizard.
Embed new form using the Adaptive Forms Wizard in an Experience Fragment embed-form-using-adaptive-form-wizzard-experience-fragment
Steps to embed new form to an Experience Fragment are:
-
Open the Experience Fragment in edit mode.
-
From the Component browser panel, drag-drop the Adaptive Forms - Embed(v2) component on the page.
-
Click the Plus icon and you are redirected to the form creation wizard.
-
Create a new Adaptive Form from the Form Creation wizard.
The Asset Path already includes the path of a created Adaptive Form -
Save the settings. The Adaptive Form is now embedded in the Experience Fragment.
Next, you can set the Submit Action and advanced properties of an embedded Adaptive Form using the Form creation wizard.
Embed an existing Adaptive form in an AEM Sites page embed-an-adaptive-form-in-sites-editor
With the Adaptive Forms - Embed(v2) component, you can effortlessly integrate a pre-existing Adaptive Form into a page within AEM Sites. This feature significantly enhances the adaptability and reusability of Adaptive Forms, offering customers a convenient way to reuse forms they have already created. For example, imagine incorporating a contact form to an AEM Sites page, eliminating the need to recreate the form multiple times.
To embed an existing Adaptive Form in a Sites page:
- Open the AEM Sites page in edit mode.
- Drag-and-drop the Adaptive Forms - Embed(v2) component from the Component Browser to the Sites page.
- Select the Adaptive Forms - Embed component in the Sites page and select
- Browse and select the Adaptive Form to embed in the Asset Path.
- Save the settings. The Adaptive Form is now embedded in the page.
Next, you can set the Submit Action and advanced properties of an embedded Adaptive Form using the Form creation wizard.
Embed an Existing Adaptive Form in an Experience Fragment embed-an-adaptive-form-in-experience-fragment
You can also extend the accessibility of your forms by embedding them to AEM Experience Fragment. To embed an Adaptive Form in an Experience Fragment:
- Open an Experience Fragment in edit mode.
- Drag-and-drop the Adaptive Forms - Embed(v2) component from the Component Browser to the Experience Fragment.
- Select the Adaptive Forms - Embed component in the Experience Fragment and select
- Browse and select the Adaptive Form to embed in the Asset Path.
- Save the settings. The Adaptive Form is now embedded to the Experience Fragment.
Next, you can set the Submit Action and advanced properties of an embedded Adaptive Form using the Form creation wizard.
Convert a form in AEM Sites page to an Experience Fragment convert-an-adaptive-form-in-sites-page-to-an-experience-fragment
You can convert an existing Adaptive Form in a Sites Page Editor to an Experience Fragment to reuse the form across multiple pages or sites.
To convert an Adaptive Form in AEM Sites page to an Experience Fragment:
-
Open the AEM Sites page containing the Adaptive Form (in Adaptive Forms Container component) in edit mode.
-
Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.
-
On the menu bar, select the
A dialog box to convert the Adaptive Form container to a new Experience Fragment or add to an existing Experience Fragment appears.
-
On the Convert to Experience Fragment variation dialog box, set values for the following options:
- Action: Select to create an Experience Fragment or Add to an existing Experience Fragment.
- Parent path: Specify path of the folder to host the Experience Fragment in. The option is available only for creating new Experience Fragment.
- Template: Specify path of the Experience Fragment template. If you do not have an Experience Fragment template, create it. The option is available only for adding Adaptive Form to an existing Experience Fragment.
- Fragment title: Specify title of the Experience Fragment. The title uniquely identifies an Experience Fragment.
- Fragment tags: Specify tag of the Experience Fragment. The tag uniquely identifies category of an Experience Fragment.
Configure Adaptive Form-Embed(v2) properties
You can customize the advanced settings of the Adaptive Form - Embed(v2) component. In the Edit Adaptive Forms - Embed dialog, you can specify the following:
-
Asset Path: Browse and select an Adaptive Form to embed. It is auto-populated if you dropped it from the Assets browser.
-
Post Submission : Select the action to trigger on form submission. You can choose to show a thank you message or a thank you page.
- Show 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.
- Show 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.
- Redirect to thank you page: Enable the option to replace the page containing the embedded Adaptive Form with thank you page. Otherwise, the thank you page replaces the Adaptive Form in the Adaptive Forms - Embed(v2) component, without refreshing underlying sites the page. This option is available only when you choose to show a thank you page.
- Thankyou Message: Brief confirmation or acknowledgment that is displayed on the screen after successfully submitting a form.
- Thankyou Page: Browse and select the page to display after successfully submitting a form.
-
Use Page Language: Use local of the AEM Sites page instead locale of Adaptive Form. This option is only applicable for Adaptive Form (Foundation).
-
Set Focus on Form: Select to set the focus on the first field of the Adaptive Form. This option is only applicable for Adaptive Form (Foundation).
-
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. This option is only applicable for Adaptive Form (Foundation).
note note NOTE You can use the Use Page Language, Set Focus on Form and Theme options only for Adaptive Form (Foundation). -
Form covers entire width of the frame:
An inline frame (iframe) is an HTML element that loads an Adaptive Form to an AEM Sites page.-
If the Form covers entire width of the frame checkbox is checked, an Adaptive Form occupies the full width of the container in which it is placed. In this case, an iframe is not used to render the form. The layout and design of an Adaptive Form adapt to span the entire width of the container, making it responsive and capable of adjusting to different screen sizes. This option lets you embed multiple Adaptive Forms within an AEM Sites page.
note note NOTE To embed multiple forms in an AEM Sites page, select Form covers entire width of the frame checkbox. -
If the Form covers entire width of the frame checkbox is not checked, an Adaptive Form does not cover the entire width of the container. Instead, an iframe is used to render the form, which cannot be extended beyond a specific width. This approach is useful when an Adaptive Form has definite boundaries and must coexist with other AEM components next to it within the container. If this option is not checked, it allows only one Adaptive Forms in AEM Sites page to embed without an iframe.
note note NOTE 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.
-
-
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.
Publish embedded Adaptive Form publishing-embedded-adaptive-form
Let’s consider the following scenarios for publishing an embedded Adaptive Form in AEM sites page:
- If you are publishing the AEM sites page for the first time and it includes an embedded Adaptive Form, publish the sites page and the embedded asset.
- If you modified only the embedded Adaptive Form in a published site page, publish the original asset and the changes reflect in the published site page. The published site page includes a reference to the asset and does not require republishing the page.
- If you modified the sites page and the embedded Adaptive Form , republish the sites page and the embedded asset.
Modify embedded Adaptive Form modifying-embedded-adaptive-form
To modify any configuration or property of the embedded Adaptive Form, do one of the following.
- Open the original form in an Adaptive Form in respective editor and modify them.
- Select the Adaptive Form from within the site page in edit mode and then select Edit in a new window. The original form opens in edit mode that you can modify.
Best practices best-practices
Do keep the following points in mind when embedding Adaptive Forms in AEM sites pages:
- Header and footer in the original form are 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.
- If you have Adobe Analytics configured for 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.