Create an Adaptive Form template

When you author a form, you add fields and components to define form structure, content, and actions in the editor. You add fields and components in the guideRootPanel of the form container. With Template Editor, you can create a template that contains basic structure and initial content that authors can use to create forms.

For example, you want all form authors to have certain text boxes, navigation buttons, and a submit button in an enrollment form. You can create a template with the components that authors can use to create a form that is consistent with other enrollment forms. When authors use the template to create an Adaptive Form, the new form inherits the structure and components you have specified in the template. Template Editor lets you:

  • Add header and footer components of a form in the structure layer.
  • Provide the initial content for the form.
  • Specify a theme, Submit Actions.

You can download and install AEM Forms reference content package from Software Distribution portal to import reference themes and templates to your environment.

Working with templates

You can access template editor from the Tools menu by navigating to Adobe Experience Manager > Tools > General > Templates. Here, the templates are organized in folders enabled for editable templates.

Experience Manager provides a global folder to organize templates. However, it is not enabled by default. You can request your Administrator to enable the global folder or create a folder for templates. For more information on how to create folders, see Template Folders.

Creating a template

After you have created a folder, open the folder and perform the following steps to create a template:

  1. Tap Create inside the folder you have created.

  2. In the Pick a Template Type section, select Adaptive Form template and tap Next.

  3. In the Template Details section, provide a Template Title and tap Create.
    You can also provide a description.

  4. Tap Done to return to the console, or tap Open to open the template in the editor.

Template editor UI

When you open a template for editing, you can see the following AEM Editor components:

  • Page toolbar
    Contains the following options:

    • Toggle Side Panel: Lets you show or hide the sidebar.
    • Page Information: Lets you specify information such as the publish/unpublish time, thumbnails, client-side libraries, page policy, and page design client-side library.
    • Mode selector: Lets you change the mode.
      You can choose Structure mode, Initial Content, Layout Control mode. Structure mode lets you add and customize the header and footer. Initial Content mode lets you customize the form content.
    • Preview: Lets you preview how the template looks when you publish it. You can use Layer Selector and Preview to toggle editing and preview modes.
  • Sidebar: Provides the Content, Properties, Assets, and Components browsers.

  • Component toolbar: When you select a component, you see a toolbar that lets you customize the component.

  • Page: The area where you add content to create the template.

Editing a template

An Adaptive Form template is created using two layers:

  • Structure
  • Initial Content

The layer selector is available beside the Preview option in the upper-right corner of the screen.

Structure

When you select the structure layer in the Template Editor, you can see the layout containers above and below the Adaptive Form Container. Authors can use these layout containers for header and footer. You can add, edit, or customize the header and footer. Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container to customize the template header. Drag-drop the Adaptive Form Footer component in the layout container below the Adaptive Form Container to customize the template footer.

Layout container in the structure layer

Layout containers in the structure layer

A. Layout container for Header component B. Layout container for Footer component

Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container. After you add the component, you can specify its properties that let you add a logo and provide its title.

Similarly, when you drag-drop the footer component in the layout container below the Adaptive Form Container, you can provide the copyright information and company details.

Header and footer added in the Structure layer

Header and footer added in the Structure layer

Locking/unlocking components in the structure layer

When you edit the template with structure layer selected, you can unlock the header and footer of the template. If a component is unlocked in the template, form authors can edit the component in the Adaptive Form that uses the template. Locking a component prevents form authors from editing it in the Adaptive Form. Lock option is available in the component toolbar.

For example, you add the header component in the template. When you select the component, you can see a lock option in the component toolbar. Typically, header includes company name and logo, and you don’t want form authors to change the logo and header in a template. In an Adaptive Form created using the template with the header component locked, form authors cannot change the logo and company name.

NOTE

Locking or unlocking image or logo in the header component, individually, is not recommended. You can unlock the header component.

Initial Content

