文档AEM 6.5用户指南

为自适应表单设置样式 do-not-publish-style-your-adaptive-form

Last update: Mon Apr 27 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 适用对象：
  • Experience Manager 6.5

创建对象：

  • 管理员
  • 用户
  • 开发人员

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

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

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.

获取文件

获取文件

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. 选择标头组件中的徽标图像，然后选择 cmppr 属性。 在image属性中，选择X以删除现有的徽标图像。

    3. 选择​上传，选择logo.png，然后选择 aem_6_3_forms_save 以保存更改。 图像下载到开始之前。

    4. 选择标题文本We.Retail，然后选择 aem_6_3_edit edit。 将标题文本更改为we retail。 仅对we retail中的we应用粗体格式。

      we-retail-logo-text

  2. 移除标题并添加占位符文本：

    1. 选择“客户ID”字段，然后选择 cmppr 属性。

    2. 将​ 标题 ​字段的内容复制到​ 占位符文本 ​字段。

    3. 删除​ Title ​字段的内容，然后选择 aem_6_3_forms_save 。

    4. 对表单中的所有文本框、数字框和电子邮件字段重复前三个步骤。

      已更新自适应表单

步骤3：为自适应表单创建自定义主题 step-create-a-custom-theme-for-your-adaptive-form

您可以使用主题编辑器创建自定义主题。 主题编辑器是一个功能齐全的WYSIWYG编辑器。 它是一种将CSS应用于自适应表单的各种组件的可视化方法。 它提供更细化的控件，用于设置自适应表单的组件和面板的样式。

主题是一个单独的实体，如自适应表单。 它包含自适应表单的组件和面板的样式(CSS)。 样式包括CSS属性，例如背景颜色、状态颜色、透明度、对齐方式和大小。 应用主题时，指定的样式将应用于自适应表单的相应组件。

在本教程中，您将设置页眉和页脚、文本和数字组件、附件组件和按钮的样式。 让我们从创建主题开始：

创建主题 create-a-theme

  1. 登录到AEM创作实例并导航到​Adobe Experience Manager > Forms > 主题。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。

  2. 选择​ 创建 ​并选择​主题。 此时将显示创建主题页面，其中包含创建主题所需的字段。 Title​和​ Name ​字段是必填字段：

    • 标题：​指定主题的标题。 例如，全局主题。 标题可帮助您从主题列表中识别主题。
    • 名称：​指定主题的名称。 例如，Global-Theme. 在存储库中创建具有指定名称的节点。 当您开始键入标题时，将自动生成“名称”字段的值。 您可以更改建议的值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效的输入都将替换为连字符。

  3. 选择​创建。 将创建一个主题，并出现一个对话框以打开表单进行编辑。 选择​ 打开 ​以在新选项卡中打开新创建的主题。 主题将在主题编辑器中打开。 对于样式，主题编辑器使用AEM Forms随附的现成自适应表单。

    有关使用主题编辑器UI的信息，请参阅关于主题编辑器。

  4. 选择​主题选项 主题选项 > 配置。 在​ 预览表单 ​字段中，选择​ shipping-address-add-update-form ​自适应表单，选择 aem_6_3_forms_save ，然后选择​保存。 现在，主题编辑器配置为使用您自己的自适应表单，而不是默认的自适应表单。 选择​ 取消 ​以返回主题编辑器。

    自定义主题

    图： 具有shipping-address-add-update-form自适应表单的主题编辑器

    create-a-theme

    图： 带有默认表单的自适应表单

页眉和页脚为自适应表单提供一致且独特的外观。 通常，页眉包含组织的徽标和名称，页脚包含版权信息，并且这些信息和信息在组织的多个表单中保持相同。 要设置shipping-address-add-update-form自适应表单的页眉和页脚的样式，请执行以下操作：

  1. 在“选择器”面板中导航​Header > Text​选项。 “选择器”面板位于主题编辑器的左侧。 如果该面板不可见，请选择 切换侧面板 切换侧面板。

  2. 在​ 文本 ​折叠面板中设置以下属性，然后选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    属性 值
    字体系列 Arial®
    字体颜色 FFFFFF
    字体大小 54 px

  3. 选择标头构件并选择​标头。 用于设置标题小组件样式的选项显示在左侧。 展开​ 维度和位置 ​折叠面板，将​ 高度 ​设置为120px，然后选择 aem_6_3_forms_save 。

  4. 展开标题小组件的​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E.

    将鼠标悬停在​图像和渐变 > +添加​上，选择​图像。 设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    属性 值
    图像 上传header-style.png。 图像下载到开始之前。
    位置 右下
    并排显示 不重复

  5. 在主题编辑器中，选择标题中的徽标，然后选择​标题徽标。 展开“维度和位置”折叠面板，设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    边距 值
    边距
    • 上：1.5雷姆
    • 底部：-35像素
    • 左： 1rem

    提示：选择 链接图标为每个字段提供不同的值。

    高度 4.75雷姆

  6. 选择页脚小组件并选择​页脚。 展开​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E，然后选择 aem_6_3_forms_save 。

设置数据捕获组件的样式，并将背景应用于自适应表单 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

