设置自适应表单的样式

了解如何创建自定义主题、为各个组件设置样式以及在主题中使用Web字体

本教程是 创建您的第一个自适应表单 系列。 建议按时间顺序关注该系列，以了解、执行和演示完整的教程用例。

关于教程

您可以使用主题为自适应表单提供独特的外观和样式。 您可以应用随自适应表单编辑器提供的现成主题，也可以创建自己的自定义主题。 AEM Forms 提供 主题编辑器 创建自定义主题。 单个主题可以为在移动设备、平板电脑或桌面上打开的相同自适应表单提供不同的外观。 使用主题编辑器不需要具备CSS或LESS的任何先验知识，但这是必需的。

在本教程结束时，您将学习：

  • 将现成的主题应用于自适应表单
  • 使用主题编辑器为自适应表单创建主题
  • 为单个组件设置样式
  • 附加部分：在自定义主题中使用Web字体

完成本教程后，该表单将类似于以下内容：

具有自定义主题的表单

开始之前

将下面给定的页眉样式和徽标图像下载到本地计算机上。 的标题 shipping-address-add-update-form 自适应表单使用页眉样式和徽标图像。 标题样式图像显示在标题的右侧。

获取文件

获取文件

步骤1：将主题应用于自适应表单

自适应表单编辑器提供了多个现成的主题。 如果您计划不对自适应表单使用自定义样式，则还可以使用现成的主题发布自适应表单。 主题与自适应表单无关。 您可以将同一主题应用于多个自适应表单。 要将主题应用于自适应表单，请执行以下操作：

  1. 打开自适应表单进行编辑。

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

  2. 打开属性 自适应表单容器. 在属性浏览器中，导航到 基本 > 自适应表单主题. 此 自适应表单主题 字段列出了所有现成的主题和自定义主题。 默认情况下，将应用画布主题。

  3. 从中选择主题 自适应表单主题 字段。 例如， 调查主题. 点按 aem_6_3_forms_save 以应用所选主题。

    带有默认主题的自适应表单

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

    带有调查主题的自适应表单

    图： 带有调查主题的自适应表单

步骤2：更新您的自适应表单

以上显示的设计要求更改现有自适应表单的占位符文本和徽标。 执行以下步骤以进行所需的更改：

  1. 更改页眉的现有徽标和文本。 要删除徽标，请执行以下操作：

    1. 在表单编辑器中打开表单。

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

    2. 点按中的徽标图像 标头 组件和点按 cmppr 属性. 在 图像 属性，点按X可删除现有的徽标图像。

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

    4. 点按标题文本， We.Retail，然后点按 aem_6_3_edit 编辑. 将标题文本更改为 we retail. 仅将粗体格式应用于 we在 we retail.

      we-retail-logo-text

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

    1. 点按客户ID字段，然后点按 cmppr 属性。

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

    3. 删除的内容 标题 字段并点按 aem_6_3_forms_save.

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

      updated-adaptive-form

步骤3：为自适应表单创建自定义主题

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

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

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

创建主题

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

  2. 点按 创建 并选择 主题. 此 创建主题 此时将显示包含创建主题所需字段的页面。 此 标题 和 名称 字段为必填字段：

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

  3. 点按​创建。创建主题，并显示用于打开表单进行编辑的对话框。 点按 打开 在新选项卡中打开新创建的主题。 主题将在主题编辑器中打开。 对于样式，主题编辑器使用AEM附带的现成自适应表单 Forms.

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

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

    custom-them

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

    create-a-them

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

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

  1. 导航至 页眉 > 文本 选项。 “选择器”面板位于主题编辑器的左侧。 如果面板不可见，请点按 切换侧面板 切换侧面板。

  2. 在中设置以下属性 文本 可折叠项和点按 aem_6_3_forms_save.

    属性 值
    字体系列 Arial
    字体颜色 FFFFFF
    字体大小 54px

  3. 点按 标头 小工具和点按 页眉. 用于设置标题小组件样式的选项显示在左侧。 展开 Dimension和位置 可折叠项，设置 高度 到 120px，然后点按 aem_6_3_forms_save.

  4. 展开 背景 标题小部件的折叠面板，设置 背景颜色 到 F6921E.

    将鼠标悬停在 图像和渐变 > +添加，点按 图像. 设置以下属性并点按 aem_6_3_forms_save.

    属性 值
    图像 上传header-style.png。 图像下载到 开始之前 部分。
    位置 右下
    并排显示 不重复

  5. 在主题编辑器中，点按标题中的徽标并点按 页眉徽标. 展开Dimension和位置折叠面板，设置以下属性并点按 aem_6_3_forms_save.

    边距 值
    边距
    • 顶部：1.5雷姆
    • 底部：-35像素
    • 左：1rem

    提示： 点按 链接图标，为每个字段提供不同的值。
    高度 4.75rem

  6. 点按页脚小组件并点按 页脚. 展开 背景 可折叠项，设置 背景颜色 到 F6921E，然后点按 aem_6_3_forms_save.

