设置自适应表单的样式

了解如何创建自定义主题、设计各个组件的样式以及在主题中使用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 edit。 将标题文本更改为we retail。 仅对we retail中的we应用粗体格式。

    we-retail-logo-text

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

    1. 点按客户ID字段，然后点按cmppr属性。
    2. 将​标题​字段的内容复制到​占位符文本​字段。
    3. 删除​标题​字段的内容，然后点按aem_6_3_forms_save。
    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​自适应表单，点按aem_6_3_forms_save，点按​保存。 现在，主题编辑器已配置为使用您自己的自适应表单而不是默认的自适应表单。 点按​取消​以返回主题编辑器。

    自定主题

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

    create-a-theme

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

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

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

  2. 在​Text​折叠面板中设置以下属性，然后点按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.5rem
  • 底部：-35px
  • 左：1rem

提示： 点按 链接图标可为每个字段提供不同的值。
高度 4.75rem
  1. 点按页脚构件，然后点按​页脚。 展开​Background​折叠面板，将​Background Color​设置为F6921E，然后点按aem_6_3_forms_save。

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

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

  1. 点按客户ID字段，然后点按​字段构件​选项。 设置以下属性，然后点按aem_6_3_forms_save。
折叠 属性 值
边框 边框颜色 A7A9AC
边框 边框半径
  • 顶部：7px
  • 对：7px
  • 底部：7px
  • 左：7px
文本 字体系列 Arial
文本 字体颜色 939598
文本 字体大小 18px
Dimension和位置 宽度 60%
Dimension和位置 边距
  • 左：10rem

  1. 点按客户ID字段上方的空白区域，然后点按​响应式面板容器。 将​背景 > 背景颜色​设置为F1F2F2。 点按aem_6_3_forms_save。

设置按钮的样式

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

  1. 点按​提交​按钮并点按​按钮​选项。 设置以下属性，然后点按aem_6_3_forms_save。
折叠 属性 值
背景 背景颜色 F6921E
边框
 边框颜色 F6921E
边框 边框半径
  • 顶部：7px
  • 对：7px
  • 底部：7px
  • 左：7px
文本
 字体系列 Arial
文本 字体颜色 FFFFFF
文本 字体大小 18px

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

    style-data-capture-components

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

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

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

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

    样式选项

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

    属性 值
    浮点数 左
    宽度 10%

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

折叠 属性 值
尺寸及位置 浮点数 左
尺寸及位置 宽度 73%
尺寸及位置 边距
  • 左：10px
尺寸及位置 高度 40px
尺寸及位置
 边距
  • 对：2rem
  • 左：10rem
背景 背景颜色 FFFFFF
边框 边框宽度 1px
边框 边框样式 实线
边框 边框颜色 A7A9AC
边框 边框半径 7px
文本 字体系列 Arial
文本 字体颜色 BCBEC0
文本 字体大小 18px
文本 行高 2
  1. 点按​提交​按钮并点按aem_6_3_edit图标。 设置以下属性：
折叠 属性 值
Dimension和位置 浮点数 右
Dimension和位置 边距
  • 顶部：5rem
  • 对：14rem
  • 底部：20px
  • 左：20px
背景 背景颜色 F6921E
边框 边框颜色 F6921E

steed-adaptive-form-1

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

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

Adobe Typekit是一种Web字体服务。 您可以配置和使用带有自适应表单的服务。 以自适应形式使用Adobe Typekit:

注意

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

  1. 创建Adobe Typekit帐户，创建工具包，将字体MyriadPro添加到工具包，发布工具包，并获取工具包ID。 需要以自适应形式使用Adobe Typekit字体（Web字体）。

  2. 在AEM Forms服务器中，导航到adobeexperiencemanager​Adobe Experience Manager>工具锤子>部署>Cloud Services。 在Cloud Services页面上，导航到​第三方服务 > Typekit，然后单击Typekit下的​立即配置。 如果某个配置已可用，请单击+按钮以创建新实例。

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

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

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

在此页面上