Style your adaptive form

Last update: May 3, 2023

Topics:
Adaptive Forms

CREATED FOR:

User

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Learn to create a custom theme, style individual components, and use web fonts in a theme

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.

About the tutorial

You can use themes to provide a unique appearance and style to an adaptive form. You can apply out of the box themes provided with adaptive forms editor or create custom themes of your own. AEM Forms provide a theme editor to create custom themes. A single theme can provide the different appearance to the same adaptive form opened on mobile, tablet, or desktop. Any prior knowledge of CSS or LESS is not required to use theme editor but it is desired.

By the end of the tutorial, you will learn to:

Apply an out of the box theme to an adaptive form
Create a theme for adaptive form using the theme editor
Style individual components
Bonus Section: Use web fonts in a custom theme

The form will look similar to the following after you complete the tutorial:

Form with a custom theme

Before you start

Download the header-style and logo images, given below, on your local machine. The header of the shipping-address-add-update-form adaptive form uses the header-style and logo images. The header-style image appears on the right side of the header.

Get File

Step 1: Apply a theme to your adaptive form

Adaptive forms editor provides multiple out-of-the-box themes. If you plan not to use a custom style for your adaptive form, you can also publish your adaptive forms with an out-of-the-box theme. Themes are independent of adaptive forms. You can apply the same theme to multiple adaptive forms. To apply a theme to an 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. Tap to apply the selected theme.

Adaptive form with the default theme

Figure: Adaptive form with the default theme

Adaptive form with the Survey theme

Figure: Adaptive form with the Survey theme

Step 2: Update your adaptive form

The design displayed above requires changes in placeholder text and logo of your existing adaptive form. Perform the following steps to make the required changes:

Change the existing logo and text of the header. To remove the logo:
1. Open the form in form editor.
  
  http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
2. Tap logo image in the header component and tap properties. In the image property, tap X to remove the existing logo image.
3. Tap upload, select the logo.png, and tap to save the changes. The image was downloaded in the Before you start section.
4. Tap header text, We.Retail, and tap edit. Change header text to we retail. Apply bold formatting only to wein we retail.
Remove title and add placeholder text:
1. Tap the Customer ID field and tap properties.
2. Copy the content of the Title field to the Placeholder Text field.
3. Delete the content of the Title field and tap .
4. Repeat the previous three steps for all the text boxes, numeric box, and email field in the form.

Step 3: Create a custom theme for your adaptive form

You can use theme editor to create custom themes. The theme editor is an all-powerful WYSIWYG editor. It is a visual method to apply CSS to various components of an adaptive form. It provides finer controls to style components and panels of an adaptive form.

A theme is a separate entity like adaptive forms. It contains styles (CSS) for the components and panels of an adaptive form. Styles include CSS properties such as background colors, state colors, transparency, alignment, and size. When you apply a theme, the specified style is applied to the corresponding components of an adaptive form.

In this tutorial, you will style header and footer, text and numeric components, attachment component, and buttons. Let’s start with creating a theme:

Create a theme

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

For information about using theme editor UI, see About the theme editor.
Tap Theme Options > Configure. In the Preview Form field, select the shipping-address-add-update-form adaptive form, tap , tap Save. Now, the theme editor is configured to use your own adaptive form instead of the default adaptive form. Tap 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

Style header and footer

Header and footer provide a consistent and distinctive look to an adaptive form. Generally, the header contains logo and name of the organization, the footer contains copyright information, and these remain identical across multiple forms of an organization. To style header and footer of the shipping-address-add-update-form adaptive 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, tap Toggle Side Panel.
Set the following properties in the Text accordion and tap .

Property
Value
Font Family
Arial
Font Color
FFFFFF
Font Size
54px
Tap the header widget and tap Header. The options to style the Header widget appear on the left. Expand the Dimensions & Position accordion, set the Height to 120px, and tap .
Expand the Background accordion of the header widget, set the Background Color to F6921E.

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

Property
Value
image
Upload the header-style.png. The image was downloaded in the Before you start section.
Position
Right Bottom
Tiling
No Repeat
In the theme editor, tap the logo in the header and tap Header Logo. Expand the Dimensions & Position accordion, set the following properties and tap .

