设置自适应表单的样式

了解如何创建自定义主题、设计各个组件的样式以及在主题中使用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. 点按header组件中的徽标图像，然后点按 属性。 在image属性中，点按X以删除现有标志图像。

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

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

      

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

   

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

   

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

样式页眉和页脚

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

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

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

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

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

4. 展开头构件的​Background​折叠面板，将​Background Color​设置为F6921E.

   将指针悬停在​图像和渐变 > +添加​上，点按​图像。 设置以下属性，然后点按。

   属性	值
   图像	上传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​字段上方的空白区域，然后点按​响应式面板容器。 将​背景 > 背景颜色​设置为F1F2F2。 点按。

   

设置按钮的样式

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

1. 点按​提交​按钮并点按​按钮​选项。 设置以下属性，然后点按。

   折叠	属性	值
   背景	背景颜色	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. 在顶栏上，选择​样式​选项。

   

3. 点按​连接​按钮并点按图标。 在​Dimension和Position​折叠面板中设置以下属性：

   属性	值
   浮点数	左
   宽度	10%

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

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

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

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

   

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

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

Adobe Fonts 是web字体服务。您可以配置和使用带有自适应表单的服务。 要在自适应表单中使用Adobe Fonts:

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

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

   在“创建配置”对话框中，指定配置的​标题，然后单击​创建。 您将被重定向到配置页面。 在显示的编辑组件对话框中，提供​工具包ID​并单击​确定。

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

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