建置您的表單

建置工具是您決定申請表單要問什麼的地方。您可以新增欄位、將它們分組成列、把表單分成多個頁面，並設定每個欄位。中間的預覽會顯示買家在您商店中看到的表單樣貌。

注意

若要開啟建置工具，請前往 Sami B2B Onboarding 中的 Forms，並點擊表單旁的 Edit，或點擊表單的名稱。只有具備管理員角色的員工才能編輯表單。

建置工具一覽

區域	位置	用途
區段導覽列	最左側	在 Elements、Appearance、After submit、Email 和 Integrations 之間切換。Collapse 會將它收合成圖示。
Elements 面板	左側	表單的大綱：頂端是 Header，接著是 Content、每個頁面及其欄位和列、Add page，底部是 Footer。
預覽	中間	買家看到的表單。點擊欄位、頁面標題、標頭或按鈕即可選取。
設定面板	右側	選取項目時開啟，並顯示其設定。點擊 ×（Close）即可關閉。
工具列	預覽上方	Form name 欄位、Active 或 Draft 標記、…（More actions）、Language、桌面和行動裝置預覽按鈕、檢查工具按鈕，以及 Preview。

Elements 面板會依買家看到的順序，列出每個頁面、列和欄位。

導覽列中的其他區段各有專屬頁面：

區段	您在此設定的內容	進一步了解
Appearance	版面配置、寬度、字型、欄位樣式和顏色。	設計表單
After submit	感謝訊息，或要將買家導向的頁面。	買家送出之後
Email	誰會收到此表單的通知，以及此表單專屬的各封電子郵件版本。	編輯電子郵件範本和選擇誰接收通知
Integrations	回答在 Shopify 中的去向，以及 Klaviyo、webhook、地址自動完成和驗證碼。	將回答對應到 Shopify

新增欄位

1. 開啟欄位清單

   請使用離您最近的方式：

   • 在 Elements 面板中，點擊頁面名稱旁的 +（Add field），或頁面結尾的 Add field。在列內，點擊 Add element 即可將欄位加入該列。
   • 在預覽中，點擊頁面結尾的 Add a field。
   • 在預覽中，將游標移到欄位邊緣，並點擊出現的 +。其提示文字為 Add field above、Add field below、Add field to the left 或 Add field to the right。選擇左側或右側，會把新欄位與此欄位並排放在同一列。

2. 找到欄位

   捲動清單，或在 Search fields 中輸入以縮小範圍。

   

   欄位依類型分組，在地址區塊上點擊 Add all，即可一次加入完整的地址。

3. 加入欄位

   點擊該欄位。它會被加入頁面並處於選取狀態，其設定會在右側開啟。為它設定標籤並完成設定（請參閱欄位設定）。

警告

每份表單都會保留一個 Email 欄位，以及一個儲存為公司名稱的欄位。Email 欄位無法移除或隱藏；如果沒有任何欄位儲存為公司名稱，Save 會被拒絕，並顯示 Map a field to Company · Name.。

您可以新增的欄位

群組	欄位	買家取得的內容
Basic fields	Short text	單行文字欄位。
	Long text	可輸入多行的文字欄位。
	Number	只接受數字的欄位。
	Email	會檢查回答是否像電子郵件地址的欄位。
	Phone	電話號碼欄位，可選擇是否加上國旗、國碼和號碼檢查。
	Country	國家清單。
	State / province	在頁面上位於它之前的 Country 欄位所選國家的州或省清單。買家選擇有州或省的國家後才會顯示；如果它之前沒有 Country 欄位，則為一般文字欄位。
	Dropdown	可選擇一個選項的清單，或啟用 Allow multiple choices 後可選多個。
	Checkbox	單一勾選框，例如「I agree to the terms」。設為必填時，買家必須勾選。
	Checkboxes	買家可勾選任意數量選項的清單。
	Radio buttons	可選擇一個選項的清單，並可附帶買家自行輸入的 Other 選項。
	Date and time	日期選擇器、時間，或兩者皆有。
	File upload	上傳欄位。預設接受大小不超過 10 MB 的 PDF、JPG、JPEG 和 PNG 檔案。