Margin

Value

Margin

Top: 1.5rem
Bottom: -35px
Left: 1rem

Tip: Tap the link icon to provide different value to each field.

Height

4.75rem

Tap the footer widget and tap Footer. Expand the Background accordion, set the Background Color to F6921E, and tap .

Style the data capture component and apply a background to the adaptive form

You can use multiple components in an adaptive form to capture data. For example, text box and numeric box. You can provide identical style to all the data capture components or separate style for each component. In this tutorial, an identical style is applied to numeric boxes (Customer ID, ZIP Code) and text boxes (Customer ID, Name, Shipping Address, State, Email). To style the data capture components:

Tap the Customer ID field and tap the Field Widget option. Set the following properties and tap .

Accordion

Property

Value

Border

Border Color

A7A9AC

Border

Border Radius

Top: 7px
Right: 7px
Bottom: 7px
Left: 7px

Text

Font Family

Arial

Text

Font Color

939598

Text

Font Size

18px

Dimensions and Position

Width

60%

Dimensions and Position

Margin

Left: 10rem

Tap on the empty area above the Customer ID field and tap Responsive Panel Container. Set the Background > Background Color to F1F2F2. Tap .

Style the buttons

You can use a custom theme to apply an identical style to all the buttons of the adaptive form and inline styling to apply a style to a specific button. To style the buttons:

Tap the Submit button and tap the Button option. Set the following properties and tap .

Accordion

Property

Value

Background

Background Color

F6921E

Border

Border Color

F6921E

Border

Border Radius

Top: 7px
Right: 7px
Bottom: 7px
Left: 7px

Text

Font Family

Arial

Text

Font Color

FFFFFF

Text

Font Size

18px

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.

Step 4: Style individual components

Some styles apply to only a specific component. Such components are styled in adaptive forms editor.

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.
Tap the Attach button and tap the icon. Set the following properties in the Dimensions and Position accordion:

Property
Value
Float
Left
Width
10%
Tap the Government approved address proof option and tap the icon. Set the following properties:

Accordion

Property

Value

Dimensions & Position

Float

Left

Dimensions & Position

Width

73%

Dimensions & Position

Padding

Left: 10px

Dimensions & Position

Height

40px

Dimensions & Position

Margin

Right: 2rem
Left: 10rem

Background

Background Color

FFFFFF

Border

Border Width

1px

Border

Border Style

Solid

Border

Border Color

A7A9AC

Border

Border Radius

7px

Text

Font Family

Arial

Text

Font Color

BCBEC0

Text

Font Size

18px

Text

Line Height

2

Tap the Submit button and tap the icon. Set the following properties:

Accordion

Property

Value

Dimensions and Position

Float

Right

Dimensions and Position

Margin

Top: 5rem
Right: 14rem
Bottom: 20px
Left: 20px

Background

Background Color

F6921E

Border

Border Color

F6921E

styled-adaptive-form-1

Step 5: Bonus Section: Using web fonts in a custom theme

You can use various fonts to design an adaptive form. All the devices that the adaptive form is viewed on may not have the fonts used to design the adaptive form. You can use a web font service to deliver required fonts to the target device.

Adobe Typekit is a web fonts service. You can configure and use the service with adaptive forms. To use Adobe Typekit in an adaptive form:

NOTE

Typekit is now called Adobe Fonts and is included with Creative Cloud and other subscriptions. Learn more.

Create an Adobe Typekit 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 Typekit fonts (Web fonts) in an adaptive form.
In the AEM Forms server, navigate to Adobe Experience Manager > Tools > Deployment > Cloud Services. On the Cloud Services page, navigate to Third Party Services > Typekit, and click Configure Now under Typekit. If a configuration is already available, click the + button to create a new 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 TypeKit configuration. On the author instance, open Global Theme in the theme editor. In the theme editor, navigate to Theme Options > Configure. In Typekit Configuration field, select the kit, and click Save.

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

recommendation-more-help