Style your adaptive form do-not-publish-style-your-adaptive-form

Open the adaptive form for editing.

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

Open properties of Adaptive Form container. In the properties browser, navigate to Basic > Adaptive Form Theme. The Adaptive Form Theme field lists all the out-of-the-box and custom themes. By default, the Canvas theme is applied.

Select a theme from the Adaptive Form Theme field. For example, Survey theme. Select so you can apply the selected theme.

Figure: Adaptive form with the default theme

Figure: Adaptive form with the Survey theme

Change the existing logo and text of the header. To remove the logo:

1. Open the form in the form editor.

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Select logo image in the header component and select properties. In the image property, select X to remove the existing logo image.

3. Select upload, select the logo.png, and select to save the changes. The image was downloaded in the Before you start section.

4. Select header text, We.Retail, and select edit. Change header text to we retail. Apply bold formatting only to wein we retail.

   

Remove title and add placeholder text:

1. Select the Customer ID field and select properties.

2. Copy the content of the Title field to the Placeholder Text field.

3. Delete the content of the Title field and select .

4. Repeat the previous three steps for all the text boxes, numeric box, and email field in the form.

   

Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Themes. The default URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

Select Create and select Theme. The Create Theme page with the fields required to create a theme appears. The Title and Name fields are mandatory:

• Title: Specify a title of the theme. For example, Global Theme. The title helps you identify the theme from the list of themes.
• Name: Specify the name of the theme. For example, Global-Theme. A node with the specified name is created in the repository. As you start typing a title, the value for the name field is automatically generated. You can change the suggested value. The name field can include only alphanumeric characters, hyphens, and underscores. All the invalid inputs are replaced with a hyphen.

Select Create. A theme is created and a dialog to open the form for editing appears. Select Open to open the newly created theme in a new tab. The theme opens in the theme editor. For styling, the theme editor uses an out-of-the-box adaptive form shipped with AEM Forms.

For information about using the theme editor UI, see About the theme editor.

Select Theme Options > Configure. In the Preview Form field, select the shipping-address-add-update-form adaptive form, select , select Save. Now, the theme editor is configured to use your own adaptive form instead of the default adaptive form. Select Cancel to return to the theme editor.

Figure: Theme editor with the shipping-address-add-update-form adaptive form

Figure: Adaptive form with the default form

Navigate the Header > Text option in the Selectors panel. The Selectors panel is on the left of the theme editor. If the panel is not visible, select Toggle Side Panel.

Set the following properties in the Text accordion and select .

Select the header widget and select Header. The options to style the Header widget appear on the left. Expand the Dimensions & Position accordion, set the Height to 120px, and select .

Expand the Background accordion of the header widget, set the Background Color to F6921E.

Hover over Image & Gradient > + Add, select Image. Set the following properties and select .

In the theme editor, select the logo in the header and select Header Logo. Expand the Dimensions & Position accordion, set the following properties and select .

Select the footer widget and select Footer. Expand the Background accordion, set the Background Color to F6921E, and select .

Select the Customer ID field and select the Field Widget option. Set the following properties and select .

Select the empty area above the Customer ID field and select Responsive Panel Container. Set the Background > Background Color to F1F2F2. Select .

Select the Submit button and select the Button option. Set the following properties and select .

Apply the custom theme, Global Theme, to your adaptive form. If the style does not reflect on the adaptive form, clean the browser cache and try again.

Open the adaptive form for editing. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

On the top bar, select the Style option.

Select the Attach button and select the icon. Set the following properties in the Dimensions and Position accordion:

Select the Government approved address proof option and select the icon. Set the following properties:

Select the Submit button and select the icon. Set the following properties:

Create an Adobe Fonts account, create a kit, add font Myriad Pro to the kit, publish the kit, and obtain the Kit ID. It is required to use Adobe Fonts (Web Fonts) in an adaptive form.

In the AEM Forms Server, navigate to Adobe Experience Manager > Tools > Adobe Fonts. Now, open a configuration folder. If a configuration is already available, click the Create button to create an instance.

On the Create Configuration dialog, specify a Title for the configuration, and click Create. You are redirected to the configuration page. In the Edit Component dialog that appears, provide your Kit ID and click OK.

Configure your theme to use the Adobe Fonts configuration. On the author instance, open Global Theme in the theme editor. In the theme editor, navigate to Theme Options > Configure. In the Adobe Fonts Configuration field, select the kit, and click Save.

The fonts added to the Adobe Fonts are available for selection in the Text accordion of all the components.