Show Menu
主题×

设置自适应表单的样式

了解如何创建自定义主题、设计各个组件的样式以及在主题中使用Web字体
本教程是“创建您的第一个自 适应表单”系列中的一个步骤 。 建议按照时间顺序按照这一系列来了解、执行和演示完整的教程用例。

关于教程

您可以使用主题为自适应表单提供独特的外观和样式。 您可以应用随自适应表单编辑器提供的现成主题,或创建您自己的自定义主题。 AEM Forms提供了一个主题 编辑器 ,用于创建自定义主题。 单个主题可以为在移动设备、平板电脑或桌面上打开的同一自适应表单提供不同的外观。 CSS或LESS的任何先前知识都不需要使用主题编辑器,但是是需要。
在教程结束时,您将学习:
  • 将开箱即用主题应用到自适应表单
  • 使用主题编辑器为自适应表单创建主题
  • 设置单个组件的样式
  • 奖励部分:在自定义主题中使用Web字体
完成教程后,表单的外观将类似于以下内容:

Before you start

在您的本地计算机上下载标题样式和徽标图像,如下所示。 自适应表单 shipping-address-add-update-form 的标题使用标题样式和徽标图像。 标题样式图像显示在标题的右侧。

第1步:将主题应用于自适应表单

自适应表单编辑器提供多个现成主题。 如果您计划不为自适应表单使用自定义样式,则还可以发布具有现成主题的自适应表单。 主题独立于自适应表单。 您可以将同一主题应用于多个自适应表单。 要将主题应用于自适应表单,请执行以下操作:
  1. 打开自适应表单进行编辑。
  2. 打开自适应表 单容器的属性 。 在属性浏览器中,导航到“基 ”>“自 适应表单主题” 。 “自 适应表单主题 ”字段列表所有现成的和自定义的主题。 默认情况下,将应用画布主题。
  3. 从自适应表单主题字 段中选择一个主题 。 例如, 调查主题 。 点 ,以应用所选主题。
图: 具有 默认主题的自适应表单
图: 具有 调查主题的自适应表单

第2步:更新自适应表单

上面显示的设计需要更改现有自适应表单的占位符文本和标志。 执行以下步骤以进行所需的更改:
  1. 更改标题的现有徽标和文本。 删除标志:
    1. 在表单编辑器中打开表单。
    2. 点按标题组件中的徽标图像,然后点按 属性。 在图像属性中,点按X以删除现有的徽标图像。
    3. 点按上传,选择logo.png,然后点 ,以保存更改。 图像已下载到“开始 前”部分
    4. 点按标题文 We.Retail 本,然后 edit 。 将标题文本更改为 we retail 。 将粗体格式仅应用于 we we retail
  2. 删除标题并添加占位符文本:
    1. 点按客户ID字段,然后点按 属性。
    2. 将“标题”字段的内 容复制 到“占位 符文本”字段
    3. 删除标题字 段的内容 ,然后点
    4. 对表单中的所有文本框、数字框和电子邮件字段重复上述三个步骤。

第3步:为自适应表单创建自定义主题

您可以使用主 题编辑器 ,创建自定义主题。 主题编辑器是功能强大的WYSIWYG编辑器。 将CSS应用于自适应表单的各种组件是一种可视方法。 它为自适应表单的组件和面板提供了更精细的控件。
主题是与自适应表单类似的单独实体。 它包含自适应表单的组件和面板的样式(CSS)。 样式包括CSS属性,如背景颜色、状态颜色、透明度、对齐方式和大小。 应用主题时,指定的样式将应用于自适应表单的相应组件。
在本教程中,您将设计页眉和页脚、文本和数字组件、附件组件和按钮的样式。 让我们开始创建主题:

创建主题

  1. 登录到AEM作者实例,然后导航到 Adobe Experience Manager > Forms > 主题 。 默认URL为 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes
  2. 点按 创建 ,然后选择 主题 。 此时将显示“创建主题”页,其中包含创建主题所需的字段。 “标题”和“名称”字段是必填字段:
    • 标题: 指定主题的标题。 例如,“全 局主题”。 标题可帮助您从主题的列表中识别主题。
    • 名称: 指定主题的名称。 例如, Global-Theme。 将在存储库中创建具有指定名称的节点。 在开始键入标题时,将自动生成名称字段的值。 您可以更改建议的值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效输入都替换为连字符。
  3. 点按​ 创建 。将创建一个主题,并显示一个用于打开表单进行编辑的对话框。 点按 打开 ,在新选项卡中打开新创建的主题。 主题将在主题编辑器中打开。 对于样式,主题编辑器使用AEM Forms附带的现成自适应表单。
    有关使用主题编辑器UI的信息,请参阅 关于主题编辑器
  4. 点按 主题选项 >“ 配置 ”。 在“ 预览表单 ”字段中,选择送货地址- add-update-form自适应表单 ,点按 ,点按 ​保存。 现在,主题编辑器已配置为使用您自己的自适应表单而不是默认的自适应表单。 点按 取消 ,以返回主题编辑器。
    图: 带有 shipping-add-update-form自适应表单的主题编辑器
    图: 具有 默认表单的自适应表单

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

