设置自适应表单的样式

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

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

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

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

3. 选择​ 上传，选择logo.png，然后选择 以保存更改。 图像下载到开始之前。

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

   

移除标题并添加占位符文本：

1. 选择“客户ID”字段，然后选择 属性。

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

3. 删除​ Title ​字段的内容，然后选择 。

4. 对表单中的所有文本框、数字框和电子邮件字段重复前三个步骤。

   

登录到AEM创作实例并导航到​ Adobe Experience Manager > Forms > 主题。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。

选择​ 创建 ​并选择​ 主题。 此时将显示创建主题页面，其中包含创建主题所需的字段。 Title ​和​ Name ​字段是必填字段：

• 标题： ​指定主题的标题。 例如，全局主题。 ​标题可帮助您从主题列表中识别主题。
• 名称： ​指定主题的名称。 例如，Global-Theme。 ​在存储库中创建具有指定名称的节点。 当您开始键入标题时，将自动生成“名称”字段的值。 您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。所有无效的输入都将替换为连字符。

选择​ 创建。将创建一个主题，并出现一个对话框以打开表单进行编辑。 选择​ 打开 ​以在新选项卡中打开新创建的主题。 主题将在主题编辑器中打开。 对于样式，主题编辑器使用AEM Forms随附的现成自适应表单。

有关使用主题编辑器UI的信息，请参阅关于主题编辑器。

选择​ 主题选项 > 配置。 在​ 预览表单 ​字段中，选择​ shipping-address-add-update-form ​自适应表单，选择 ，然后选择​ 保存。 现在，主题编辑器配置为使用您自己的自适应表单，而不是默认的自适应表单。 选择​ 取消 ​以返回主题编辑器。

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

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

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

在​ 文本 ​折叠面板中设置以下属性，然后选择 。

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

展开标题小组件的​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E.

将鼠标悬停在​ 图像和渐变 > +添加 ​上，选择​ 图像。 设置以下属性并选择 。

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

选择页脚小组件并选择​ 页脚。 展开​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E，然后选择 。

选择​ 客户ID ​字段并选择​ 字段小组件 ​选项。 设置以下属性并选择 。

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

选择​ 提交 ​按钮并选择​ 按钮 ​选项。 设置以下属性并选择 。

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

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

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

选择​ 附加 ​按钮并选择 图标。 在​ Dimension和位置 ​折叠面板中设置以下属性：

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

选择​ 提交 ​按钮并选择 图标。 设置以下属性：