Company fields	Company name	儲存為公司名稱的文字欄位。
	Tax ID	供填寫公司稅號或 VAT 號碼的文字欄位。應用程式的稅號檢查會讀取此欄位。
	Website	供填寫公司網站的文字欄位。
Document fields	Business license、Tax certificate、Tax registration、Reseller certificate	上傳欄位。檔案會以該類型的文件與申請一併保存。請參閱文件。
Static text	Heading	標題，下方可加上選填的說明文字。
	Paragraph	格式化文字，例如說明。
	HTML	您自己的 HTML 標記。
	Divider	一條水平線。
Address blocks	Shipping address	同一列中的十個欄位：Recipient / department、First name、Last name、Phone、Address line 1、Address line 2、City、Country、State / province 和 ZIP / postal code。點擊 Add all。
	Billing address	一個 Same as shipping address 勾選框，接著是十個帳單欄位（Department / attention、Billing first name 等），位於勾選框勾選時會隱藏的列中。點擊 Add all。
Layout	Row	用來放置欄位的空白列。請參閱將欄位分組成列。

若只想新增單一地址欄位，而不是整個區塊，請點擊 Address blocks 之下的 Show the individual address fields。在您對應之前，地址區塊所新增的欄位不會儲存到 Shopify。請參閱將回答對應到 Shopify。

欄位設定

在預覽或 Elements 面板中點擊欄位。其設定會在右側以區段形式開啟。您只會看到適用於該類型欄位的區段。

區段	設定
Content	Label，也就是買家閱讀的問題。Placeholder，空白欄位內的淡色文字。Help text，顯示在欄位下方。Default，表單開啟時預先填入的回答（單一 Checkbox 則為 Ticked by default）。
Options	適用於 Dropdown、Checkboxes 和 Radio buttons。點擊 Add option 或 Change 來編輯選項：輸入每個選項的 Label、拖曳以重新排序、Add another option，或用 Bulk add 一行輸入一個選項。Customer tags 會在選了該選項的買家獲得核准時，加到 Shopify 顧客上（每個最多 40 個字元）。關閉 Use the label as the value，即可儲存與買家所見不同的內容。Dropdown 另有 Allow multiple choices。Radio buttons 另有 Other option、Other label 和 Other placeholder。
Upload	適用於 File upload 和文件欄位。Accepted：Only certain file types（然後在 File types 中列出）或 Any file type。Max size：1 到 20 MB。Allow more than one file。
Phone number	Show country flag and dial code。開啟後：Check the number is valid 和 Default country（除非您另外選擇，否則為 From the buyer’s browser）。
Date and time	Asks for：Date、Time 或 Date and time。Date format、Time format、日期選擇器的 Other language，以及搭配 Earliest 和 Latest 的 Limit the range。
Validation	Required。開啟後有 Error message，在欄位留空時顯示；輸入 {{ label }} 即可帶入欄位的標籤。Limit characters 搭配 Min characters 和 Max characters，適用於 Short text、Long text、Email、Phone 和 Tax ID。限制留空即代表沒有限制。
Layout	Icon，顯示在欄位開頭（Checkbox、Checkboxes、Radio buttons 或上傳欄位不適用）。Hide label，附帶 Keep the label’s space 和 Still show the required mark。Column width，1 到 12。Number of options per line，1 到 5，適用於 Checkboxes 和 Radio buttons。
Visibility	Conditional display：依據先前的回答來顯示、隱藏、設為必填或停用欄位。請參閱以規則顯示、必填或停用欄位。
Custom CSS	Custom CSS class，一個可用您自己的佈景主題 CSS 設定樣式的類別名稱。只會保留單純的類別名稱。

對於 Dropdown、Country 和 State / province，預留位置文字是清單的第一行，預設為 Select…。如果您清空它，Select… 會自動恢復。