您可以在自适应表单中使用多个组件来捕获数据。 例如,文本框和数字框。 您可以为所有数据捕获组件提供相同的样式,或为每个组件提供单独的样式。 在本教程中,相同的样式将应用于数字框(客户ID、邮政编码)和文本框(客户ID、名称、送货地址、状态、电子邮件)。 设置数据捕获组件的样式:
  1. 点按客户ID字段,然后点按字 段构件 选项。 设置以下属性,然
折叠 属性
边框 边框颜色 A7A9AC
边框 边框半径
  • 顶部:7px
  • 对:7px
  • 底部:7px
  • 左:7px
文本 字体系列 Arial
文本 字体颜色 939598
文本 字体大小 18px
尺寸和位置 宽度 60%
尺寸和位置 边距
  • 左:10rem
  1. 点按客户ID字段上方的空白区域,然后点按响 应式面板容器 。 将“背 ”>“ 背景颜色 ”设置为F1F2F2。 点

设置按钮的样式

您可以使用自定义主题将相同的样式应用于自适应表单的所有按钮和内联样 ,以将样式应用于特定按钮。 设置按钮样式:
  1. 点按提 交按钮 ,然后点 按按钮 。 设置以下属性,然
折叠 属性
背景 背景颜色 F6921E
边框 边框颜色 F6921E
边框 边框半径
  • 顶部:7px
  • 对:7px
  • 底部:7px
  • 左:7px
文本 字体系列 Arial
文本 字体颜色 FFFFFF
文本 字体大小 18px
  1. 将自定义主题 “全局主题”应用到自适应表单。 如果样式未反映在自适应表单上,请清除浏览器缓存,然后重试。

第4步:设置单个组件的样式

某些样式仅适用于特定组件。 这些组件在自适应表单编辑器中设置样式。
  1. 在顶部栏上,选择“样 ”选项。
  2. 点按 附加按钮 ,然后点 editicon。 在“维”和“位置”折叠 面板中设置以下属 性:
    属性
    浮点数
    宽度
    10%
  3. 点按政 府批准的地址验证 ,然后点 editicon。 设置以下属性:
折叠 属性
尺寸及位置 浮点数
尺寸及位置 宽度 73%
尺寸及位置 边距
  • 左:10 px
尺寸及位置 高度 40px
尺寸及位置 边距
  • 对:2rem
  • 左:10rem
背景 背景颜色 FFFFFF
边框 边框宽度 1px
边框 边框样式 实线
边框 边框颜色 A7A9AC
边框 边框半径 7px
文本 字体系列 Arial
文本 字体颜色 BCBEC0
文本 字体大小 18px
文本 行高 2
  1. 点按提 交按钮 ,然后点 。 设置以下属性:
折叠 属性
尺寸和位置 浮点数
尺寸和位置 边距
  • 顶部:5rem
  • 对:14rem
  • 底部:20px
  • 左:20px
背景 背景颜色 F6921E
边框 边框颜色 F6921E

第5步:奖励部分:在自定义主题中使用Web字体

您可以使用各种字体来设计自适应表单。 在查看自适应表单的所有设备上可能没有用于设计自适应表单的字体。 您可以使用Web字体服务将所需的字体交付到目标设备。
Adobe Typekit是一种Web字体服务。 您可以配置服务并将其与自适应表单一起使用。 要在自适应表单中使用Adobe Typekit,请执行以下操作:
Typekit现在称为Adobe Fonts,包含在Creative Cloud和其他订阅中。 了解更多 .
  1. 创建 Adobe Typekit帐户 、创建工具包、将字体Myriad Pro添加到工具包、发布工具包并获取工具包ID。 需要在自适应表单中使用Adobe Typekit字体(Web字体)。
  2. 在AEM Forms服务器中,导航到 Adobe Experience Manager > HammerDeploymentTools > DeploymentServices > Adobe Experience Manager DeploymentServices的解调工具。 在云服务页面上,导航到第 三方服务 > Typekit ,然后单击Typekit下的 ​立即配置。 如果某个配置已可用,请单击+按钮以创建新实例。
    在“创建配置”对话框中,为配 置指定标题 ,然后单击“ 创建” 。 您将被重定向到配置页面。 在出现的编辑组件对话框中,提供您的 工具包ID ,然后单 击确定
  3. 配置主题以使用TypeKit配置。 在创作实例上,在主题 编辑器中打开 “全局主题”。 在主题编辑器中,导航到“主题选项” >“配置”。 在Typekit 配置字段中 ,选择工具包,然后单击 保存
    添加到Typekit的字体可在所有组件的“ Text ”折叠面板中进行选择。