设计表单

Sami B2B Onboarding 中的 Appearance 设置会改变整个表单的外观：字体、字号、宽度、字段样式和颜色。这些设置只应用于单个表单，因此每个表单都可以有自己的外观，并且不会更改您的模板。

打开 Appearance 设置

1. 打开表单

   前往 Forms，点击表单旁边的 Edit。构建器会打开。

2. 打开 Appearance

   在左侧栏中点击 Appearance。面板会列出下面的所有设置，您更改设置时，中间的预览会随之变化。

   

   每项 Appearance 设置都会立即改变预览。

3. 保存

   表单外观满意后，点击保存栏中的 Save。如果表单已发布，买家下次打开时就会看到新的外观。

Appearance 设置

设置	更改的内容	默认值
Font	整个表单的字体。打开 Select font 面板。	Theme default
Font size scale	表单所有文字的大小，为模板字号的 80% 至 130%，每档 5%。	100%
Width	表单的最大宽度，单位为 px（320 至 1200）或所在空间的 %（30 至 100）。表单居中显示，在小屏幕上会变窄。	640 px
Layout	Default 将字段直接放在页面上。Boxed 将表单放在独立的卡片中，带有内边距和边框。	Default
Style	每个字段框的外观。请参阅字段样式。	Classic
Field spacing	字段之间的间距：Comfortable 或 Compact。	Comfortable
Color scheme	表单的背景、文字和按钮颜色。请参阅颜色。	Default
CSS class	为表单添加您自己的类名，以便模板中的样式可以针对它，例如 wholesale-form。	空

当您在 Width 的 px 和 % 之间切换时，它会重新从 640 px 或 100% 开始。

选择字体

1. 打开字体列表

   在 Appearance 中，点击 Font 框。Select font 面板会打开。

2. 查找字体

   在 Search 中输入，或滚动查找。列表分为两组：

   • System fonts：Theme default（您的模板已在使用的字体），然后是 System UI、Helvetica、Arial、Georgia、Times New Roman 和 Monospace。这些字体无需额外加载。
   • Other fonts：近 1,000 种网页字体。每种字体都以其自身的字体样式显示。它们在您的店面中从 Google Fonts 加载，可能会使页面加载稍慢一些。

3. 选择字体及字重

   点击一种字体。预览会立即变化。如果该字体有多种字重，请在面板底部的 Weight 列表中选择一种，例如 Regular、Bold 或 Italic。点击 Done。

   Font 下方的说明会确认您的选择，例如 Bold. Loads from Google Fonts on the storefront.

字段样式

点击 Style 框可查看全部八种样式，每种都以 Company name 字段示例绘制。点击其中一种，即可应用到表单中的每个字段。

样式	字段的外观
Material filled	灰色框，标签位于框内顶部。
Material outlined	带边框的框，标签位于其上边缘。
Classic	柔和的灰色框，带有淡淡的阴影和圆角。默认样式。
Classic rounded	Classic 样式，单行框为完全圆角。
Flat	灰色框，直角且无阴影。
Flat rounded	Flat 样式，单行框为完全圆角。
Line	答案下方只有一条线。
Line rounded	外观与 Line 相同：下划线没有可圆化的角。

在圆角样式中，包含多行的框（例如 Long text）会保持柔和的圆角，而不是完全圆角。

每张卡片显示字段在该样式下的外观。

颜色

Color scheme 一行显示十种现成的配色方案：Default、Forest Light、Cool Ocean、Matcha Calm、Warm Sand、Blush、Slate、Charcoal、Forest Dark 和 Midnight。每个色块显示其背景、文字和按钮颜色。点击其中一个即可使用。

• Default 使用页面自身的颜色，因此表单会与您的模板保持一致。如需更改这些颜色，请更改模板的设置。
• 其他任何方案都会在表单后面绘制其自己的背景。按钮和步骤标记会使用该方案的按钮颜色。

自定义颜色

1. 打开配色方案

   在色块下方，点击 Edit scheme。Editing 面板会为您选择的方案打开，例如 Editing Warm Sand。

2. 更改颜色

   点击某个颜色以打开取色器。在方块和色条中拖动，输入十六进制代码，或者在浏览器支持时使用吸管从屏幕上取色。您可以设置的颜色：

   颜色	作用范围
   Background	表单后面。
   Text	标签、标题和答案。
   Solid button background	主要按钮（例如 Submit application）和步骤标记。
   Solid button label	这些按钮上的文字。
   Outline button	轮廓按钮的边框，例如 Back。

   Background、Text 和 Outline button 可以显示为 Theme color，表示表单在该处使用您模板的颜色。

   只要您更改任何颜色，方案就会变为 Custom，并且一行中会增加一个 Custom 色块。这些颜色仅应用于此表单。您模板自带的配色方案不会改变。

   

   更改任意颜色，表单就会获得自己的 Custom 方案。

3. 关闭或重置

   关闭面板即可保留您的颜色。如需恢复为模板的颜色，请点击面板底部的 Remove color scheme：表单会恢复为 Default。

添加您的 Logo

Logo 位于表单页眉中，在标题上方。

1. 打开页眉

   在左侧栏中点击 Elements，然后点击列表顶部的 Header。

2. 上传 Logo

   开启 Show store logo，然后点击 Upload image 并选择文件。文件必须是 1 MB 或更小的 .jpg、.png 或 .svg 图片。大约 200×60 px 的尺寸最合适。

   如需之后更改，请点击 Replace image。如需移除，请点击 Remove。

3. 保存

   点击保存栏中的 Save。

检查设计

构建器中的预览使用与您的店面相同的代码绘制表单，因此您看到的布局、字段样式、间距和配色方案就是买家看到的效果。

• 使用预览上方的 Desktop preview 和 Mobile preview 按钮，检查两种屏幕尺寸。
• 交给模板决定的设置，即字体的 Theme default 和颜色的 Default，在店面中会使用模板的字体和颜色。如需查看，请点击工具栏中的 Preview（眼睛按钮）。它会在新标签页中打开表单在您商店中的页面，显示的是最后一次保存的状态。

后续步骤

• 构建您的表单：设置每个字段的宽度、标签和占位符。
• 买家提交之后：编写买家提交此表单后看到的感谢页面。
• 将表单添加到您的商店：将完成的表单放在页面、模板区块或任何支持 HTML 的位置。