创建标准表单

本页按编辑器呈现的顺序，带您完整走一遍整个表单。

1. 打开 Customize 编辑器

   进入 Quote settings。在 Request a Quote 页面中找到 Customize 卡片，然后点击 Customize。编辑器会全屏打开。

2. 打开 Quote form 标签页

   编辑器有四个标签页：Button & widget、Quote form、Quote cart page 和 Success message。打开 Quote form。

3. 从模板开始

   Form template 显示您的表单所基于的模板，并简要说明它适合哪类商家。

   点击 Change。随即打开选择器，标题为 Choose a form template，并附有提示“Select a starting point. The form fields will change only after you confirm.”共有三个模板：

   模板	应用的描述	标记
   Simple quote form	“Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload.”	Fast setup · 7 fields
   Detailed quote form	“For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance.”	More details · 14 fields
   B2B customer form	“For wholesale or business buyers who need company, shipping, billing, and payment term information”	B2B

   选择描述与您报价业务相符的模板，然后点击 Use this template 确认。点击 Cancel 则保持您当前的表单不变。请现在就选好，再开始编辑字段。

   

   从模板开始，而不是从空白表单开始。

   警告

   选择其他模板会替换当前的字段列表。屏幕上的部分和字段会被换成新模板自带的内容，因此您添加的任何部分、重命名的任何字段以及删除的任何内容都会随之消失。请先选择模板，再进行自定义。

4. 决定表单是否显示在产品页面上

   在 Product page form display（“Show the quote form directly on product pages”）下，如果希望客户无需离开产品页面就能填写表单，请勾选 Enable product page form display。

   勾选后会显示 Form position on product page，这是一个有三个选项的下拉菜单：

   位置	表单出现的位置
   Below Add to Cart button	页面靠上，就在购买按钮下方，是最醒目的选项。
   Below product description	在销售文案之后，适合已阅读过文案的买家。
   Below product information	在产品信息区块的末尾。

   

   如果您希望客户先创建报价购物车，请关闭此设置。

5. 逐项设置 Form builder

   Form builder（“Manage sections, rows, fields, and validation with the visual form builder”）存放您的问题，并按部分分组。有哪些部分取决于您刚刚选择的模板：

   模板	构建器中的部分
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   您可以对某个部分进行三项操作：

   • 开启或关闭。 打开该部分的设置，勾选或取消勾选 Enable。被禁用的部分不会向客户显示，不论其中有多少字段。
   • 重命名。 同一设置面板中有 Label，可改成您的买家惯用的称呼。
   • 移动。 拖动该部分的手柄，即可调整表单顺序。

   点击箭头展开某个部分即可查看其中的字段，使用 Add element 可向该部分添加另一个字段。

   联系方式和地址字段详见客户信息字段；公司、账单和付款条款详见创建 B2B 表单。

   注意

   如果构建器控件呈灰色，并带有挂锁提示行“🔐 This feature is available on …”，表示该功能属于更高级别的套餐。一切运行正常，请在应用中打开 Pricing plans，查看您的套餐包含什么。

6. 编辑字段

   点击构建器中的任意字段，即可打开其自己的设置，标题为该字段的名称以及“Customize how this field appears on the form.”

   设置	作用
   Label	客户看到的文字。这是商家最常更改的设置。
   Hide label	保留字段，但去掉其上方的标签。
   Placeholder	空输入框内的灰色示例文字。可用它说明您想要的格式，“e.g. 500 units”比空白框更好。
   Help text	字段下方的一行文字，用于放不进占位文字的较长内容。
   Type	字段的类型，以及客户可以在其中输入的内容。
   Required	没有填写则无法提交表单。请尽量减少必填字段，只保留您能接受的数量。
   Options / Add option	下拉选择、单选组或复选组中的选项。
   Choose default value	表单加载时字段的初始值。
   Limit characters	开启 Min characters 和 Max characters。
   Column width	字段占据一行的多少宽度，这样两个较短的字段可以并排显示。
   Custom HTML class	供您自己的 CSS 使用的类名，请参阅添加自定义 CSS。
   Remove	删除字段。仅适用于您自己添加的字段：内置的联系方式和地址字段受到保护，没有 Remove。

   

   点击每个元素并进一步设置（如有需要）

   最后点击字段面板中的 Save changes，或点击 Cancel 放弃编辑。

   警告

   Limit characters 会在您输入时进行验证：Min characters 和 Max characters 都必须是 0 或更大的整数，且最小值不能大于最大值。如果填写有误，编辑器会阻止保存。