靜態文字的設定較少。Heading 的文字放在 Label 中，另有 Caption 和 Heading tag（Heading 1 到 Heading 6）。Paragraph 有 Text，HTML 有 Markup。它們的 Label 只是您在 Elements 面板中看到的名稱。所有靜態文字也都有 Column width、Visibility 和 Custom CSS。

欄位的設定分成數個區段，從買家閱讀的內容，到欄位何時顯示。

排列欄位

移動欄位

• 在 Elements 面板中： 拖曳欄位的把手。將它放在另一個欄位上，即可放置於其上方或下方；放在頁面名稱上，會移到該頁面的結尾；放在列的名稱上，則會放入該列。
• 在預覽中： 點擊欄位，然後拖曳其工具列左側的把手（Drag to move this field）。將它放在另一個欄位的上緣或下緣，即可放置於其上方或下方。放在左緣或右緣，則會讓兩者並排在同一列。

設定欄寬

寬度以 12 欄計算，每個新欄位一開始都是 12，也就是全寬。相鄰的欄位只要寬度合得下，就會共用一行，所以兩個寬度 6 的欄位會並排，三個寬度 4 的欄位會形成三欄。

• 在欄位設定中拖曳 Layout › Column width，或
• 點擊預覽中所選欄位工具列上的 Change width。它會依序切換為三分之一、一半和全寬。

當表單寬度小於 480 像素時，例如在手機上，每個欄位都會佔滿整行。

將欄位分組成列

列可以把欄位歸在一起，並可用標頭開啟，也就是欄位上方的標籤和說明。您可以一次顯示、隱藏或移動整列。

若要建立列，請執行下列其中一項：

• 開啟欄位清單，並點擊 Layout 之下的 Row。Elements 面板中會出現一個空白列。點擊其中的 Add element 即可加入欄位。
• 開啟欄位清單，並點擊 Select fields（頁面上有兩個以上不在列內的欄位時才會顯示）。在 Elements 面板中勾選欄位，然後點擊 Group into row。
• 在另一個欄位的左側或右側新增欄位，或在預覽中將欄位放到另一個欄位旁。

在 Elements 面板中點擊列的名稱，即可開啟其設定：

設定	作用
Label	列的標題。買家會在列的欄位上方看到它。
Hide the heading block	對買家隱藏標籤和說明。它們會被保留，關閉此選項後就會恢復。
Description	顯示在標籤下方的文字。
Icon	標籤旁的圖示。
Conditional display	依據先前的回答，顯示或隱藏整列。請參閱以規則顯示、必填或停用欄位。
Ungroup row	拆散此列。其欄位會保留在頁面上。

在 Elements 面板中，列的眼睛圖示會隱藏其所有欄位，Duplicate row 則會複製該列。若要將單一欄位移出列，請選取該欄位並點擊 Remove from row。

Wholesale application 表單使用隱藏標頭區塊的列，因為每個區段本來就以 Heading 欄位開頭。

使用多個頁面

1. 新增頁面

   點擊 Elements 面板底部的 Add page。系統會新增一個名為 Untitled page 2 的頁面，並開啟其設定。輸入新的 Page name 並按下 Enter。

2. 將頁面變成步驟

   在 Elements 面板中點擊 Content，並開啟 Show step progress bar。選擇 Step labels：Name and number、Name only 或 Number only。

   買家現在會一次看到一個頁面，頂端有步驟列。每個頁面結尾都有一個 Continue 按鈕，會在前進之前檢查該頁面的回答，最後一頁則以送出按鈕結尾。沒有步驟列時，所有頁面會在同一份表單上依序顯示。

3. 選擇買家是否可以返回

   第一步之後的每個步驟都有一個 Back 按鈕，因為 Let buyers go back a step 預設為開啟。若要變更，請在 Elements 面板中點擊 Footer。關閉 Let buyers go back a step 即可移除該按鈕，或變更 Back label。這些設定只有在步驟列開啟且表單有兩個以上頁面時才會顯示。

