建立標準表單

本文將依照編輯器呈現的順序，逐步說明整個表單。

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 表單：適用於企業買家的範本