The adaptive forms feature of Adobe Experience Manager (AEM) forms allows you to create engaging, responsive, and adaptive forms that automatically render as PDF or HTML5 based on device and browser settings. Adaptive forms dynamically adapt to user responses by adding or removing fields or sections based on user response.
With adaptive forms, you can break down a form into logical sections, which enables end users to focus on filling out one section at a time. In addition, you can leverage the default form templates supplied with AEM forms, use existing Adobe XML or XFA templates, or create your own templates from scratch.
Adaptive form authoring is not supported in Touch authoring mode. So if the URL contains /editor.html/, you need to replace it with /cf#/, which enforces the classic authoring mode.
The intuitive interface, drag-and-drop functionality, standard form components, and integrated repository for assets facilitate quick and easy authoring of adaptive forms in no time.
When you create a new or edit an existing adaptive form, you use the following UI elements:
- Content finder
- Adaptive form page
The Content finder pane allows you to search, view, and use assets in your AEM Digital Asset Management (DAM) repository. It consists of several tabs that segregate different types of content, such as images, documents, pages, movies, and so on. For more information about finding assets in DAM, see Finding and Viewing Digital Assets.
However, in case of an adaptive form that uses an XML schema or XDP form template as its form model, a new tab displaying the form-model hierarchy is shown in the content finder. It allows you to drag and drop form-model elements on the adaptive form. The added elements automatically get converted into form components while retaining their original properties.
The adaptive form page is the actual form. It is like any other WCM page modeled as the WCM cq:Page component. The following image shows the content structure of a typical adaptive form.
The content structure typically contains the following primary components:
- guideContainer: The root of an adaptive form, which is marked as Start of adaptive form in the adaptive form UI. In this component, you can specify:
- Mobile Layout of the adaptive form: Defines the appearance of the form on mobile devices.
- Thank You page: Defines the page where the user is redirected after submitting the form.
- Submit Action: Defines how the form is processed on the server once the user submits the form.
- Styling: Specifies the path to the CSS file used to customize the appearance of the form.
- rootPanel: The root panel of an adaptive form. It can contain subpanels under the items node. Each panel including the root panel can have a layout associated with it. The layout of the panel dictates how the form is laid out. For example, in the Accordion layout, its items are laid out as Accordion steps.
- toolbar: An adaptive form container has an associated global toolbar, which is global to the form. This toolbar can be added using the Add Toolbar action in the edit bar, which allows authors to add actions, such as Submit, Save, Reset, and so on.
- assets: This node contains additional information used for form authoring. For example, form model details, localization details, and so on).
Sidekick includes components that you can use to build an adaptive form. You can drag components from onto the adaptive form to add form elements, and configure added element as per the requirements. The following table describes the components listed in the Adaptive Form category in the sidekick.
|Button||Adds a button, which you can configure to perform actions, such as save, reset, go next, go previous, and so on|
|Check box||Adds a check box|
|Date picker||Adds a calender field to pick a date|
|Drop-down list||Adds a drop-down list - single or multi-select|
Adds a signing area where users can sign the form. It allows you to configure Adobe EchoSign or scribble signatures signing services.
For adaptive forms using XDP Form template, the E-sign component shows the original form template associated with the adaptive form.
|File attachment||Adds a button that allows users to browse and attach supporting documents to the form|
|Image||Allows you to insert an image|
|Numeric box||Adds a field for capturing numeric values|
|Panel||Adds a panel or subpanel|
|Password box||Adds a field for capturing a password|
|Radio button||Adds radio buttons|
|Reset button||Adds a button to reset form fields|
|Scribble signature||Adds a field for capturing scribble signatures|
|Static text||Allows you to specify static text|
|Submit button||Adds a submit button to submit the form to the configured submit action.|
|Summary||Adds summary text that authors specify. It shows up after the form is submitted.|
|Terms and conditions
||Adds a field that authors can use to specify the terms and conditions for users to review before filling the form|
|Text box||Adds a text box in which a user can specify the required information|
|Verify||For adaptive forms using XDP Form template, the Verify component renders the form for users to verify the information|
You can also add a panel component from the parent panel toolbar using the Add Child Panel button. Similarly, one can add a panel-specific toolbar using the Add Toolbar button. This toolbar can be configured to be present at the top or the bottom of the panel using the Edit Panel dialog.
Each component has associated properties that control its appearance and functionality. To configure the properties of a component, right-click the component and click Edit to open the component edit dialog.
Sidekick provides other tabs like Page Properties and Workflow. In general, it is recommended not to use other tabs and rely on AEM forms UI for form management capabilities of AEM forms. For example, you must use AEM forms UI to publish forms instead of using the Page Properties tab for publishing.
You can preview an adaptive form while you are authoring it. It helps you verify how the form will appear to the end user and modify accordingly. To preview a form, click at the bottom of the sidekick. Click to switch back to the edit mode.
You can preview how your form will render on a variety of devices by selecting an appropriate device from the Devices drop-down list, which appears below the Sidekick when previewing a form.