在 Elements 面板中點擊頁面的名稱，即可查看其設定：

設定	作用
Page name	頁面在建置工具和步驟列中的名稱。
Hide the heading block	讓頁面從第一個欄位開始。標題和說明會被保留供日後使用。
Heading 和 Description	顯示在頁面頂端。
Continue button label	頁面 Continue 按鈕的文字。最後一頁不會顯示。
Icon	取代步驟列中此步驟的編號。只有在步驟列開啟時才會顯示。
Header and footer	Use custom header 和 Use custom footer 可為此步驟設定專屬的標頭文字和備註。買家可以返回時，自訂頁尾還有 Show Back button on this step。只有在步驟列開啟時才會顯示。
Visibility	依據先前頁面上的回答，顯示或隱藏整個頁面。
Delete page	刪除頁面及其欄位。表單至少需要一個頁面，而包含 Email 欄位的頁面，在您移動該欄位之前無法刪除。

標頭與頁尾

點擊 Elements 面板頂端的 Header，或預覽中的標題：

• Show store logo，然後是 Upload image：大小不超過 1 MB 的 .jpg、.png 或 .svg 檔案，約 200×60 像素。
• 表單頂端的 Heading 和 Subheading。
• Show this block，用來顯示或隱藏整個標頭。

點擊 Elements 面板底部的 Footer，或預覽中的按鈕：

• Submit label，也就是送出按鈕的文字。
• Reset button 和 Reset label，用來清除表單的按鈕。
• Full-width buttons，或 Alignment：Left、Center 或 Right。
• Note，與按鈕一起顯示的文字，以及 Put the note above the buttons。

隱藏、複製或移除欄位

• Hide this block（Elements 面板中或欄位工具列上的眼睛圖示）會讓買家看不到該欄位，但會在建置工具中保留該欄位及其設定。欄位會從預覽中消失，並在 Elements 面板中呈現灰色。在那裡點擊它的眼睛圖示即可恢復。
• Duplicate field 會在該欄位之後放入一份副本，並將其選取。
• Remove field（在工具列上或設定面板底部）會在您儲存時刪除該欄位。

預覽表單

• Desktop preview 和 Mobile preview 可切換預覽的寬度。
• 檢查工具按鈕（目標圖示）可在編輯和測試之間切換。建置工具開啟時檢查工具為開啟狀態，按鈕顯示為 Deactivate inspector：此時點擊是選取要編輯的項目，且規則不會執行，所以規則本來會隱藏的欄位仍會顯示。點擊它即可關閉檢查工具，並像買家一樣填寫預覽：規則會執行，Continue 和送出按鈕會檢查您的回答。不會送出任何內容。再次點擊它（Activate inspector）即可回到編輯。快速鍵在 Mac 上是 ⌘ Shift I，在 Windows 上是 Ctrl Shift I。
• Language 會以您已翻譯的語言顯示表單。尚未翻譯的文字會以英文顯示。若要翻譯，請從 …（More actions）選擇 Translate this form，這會開啟 Translate。
• Preview（眼睛圖示）會在新分頁中開啟表單在您商店中的頁面。表單儲存並發佈後才能使用。

儲存變更

點擊儲存列中的 Save。畫面會出現 Form saved 訊息，如果表單為 Active，買家會立即取得新版本。Discard 會捨棄自上次儲存以來的所有變更。

如果有需要修正的地方，儲存會被拒絕，預覽頂端的橫幅會列出每個問題，例如 Enter a form name，或兩個欄位儲存到同一個 Shopify 欄位。若某一行結尾有箭頭按鈕，點擊它即可直接前往該欄位或設定。

後續步驟

• 以規則顯示、必填或停用欄位：只在先前的回答有需要時才提出問題。
• 將回答對應到 Shopify：選擇核准時每個回答要儲存到哪裡。
• 設計表單：讓表單符合您商店的外觀。
• 建立並發佈表單：發佈表單並在商店中檢查。