7. 按您想要的顺序排列字段

   字段通过拖动来重新排序。抓住某一行左端的拖动手柄，将字段放到您想要的位置。各部分有自己的拖动手柄，移动方式相同。

   顺序比看起来更重要：先询问送货邮编再询问姓名的表单，读起来像数据库，而不像对话。

   

   拖放元素即可更改其在报价表单中的位置或顺序

8. 添加您自己的问题

   Extra info 一开始包含您所选模板放入的内容，各模板不同。Simple quote form 自带 Quantity 和 Upload files；Detailed quote form 自带 Project detail 和 Delivery service；B2B customer form 自带 Message。

   使用 Add element 可添加您需要的任何其他内容，例如交货周期、送达日期或项目编号。

   如果有一组问题属于同一类，又不适合放入现有部分，请使用 Add section 创建新的部分。

   危险

   有一个字段是必需的：表单中必须包含一个 name 中带有 email 一词的元素。应用会阻止保存并告知您：Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. 没有它，您报价的任何内容都无法送达客户。

   

   点击 Add element 可向报价表单添加更多自定义字段

   

9. 设置表单样式

   Style 显示您的表单当前使用的预设，旁边的 Change 按钮可打开其余预设。这些预设包括 Material filled、Classic、Flat、Flat round、Classic round、Line、Line round 和 Material outlined，每个都以输入框的小图展示，因此请凭视觉选择，而不是看名称。

   旁边是 Match theme styling if possible。勾选后，表单会改用您模板自身的字体和输入框，这通常是让表单看起来不突兀的最短路径。应用提示“Theme styling applies on your storefront and is not shown in this preview”，因此请在店面上而不是这里评估该效果。

   Customize text 用于设置 Font style、Title bar font size 和 Title bar font weight。Customize form color 用于设置各项颜色，即 Title bar color、Title bar background、Color、Background color、Border color、Button color、Button background color、Button border 和 Quote popup primary color。

   

   详细说明：匹配您的模板样式。

10. 在 Preview 中回看表单

    Preview 面板位于编辑器旁边，会随您的操作重新绘制。保存之前，值得使用其工具栏上的两个控件：

    • 客户状态按钮，用于在 Guest 和 Logged-in 之间切换预览，两者看到的表单不同。
    • 桌面和移动端切换，因为较长的表单在手机上是另一番景象。

11. 保存并亲自测试

    更改任何内容后，Shopify 的保存栏会出现，带有 Save 和 Discard changes。点击 Save。如果某个字段仍有验证错误，编辑器会拒绝保存并提示“Please resolve validation errors before saving.”，请修复它指出的字段后再次保存。

    然后前往您的店面，提交一份真实的测试请求。检查它是否出现在 Quote list 中，且包含您预期的所有内容。

    

    店面上的表单，Quote form appearance 设置为 Multiple step。

注意

模板设定的是您的起点，而不是上限。模板带入的任何内容都可以编辑或删除，模板没有的内容可以用 Add element 或 Add section 添加。只需记住，之后切换模板是重新开始而不是编辑，它会替换您已创建的字段列表。

警告

上线前请务必亲自提交一份测试请求。这是确认字段、邮件和报价记录彼此一致的唯一方法。

其余设置在哪里

Quote form 标签页只涉及问题。商家在这里想找的几项内容，位于同一编辑器的其他标签页：

您想要的功能	标签页	您会看到什么
将表单显示为单页或分步	Quote cart page	Quote form appearance（“Controls how the quote form looks on the quote cart page”），可设置为 Multiple step 或 Single page。
产品行显示的内容	Quote cart page	Product list columns（“The product details shown as columns in the customer's quote cart”），请参阅报价产品分组。
允许客户为产品分组	Quote cart page	Enable Quote Sections（“Lets customers group the products in their quote cart into named sections”），请参阅报价产品分组。
按钮的文字和位置	Button & widget	按钮文字、点击操作、按钮位置以及谁可以看到它。
提交后会发生什么	Success message	感谢文字和 Redirect to custom URL。

注意

如果您在编辑过程中尝试切换标签页，编辑器自己也会提醒您：“Save your changes before switching tabs to avoid losing them.”

后续步骤

• 客户信息字段：微调您要询问的内容
• 报价产品分组：报价购物车页面上的产品列和报价分组
• 添加 reCAPTCHA：保护表单免受垃圾信息侵扰
• 创建 B2B 表单：面向批发买家的模板