添加联系表单后,您可以自定义其外观。本指南将向您介绍如何更改网站表单的样式、颜色和布局。
表单区块包含不同设计样式的表单供您选择:
- 在编辑器的左上角选择列表视图。这个图标看起来像三条彼此平行的水平线。
- 在此处找到表单区块,然后点击它:

- 在右侧边栏的区块设置中,点击样式选项卡(显示为一个黑白圆圈图标):

- 选择一种样式:
- 默认:在输入字段外显示字段名称,没有动画。
- 动画:在输入字段内显示字段名称,附有简短动画,并突出显示访客点击的字段。
- 轮廓:在输入字段内显示字段名称,附有简短动画,并始终显示表单区块设置的轮廓。
- 点击屏幕顶部的“保存”按钮。
占位符文本是表单字段中显示的示例文本,访客点击字段前可见,开始输入文本时即自动消失。占位符文本能向访客直观展示您希望他们在表单中输入的内容类型示例。
要在联系表单中添加占位符文本,请执行以下步骤:
- 点击表单中的任何字段。
- 在边栏中打开区块设置。
- 向下滚动到“占位符文本”设置。
- 在提供的框中输入您的占位符文本。然后,该文本就会显示在表单字段中。
- 点击屏幕顶部的“保存”按钮。

默认情况下,表单中的字段将占满表单容器的宽度。您可以按照以下步骤更改各个字段的宽度:
- 点击表单中的任何字段。
- 在边栏中打开区块设置。
- 向下滚动到“宽度”设置,将宽度设置为 25%、50%、75% 或 100%。
- 如果您想让两个字段并排显示,请将每个字段的宽度设置为 50%。如果空间足够,一行可以显示多个字段。
- 点击屏幕顶部的“保存”按钮。
您可以选择编辑各个表单字段的颜色与文本显示方式,也可以为所有表单字段使用相同的颜色及文本设置。
点击单个表单字段时,区块设置将包含“同步字段样式”切换按钮。如果此按钮处于“开启”状态,则您对此字段所做的更改将影响所有字段。如果您只想更改该字段的设置,请点击按钮将其调整为“关闭”状态:

您可以将以下更改同步至所有字段,以确保整个表单保持统一的视觉体验:
- 颜色:设置以下元素的颜色:
- 标签文本:显示在表单字段上方的文本。
- 字段文本:占位符文本(可选)以及字段中的输入文本。
- 字段背景:表单字段输入部分的背景。
- 边框:表单字段周围的边框。
- 输入字段样式:设置字段的文本大小、行高和边框样式。
- 标签样式:设置字段标签的文本大小和行高。
要调整表单的颜色,请执行以下步骤:
- 打开列表视图,找到表单区块及其中的各个字段:


- 接下来,点击单个表单字段,再次打开区块设置。
- 您可以在此处控制每个表单字段以下元素的颜色:
- 标签文本:显示在表单字段上方的文本。
- 字段文本:占位符文本(可选)以及字段中的输入文本。
- 字段背景:表单字段输入部分的背景。
- 边框:表单字段周围的边框。
- 启用“同步字段样式”选项可将更改应用到所有字段,禁用此选项即可单独控制每个字段。
- 点击屏幕顶部的“保存”按钮。