您可以在自适应表单中使用多个组件来捕获数据。 例如，文本框和数字框。 您可以为所有数据捕获组件提供相同的样式，或者为每个组件提供单独的样式。 在本教程中，相同的样式将应用于数字框（客户ID、邮政编码）和文本框（客户ID、姓名、送货地址、州、电子邮件）。 设置数据捕获组件的样式：

  1. 选择​ 客户ID ​字段并选择​ 字段小组件 ​选项。 设置以下属性并选择 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
    可折叠项 属性 值
    边框 边框颜色 A7A9AC
    边框 边框半径
    • 顶部： 7像素
    • 右： 7像素
    • 底部： 7像素
    • 左： 7像素
    文本 字体系列 Arial®
    文本 字体颜色 939598
    文本 字体大小 18 px
    维度和位置 宽度 60%
    维度和位置 边距
    • 左：10雷姆

  2. 选择​ 客户ID ​字段上方的空白区域，然后选择​响应面板容器。 将​Background > Background Color​设置为F1F2F2。 选择 aem_6_3_forms_save 。

    响应面板容器

设置按钮的样式 style-the-buttons

您可以使用自定义主题将相同的样式应用于自适应表单的所有按钮，并使用内联样式将样式应用于特定按钮。 设置按钮样式：

  1. 选择​ 提交 ​按钮并选择​ 按钮 ​选项。 设置以下属性并选择 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
    可折叠项 属性 值
    背景 背景颜色 F6921E
    边框 边框颜色 F6921E
    边框 边框半径
    • 顶部： 7像素
    • 右： 7像素
    • 底部： 7像素
    • 左：7像素
    文本 字体系列 Arial®
    文本 字体颜色 FFFFFF
    文本 字体大小 18 px

  2. 将自定义主题全局主题应用于您的自适应表单。 如果样式未反映在自适应表单上，请清理浏览器缓存并重试。

    style-data-capture-components

步骤4：设置单个组件的样式 step-style-individual-components

某些样式仅适用于特定组件。 此类组件在自适应表单编辑器中设置样式。

  1. 打开自适应表单进行编辑。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 在顶部栏上，选择​ 样式 ​选项。

    style-option

  3. 选择​ 附加 ​按钮并选择 aem_6_3_edit 图标。 在​ 维度和位置 ​折叠面板中设置以下属性：

    table 0-row-2 1-row-2 2-row-2
    属性 值
    浮点数 左
    宽度 10%

  4. 选择​ 政府批准的地址验证 ​选项，然后选择 aem_6_3_edit 图标。 设置以下属性：

    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
    可折叠项 属性 值
    尺寸及位置 浮点数 左
    尺寸及位置 宽度 73%
    尺寸及位置 边距
    • Left: 10 px
    尺寸及位置 高度 40 px
    Dimensions & Position 边距
    • Right: 2 rem
    • 左：10雷姆
    背景 背景颜色 FFFFFF
    边框 边框宽度 1 px
    边框 边框样式 实线
    边框 边框颜色 A7A9AC
    边框 边框半径 7 px
    文本 字体系列 Arial®
    文本 字体颜色 BCBEC0
    文本 字体大小 18 px
    文本 行高 2

  5. Select the Submit button and select the aem_6_3_edit icon. 设置以下属性：

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    可折叠项 属性 值
    维度和位置 浮点数 右
    维度和位置 边距
    • Top: 5 rem
    • Right: 14 rem
    • Bottom: 20 px
    • Left: 20 px
    背景 背景颜色 F6921E
    边框 边框颜色 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. 浏览Adobe字体的库并选择字体以设置表单的样式。
NOTE
可添加标记或筛选器以优化字体列表。

  1. 单击</>按钮将系列添加到Web项目中，以防您找到所需的字体。

    select-font-from-font-library

    出现“Add fonts to a web project（将字体添加到Web项目）”对话框。

    note note
    NOTE
    只有在Web项目中具有</>按钮时，才能添加字体。

  2. 命名您的Web项目。

  3. 选中复选框以选择要包括的字体粗细和样式。

    添加字体库

  4. 选择​ 单击 ​以创建项目。

  5. 从屏幕复制嵌入代码和URL。
    嵌入代码和URL

  6. 单击​ 完成 ​以关闭Web项目窗口。

  7. 登录AEM实例并转到URL http://server:port/crx/de/index.jsp#

  8. 在CRXDE中创建文件夹结构，例如/apps/[fontslibrary]/[customlibrary(clientlibrary)]。

  9. 转到新创建的clientlibs文件夹并添加allowProxy和categories属性。

  10. 导航到/apps/[fontslibrary]/[customlibrary(clientlibrary)]并创建css文件夹。

  11. 转到创建的CSS文件夹并创建一个文件。 例如，创建一个文件作为fonts.css，并粘贴嵌入代码以及URL。
    文件夹结构

  12. 保存更改。

NOTE
要在自适应表单中使用添加的自定义字体，请确保​ 客户端库类别 ​中的客户端库名称与clientlib文件夹的“类别”选项中指定的名称一致。

自适应表单现在可通过以下自定义字体客户端库访问包含的字体。

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