設計表單

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。	空白

當您在 px 和 % 之間切換 Width 時，會重新從 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。

加入您的標誌

標誌位於表單標頭中，在標題上方。

1. 開啟標頭

   在導覽列中，點擊 Elements，然後點擊清單頂端的 Header。

2. 上傳標誌

   開啟 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 的位置。