设置自适应表单的样式

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

本教程是创建第一个自 适应表单系列中的一个步骤 。 建议按照时间顺序按照系列来了解、执行和演示完整的教程用例。

关于教程

您可以使用主题为自适应表单提供独特的外观和样式。 您可以应用随自适应表单编辑器提供的现成主题,或创建您自己的自定义主题。 AEM Forms 提供一 个主题编辑器 ,用于创建自定义主题。 单个主题可以为在手机、平板电脑或桌面上打开的同一自适应表单提供不同的外观。 使用主题编辑器不需要任何CSS或LESS知识,但是是需要的。

在教程结束时,您将学习:

  • 将开箱即用主题应用于自适应表单
  • 使用主题编辑器创建自适应表单的主题
  • 设置单个组件的样式
  • 奖励部分:在自定义主题中使用Web字体

完成教程后,表单的外观将类似于以下内容:

具有自定义主题的表单

Before you start

在您的本地机器上下载标题样式和徽标图像,如下所示。 自适应表单 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. 对表单中的所有文本框、数字框和电子邮件字段重复前三个步骤。

      更新的自适应表单

第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-address-add-update-form自适应表单,点按 aem_6_3_forms_save ,点按​保存。 现在,主题编辑器已配置为使用您自己的自适应表单而不是默认的自适应表单。 点按 取消 ,以返回主题编辑器。

    自定主题

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

    create-a-theme

    **图:**具有默认表单的自适应表单

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

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

  2. 在“文本”折叠 面板中 ,设置以 下属性,然后点按aem_6_3_forms_save

    属性
    字体系列 Arial
    字体颜色 FFFFFF
    字体大小 54px
  3. 点按标 头构件 ,然后点 按标题。 用于设置标题构件样式的选项显示在左侧。 展开 Dimension和位置 ,将Height设置为 ,然 后点 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
  6. 点按页脚构件并点 按页脚。 展开 Background accordion,将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
  2. 点按客户ID字段上方的 空区 ,然后点 按响应式面板容器。 将“背 ”> “背景颜色 ”设置为F1F2F2。 点 按aem_6_3_forms_save

设置按钮样式

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

  1. 点按提 交按 钮,然后点 按按钮 。 设置以下属性, 然后点按aem_6_3_forms_save

    折叠 属性
    背景 背景颜色 F6921E
    边框
    边框颜色 F6921E
    边框 边框半径
    • 顶部:7px
    • 对:7px
    • 底部:7px
    • 左:7px
    文本
    字体系列 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. 在顶栏上,选择“样 ”选项。

    样式选项

  3. 点按 附加 按钮,然 后点按aem_6_3_editicon。 在Dimension和位置折叠面 板中设置以 下属性:

    属性
    浮点数
    宽度 10%
  4. 点按政 府批准的地址验证 ,然后点 按aem_6_3_editicon。 设置以下属性:

    折叠 属性
    尺寸及位置 浮点数
    尺寸及位置 宽度 73%
    尺寸及位置 边距
    • 左:10px
    尺寸及位置 高度 40px
    尺寸及位置
    边距
    • 对:2rem
    • 左:10rem
    背景 背景颜色 FFFFFF
    边框 边框宽度 1px
    边框 边框样式 实线
    边框 边框颜色 A7A9AC
    边框 边框半径 7px
    文本 字体系列 Arial
    文本 字体颜色 BCBEC0
    文本 字体大小 18px
    文本 行高 2
  5. 点按 提交 按钮,然后 点按aem_6_3_edit图标 。 设置以下属性:

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

    steed-adaptive-form-1

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

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

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

注意

typekit-to-adobe-fonts现在称为 “Adobe Fonts Typekit ”,随Creative Cloud和其他订阅提供。 了解更多.

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

  2. 在AEM服务 Forms 器中,导航到 adobeexperiencemanager Adobe Experience Manager > Adobeemer Tools > Adobe Fonts。 现在,打开一个配置文件夹。 如果某个配置已可用,请单击“ 创建 ”按钮以创建新实例。

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

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

    添加到Adobe Fonts的 字体 ,可在所有组件的 Text accordion中进行选择。

在此页面上