使用指南/创建内容/区块/设计您的联系表单

设计您的联系表单

添加联系表单后,您可以自定义其外观。本指南将向您介绍如何更改网站表单的样式、颜色和布局。

选择表单设计

表单区块包含不同设计样式的表单供您选择:

  1. 在编辑器的左上角选择列表视图。这个图标看起来像三条彼此平行的水平线。
  2. 在此处找到表单区块,然后点击它:
表单区块在列表视图中显示为选中状态。
  1. 在右侧边栏的区块设置中,点击样式选项卡(显示为一个黑白圆圈图标):
样式图标突出显示。
  1. 选择一种样式:
    • 默认:在输入字段外显示字段名称,没有动画。
    • 动画:在输入字段内显示字段名称,附有简短动画,并突出显示访客点击的字段。
    • 轮廓:在输入字段内显示字段名称,附有简短动画,并始终显示表单区块设置的轮廓。
  2. 点击屏幕顶部的“保存”按钮。

在表单中加入占位符文本

占位符文本是表单字段中显示的示例文本,访客点击字段前可见,开始输入文本时即自动消失。占位符文本能向访客直观展示您希望他们在表单中输入的内容类型示例。

要在联系表单中添加占位符文本,请执行以下步骤:

  1. 点击表单中的任何字段。
  2. 在边栏中打开区块设置
  3. 向下滚动到“占位符文本”设置。
  4. 在提供的框中输入您的占位符文本。然后,该文本就会显示在表单字段中。
  5. 点击屏幕顶部的“保存”按钮。
显示占位符文本的表单。
每个字段都包含占位符文本的表单

更改表单字段的宽度

默认情况下,表单中的字段将占满表单容器的宽度。您可以按照以下步骤更改各个字段的宽度:

  1. 点击表单中的任何字段。
  2. 在边栏中打开区块设置
  3. 向下滚动到“宽度”设置,将宽度设置为 25%、50%、75% 或 100%。
    • 如果您想让两个字段并排显示,请将每个字段的宽度设置为 50%。如果空间足够,一行可以显示多个字段。
  4. 点击屏幕顶部的“保存”按钮。

同步所有字段的样式

您可以选择编辑各个表单字段的颜色与文本显示方式,也可以为所有表单字段使用相同的颜色及文本设置。

点击单个表单字段时,区块设置将包含“同步字段样式”切换按钮。如果此按钮处于“开启”状态,则您对此字段所做的更改将影响所有字段。如果您只想更改该字段的设置,请点击按钮将其调整为“关闭”状态:

字段已选中,箭头指向“同步字段样式”设置。

您可以将以下更改同步至所有字段,以确保整个表单保持统一的视觉体验:

  • 颜色:设置以下元素的颜色:
    • 标签文本:显示在表单字段上方的文本。
    • 字段文本:占位符文本(可选)以及字段中的输入文本。
    • 字段背景:表单字段输入部分的背景。
    • 边框:表单字段周围的边框。
  • 输入字段样式:设置字段的文本大小、行高和边框样式。
  • 标签样式:设置字段标签的文本大小和行高。

更改表单颜色

要调整表单的颜色,请执行以下步骤:

  1. 打开列表视图,找到表单区块及其中的各个字段:
表单区块在列表视图中显示为选中状态。
  1. 选中整个表单区块后,打开边栏中的区块设置,然后点击样式选项卡(黑白圆圈图标)。
  2. 通过使用颜色设置,您可以控制表单文本的颜色、背景颜色以及表单所用链接的颜色:
表单区块设置“样式”选项卡中的文本、背景和链接颜色设置。
  1. 接下来,点击单个表单字段,再次打开区块设置
  2. 您可以在此处控制每个表单字段以下元素的颜色:
    • 标签文本:显示在表单字段上方的文本。
    • 字段文本:占位符文本(可选)以及字段中的输入文本。
    • 字段背景:表单字段输入部分的背景。
    • 边框:表单字段周围的边框。
  3. 启用同步字段样式”选项可将更改应用到所有字段,禁用此选项即可单独控制每个字段。
  4. 点击屏幕顶部的“保存”按钮。
Copied to clipboard!