DocumentationAEM 6.5User Guide

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

Last update: Thu Mar 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Learn to create a custom theme, style individual components, and use Web Fonts in a theme.

hero-image

This tutorial is a step in the Create Your First Adaptive Form series. Adobe recommends that you follow the series in chronological sequence to understand, perform, and demonstrate the complete tutorial use case.

About the tutorial 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 the 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 the theme editor, but it is desired.

By the end of the tutorial, you should be able to do the following:

  • 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

Your form should look similar to the following after you complete the tutorial:

Form with a custom theme

Before you start 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

Get File

Step 1: Apply a theme to your adaptive form step-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 your adaptive form:

  1. Open the adaptive form for editing.

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

  2. 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.

  3. Select a theme from the Adaptive Form Theme field. For example, Survey theme. Select aem_6_3_forms_save so you can 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 step-update-your-adaptive-form

The design displayed above requires changes in placeholder text and logo of your existing adaptive form.

To update your adaptive form:

  1. 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 cmppr properties. In the image property, select X to remove the existing logo image.

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

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

      we-retail-logo-text

  2. Remove title and add placeholder text:

    1. Select the Customer ID field and select cmppr properties.

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

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

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

      updated-adaptive-form

Step 3: Create a custom theme for your adaptive form step-create-a-custom-theme-for-your-adaptive-form

You can use the 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 style header and footer, text and numeric components, attachment component, and buttons. Let’s start with creating a theme:

Create a theme create-a-theme

  1. 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.

  2. 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.

  3. 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.

  4. Select Theme Options theme-options > Configure. In the Preview Form field, select the shipping-address-add-update-form adaptive form, select aem_6_3_forms_save , 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.

    custom-theme

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

    create-a-theme

    Figure: Adaptive form with the default form

Header and footer provide a consistent and distinctive look to an adaptive form. Generally, the header contains the logo and name of the organization, the footer contains copyright information, and these remain identical across multiple forms of an organization. To style the header and footer of the shipping-address-add-update-form adaptive form:

  1. 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 Toggle Side Panel.

  2. Set the following properties in the Text accordion and select aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Property Value
    Font Family Arial®
    Font Color FFFFFF
    Font Size 54 px

  3. 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 aem_6_3_forms_save .

  4. 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 aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Property Value
    image Upload the header-style.png. The image was downloaded in the Before you start section.
    Position Right Bottom
    Tiling No Repeat

  5. 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 aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Margin Value
    Margin
    • Top: 1.5rem
    • Bottom: -35px
    • Left: 1rem

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

    Height 4.75rem

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

Style the data capture component and apply a background to the adaptive form 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 an identical style to all the data capture components or a 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:

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Accordion Property Value
    Border Border Color A7A9AC
    Border Border Radius
    • Top: 7 px
    • Right: 7 px
    • Bottom: 7 px
    • Left: 7 px
    Text Font Family Arial®
    Text Font Color 939598
    Text Font Size 18 px
    Dimensions and Position Width 60%
    Dimensions and Position Margin
    • Left: 10 rem

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

    Responsive panel container

Style the buttons 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:

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Accordion Property Value
    Background Background Color F6921E
    Border Border Color F6921E
    Border Border Radius
    • Top: 7 px
    • Right: 7 px
    • Bottom: 7 px
    • Left: 7 px
    Text Font Family Arial®
    Text Font Color FFFFFF
    Text Font Size 18 px

  2. 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.

    style-data-capture-components

Step 4: Style individual components step-style-individual-components

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

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

  2. On the top bar, select the Style option.

    style-option

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

    table 0-row-2 1-row-2 2-row-2
    Property Value
    Float Left
    Width 10%

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Accordion Property Value
    Dimensions & Position Float Left
    Dimensions & Position Width 73%
    Dimensions & Position Padding
    • Left: 10 px
    Dimensions & Position Height 40 px
    Dimensions & Position Margin
    • Right: 2 rem
    • Left: 10 rem
    Background Background Color FFFFFF
    Border Border Width 1 px
    Border Border Style Solid
    Border Border Color A7A9AC
    Border Border Radius 7 px
    Text Font Family Arial®
    Text Font Color BCBEC0
    Text Font Size 18 px
    Text Line Height 2

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Accordion Property Value
    Dimensions and Position Float Right
    Dimensions and Position Margin
    • Top: 5 rem
    • Right: 14 rem
    • Bottom: 20 px
    • Left: 20 px
    Background Background Color F6921E
    Border Border Color F6921E

    styled-adaptive-form-1

Step 5: Bonus Section: Using Web Fonts in a custom theme step-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 the required fonts to the target device.

Adobe Fonts is a Web Fonts service. You can configure and use the service with adaptive forms. To use Adobe Fonts in an adaptive form:

  1. Browse the library of Adobe fonts and choose font to style your form.

    note note
    NOTE
    You can add tags or filters to refine the list of fonts.

  2. Click the </> button to add the family to a web project, in case you find a font you like.

    select-font-from-font-libary

    Add fonts to a web project dialog screen appears.

    note note
    NOTE
    You can only add fonts to your web project if they have the </> button available.

  3. Name your web project.

  4. Select the checkboxes to select the font weights and styles you want to include.

    add a font library

  5. Select Click to create the project.

  6. Copy the embed code and the URL from the screen.
    embed code and URL

  7. Click Done to close the web project window.

  8. Log into your AEM instance and go to URL http://server:port/crx/de/index.jsp#

  9. Create a folder structure in CRXDE, for example /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  10. Go to the newly created clientlibs folder and add the allowProxy and categories properties.

  11. Navigate to /apps/[fontslibrary]/[customlibrary(clientlibrary)] and create a css folder.

  12. Go to the created CSS folder and create a file. For example, create a file as fonts.css and paste the embed code along with the URL.
    Folder structure

  13. Save the changes.

NOTE
To use the added custom fonts in an Adaptive Form, ensure that the client library name in the Client Library Category aligns with the name specified in the categories option of the clientlib folder.

The included fonts are now accessible to the Adaptive Form through the following custom font client library.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2