设置自适应表单的样式

了解如何创建自定义主题、设置单个组件的样式，以及在主题中使用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. 从​自适应表单主题​字段中选择主题。 例如，调查主题。 点按以应用所选主题。

   

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

   

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

步骤2:更新自适应表单

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

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

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

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

   2. 点按标题组件中的徽标图像，然后点按 属性。 在image属性中，点按X以删除现有徽标图像。

   3. 点按​upload，选择logo.png，然后点按以保存更改。 在开始之前部分下载了该图像。

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

      

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

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

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

   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. 点按​主题选项 > 配置。 在​预览表单​字段中，选择​shipping-add-update-form​自适应表单，点按，点按​Save。 现在，主题编辑器配置为使用您自己的自适应表单，而不是默认的自适应表单。 点按​取消​以返回到主题编辑器。

   

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

   

   图： 使用默认表单的自适应表单

样式页眉和页脚

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

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

2. 在​Text​折叠面板中设置以下属性，然后点按。

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

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

4. 展开标题小组件的​Background​折叠面板，将​Background Color​设置为F6921E.

   将鼠标悬停在​Image & Gradient > + Add​上，点按​Image。 设置以下属性，然后点按。

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

5. 在主题编辑器中，点按标题中的徽标，然后点按​标题徽标。 展开“Dimension和位置”折叠面板，设置以下属性，然后点按。

   边距	值
   边距	顶部：1.5rem 底部：-35px 左：1rem 提示： 点按链 接图标，为每个字段提供不同的值。
   高度	4.75rem

6. 点按页脚小组件，然后点按​页脚。 展开​Background​折叠面板，将​Background Color​设置为F6921E，然后点按。

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

您可以在自适应表单中使用多个组件来捕获数据。 例如，文本框和数字框。 您可以提供与所有数据捕获组件相同的样式，也可以为每个组件提供单独的样式。 在本教程中，数字框（客户ID、邮政编码）和文本框（客户ID、名称、送货地址、状态、电子邮件）应用了相同的样式。 要设置数据捕获组件的样式，请执行以下操作：

1. 点按​客户ID​字段，然后点按​字段小组件​选项。 设置以下属性，然后点按。

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

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

   

设置按钮的样式

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

1. 点按​Submit​按钮，然后点按​Button​选项。 设置以下属性，然后点按。

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

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

   

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

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

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

2. 在顶部栏中，选择​Style​选项。

   

3. 点按​Attach​按钮，然后点按图标。 在​Dimension和位置​折叠面板中设置以下属性：

   属性	值
   浮点数	左
   宽度	10%

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

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

5. 点按​Submit​按钮，然后点按图标。 设置以下属性：

   折叠	属性	值
   Dimension和位置	浮点数	右
   Dimension和位置	边距	顶部：5rem 对：14rem 底部：20px 左：20px
   背景	背景颜色	F6921E
   边框	边框颜色	F6921E

   

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

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

Adobe Fonts 是web字体服务。您可以对自适应表单配置并使用该服务。 要在自适应表单中使用Adobe Fonts，请执行以下操作：

1. 创建Adobe Fonts帐户，创建套件，将字体Myriad Pro添加到套件，发布套件，并获取套件ID。 需要在自适应表单中使用Adobe Fonts（Web字体）。

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

   在创建配置对话框中，为配置指定​标题 ，然后单击​创建。 系统会将您重定向到配置页面。 在出现的编辑组件对话框中，提供您的​工具包ID，然后单击​确定。

3. 配置主题以使用Adobe Fonts配置。 在创作实例中，打开主题编辑器中的​全局主题。 在主题编辑器中，导航到​主题选项 > 配置。 在​Adobe Fonts配置​字段中，选择工具包，然后单击​保存。

   添加到​Adobe Fonts​的字体可在所有组件的​Text​折叠面板中进行选择。