When the Initial Content option is selected, the Adaptive Form Container of the template opens like an Adaptive Form for editing. Like authoring an Adaptive Form, you can specify initial settings, such as selecting a theme and Submit Actions.

Form authors use it as a base to create a form. Content flow structure is specified in the Initial Content layer of the template. To switch to editing initial content of the form template, before Preview in the page toolbar, tap canvas-drop-down > Initial Content.

In the Initial Content layer, you create the Adaptive Form template that your authors use as a base. Authoring a template is similar to authoring a form, you use options available in the Sidebar. Sidebar provides content, properties, assets, and components browsers.

NOTE

When you select Store content or StorePDF as the Submit Action, you get an option to specify the Storage path. If you specify path in template, then all forms created from it have the same path. You can specify the correct storage path, or ensure form authors to update it to prevent data from every form getting stored at same location.

Creating an Adaptive Form template with tabs and panels

For example, you want to create a template with the following tabs:

  • General Information
  • Professional Information

You have added a logo, provided a title, and added a footer in the structure layer. Lock the header and footer to stop form authors from editing them when they use the template to create forms.

Change the layer from Structure to Initial Content, and start adding content to the form. To create a tabbed structure, add a child Panel in the guideRootPanel of the Adaptive Form container. To add a panel:

  • You can add a panel by tapping the + button when you select the Drag components here option.

  • You can drag-drop the panel component from the components browser in the sidebar.

  • You can add child panel of the guideRootPanel from the component toolbar.

To create the General Information and Professional Information tabs, add two panels in the child panel of the guideRootPanel. Select the panels and tap cmppr to open the properties in the sidebar. Change the element names as general-info and professional-info, and titles as General Information and Professional Information respectively. In the sidebar, tap content to open the content browser. In the Form Objects tab, select guideRootPanel. In the editor, the guideRootPanel is selected. Tap cmppr in the component toolbar to open its properties. In the Panel Layout field, select Tabs on Top and tap Done. The tabbed template structure is applied.

Adding content in tabs

After you add panels and structure them as tabs, you can add fields inside the tabs. When you select a tab in the editor, you can see the Drag components here option. You can drag-drop components such as text-boxes, list items, and buttons. You can drag-drop components from the components browser in the sidebar.

Each component has properties that enhance data capturing and manipulation. For example, you can enable the Required field property of a component. Your authors can specify a message that your customers see when they skip filling a required field. Specify the message in Required Field Message property.

In the example template, Name, Phone number, and Date of birth fields are added in the General Information tab. In the Professional Information tab, Currently employed, employment type, Educational qualification fields are added.

After you have added fields, you can add buttons such as Submit and Reset.

Enabling the template

When you create a template, it is added as a draft. Enable the template to use it for creating Adaptive Forms. To enable a template:

  1. Navigate to Adobe Experience Manager > Tools > Templates, and open the folder in which you have created the template.

  2. The template you have created is marked as Draft.

  3. Select the template and tap Enable in the toolbar.
    When you create an Adaptive Form, you can see the template listed when you are asked to choose a template.

Importing or exporting a template

A form works with its template. When you download an Adaptive Form created using a customized template, the template is not downloaded. When you import the ftocorm on a different AEM Forms instance, it is imported without its template. If a form is imported but its template is not available, the form is not rendered. You can package the custom template from /conf node in https://<server>:<port>/crx/packmgr, and port it in the AEM Forms instance where you want to upload the form. You can also Create a template using AEM Archeype and deploy it to your Cloud Services instance.

Creating an Adaptive Form using the template

After you create and enable a template, it is available in the forms manager when you create an Adaptive Form. To use a template and create an Adaptive Form, see Creating an Adaptive Form.

Recommendations

  • When you modify properties of the form in template editor, do not use the BindReference property.
  • If you want to add a breakpoint, create it when you author an Adaptive Form template.
    For more information on breakpoints, see Responsive Layout.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now