设置数据捕获组件的样式，并将背景应用于自适应表单

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

  1. 点按 客户ID 字段并点按 字段小组件 选项。 设置以下属性并点按 aem_6_3_forms_save.

    折叠 属性 值
    边框 边框颜色 A7A9AC
    边框 边框半径
    • 顶部：7像素
    • 右：7像素
    • 底部：7像素
    • 左：7像素
    文本 字体系列 Arial
    文本 字体颜色 939598
    文本 字体大小 18px
    Dimension和位置 宽度 60%
    Dimension和位置 边距
    • 左：10雷姆

  2. 点按“ ”上方的空白区域 客户ID 字段并点按 响应面板容器. 设置 背景 > 背景颜色 到F1F2F2。 点按 aem_6_3_forms_save.

设置按钮的样式

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

  1. 点按 提交 按钮并点按 按钮 选项。 设置以下属性并点按 aem_6_3_forms_save.

    折叠 属性 值
    背景 背景颜色 F6921E
    边框
    		 边框颜色 F6921E
    边框 边框半径
    • 顶部：7像素
    • 右：7像素
    • 底部：7像素
    • 左：7像素
    文本
    		 字体系列 Arial
    文本 字体颜色 FFFFFF
    文本 字体大小 18px

  2. 应用自定义主题，全局主题，添加到自适应表单。 如果样式未反映在自适应表单上，请清除浏览器缓存并重试。

    style-data-capture-components

步骤4：设置单个组件的样式

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

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

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

    style-option

  3. 点按 附加 按钮并点按 aem_6_3_edit图标。 在中设置以下属性 Dimension和位置 可折叠项：

    属性 值
    浮点数 左
    宽度 10%

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

    折叠 属性 值
    尺寸及位置 浮点数 左
    尺寸及位置 宽度 73%
    尺寸及位置 边距
    • 左：10像素
    尺寸及位置 高度 40px
    尺寸及位置
    		 边距
    • 右：2rem
    • 左：10雷姆
    背景 背景颜色 FFFFFF
    边框 边框宽度 1px
    边框 边框样式 实线
    边框 边框颜色 A7A9AC
    边框 边框半径 7px
    文本 字体系列 Arial
    文本 字体颜色 BCBEC0
    文本 字体大小 18px
    文本 行高 2

  5. 点按 提交 按钮并点按 aem_6_3_edit 图标。 设置以下属性：

    折叠 属性 值
    Dimension和位置 浮点数 右
    Dimension和位置 边距
    • 顶部：5雷姆
    • 右：14雷姆
    • 底部：20像素
    • 左：20像素
    背景 背景颜色 F6921E
    边框 边框颜色 F6921E

    styled-adaptive-form-1

步骤5：附加部分：在自定义主题中使用Web字体

您可以使用各种字体设计自适应表单。 查看自适应表单的所有设备可能没有用于设计自适应表单的字体。 您可以使用Web字体服务将所需的字体交付给目标设备。

Adobe Fonts 是Web字体服务。 您可以针对自适应表单配置和使用服务。 使用 Adobe Fonts 在自适应表单中：

注意

typekit-to-adobe-fonts Typekit 现在称为Adobe Fonts，包含在Creative Cloud和其他订阅中。 了解更多。

  1. 创建 Adobe Fonts 帐户、创建套件、将字体Myriad Pro添加到套件、发布套件并获取套件ID。 需要使用 Adobe Fonts （Web字体）。

  2. 在AEM中 Forms 服务器，导航到 adobeexperiencemanager Adobe Experience Manager > 工具 锤子 > Adobe Fonts. 现在，打开一个配置文件夹。 如果配置已经可用，请单击 创建 按钮以创建新实例。

    在创建配置对话框中，指定 标题 ，然后单击 创建. 您将被重定向到配置页面。 在 编辑组件 对话框，请提供 套件ID 并单击 确定.

  3. 配置主题以使用 Adobe Fonts 配置。 在创作实例上，打开 全局主题 在主题编辑器中。 在主题编辑器中，导航到 主题选项 theme-options > 配置. In Adobe Fonts配置 字段，选择配套件，然后单击 保存.

    添加到中的字体 Adobe Fonts 可在 文本 所有组件的折叠面板。

在此页面上