This tutorial is a step in the Create Your First Adaptive Form series. It is recommended to follow the series in chronological sequence to understand, perform, and demonstrate the complete tutorial use case.
After the adaptive form is ready, you can publish the form to make it available for end users. The end users can open the published form on any device and internet browser. When an adaptive form is published, the form and related content are copied from an AEM author instance to an AEM publish instance. The form is made available to the end user through the publish instance.
You have the following methods to publish an adaptive form:
When the adaptive form is published as an AEM Page, then the entire web page contains only published form. You can use the URL of the adaptive form to link it from another web page. To publish the shipping-address-add-update-form adaptive form as an AEM Page:
https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
https://localhost:4503/content/forms/af/shipping-address-add-update-form.html
AEM Forms allows form developers to seamlessly embed adaptive forms in an AEM Sites page. The embedded adaptive form is fully functional and users can fill and submit the form without leaving the page. It helps user remain in the context of other elements on the web page and simultaneously interact with the form.
AEM Forms provide a component, AEM Forms Container, to embed an adaptive form to an AEM Sites page. By default, the component is not visible in AEM Sites container. Perform the following steps to enable the AEM Forms Container component and to embed the adaptive form in an AEM Sites Page:
Create and open a page in the We.Retail site for editing. For example, https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. The adaptive form is embedded to the Sites page.
You can also embed the adaptive form in an existing We.Retail Site’s page. For example, the ABOUT US page https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. It saves you the time to create a page. The steps below use the newly created page.
The We.Retail site is shipped with AEM. If you do not have the We.Retail site installed, see to We.Retail Reference Implementation install the site.
Tap page information and select the Edit Template option in the newly created We.Retail site page. The template of the page opens in a new tab of the browser.
Tap inside the layout container box and tap . In the Allowed Components tab, expand the General accordion, select the AEM Form option, and tap
. The AEM Forms Container component is enabled for the page.
Open the browser tab containing AEM Sites page opened in step 1. Tap the Drag components here box and tap +. In the Insert New Component box, tap AEM Form. The AEM Forms Container component is added to the page.
Tap the AEM Forms container component and tap . A dialog box with properties of AEM Forms Container appears. In the Asset Path field, browse and select the shipping-address-add-update-form adaptive form. Tap
. The adaptive form is embedded in the page.
Publish both the adaptive form and Sites page. Here are a few points to consider:
If you publish the AEM Sites page for the first time and it includes an embedded form, publish the Sites page and the embedded form.
If you modify 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 modify the Sites page and the embedded form, republish the Sites page and the form.
Shipping and Billing Address Change form added to an AEM Sites page.
You can embed an adaptive form to an external web page (a non-AEM webpage hosted outside AEM) by inserting a few lines of JavaScript in the external web page. The JavaScript code sends an HTTP request to the AEM Forms server for the adaptive form and related resources and adds the adaptive form to the web page. For detailed steps, see embed the adaptive form to an external web page.