Form 小工具是單一元素:連接集合、選擇欄位與標籤,讓訪客提交——包含圖片、影片與 Media Gallery 上傳。你可以把長表單拆成步驟、只在條件成立時顯示欄位、建立 Wix 聯絡人、註冊網站會員,並觸發 Wix Automations。在 Pro 上,你也可以在提交時經由 Wix Checkout 收款。
你可以做什麼
- AI setup — 用平易的語言描述欄位與提交文案;請見 AI setup
- 文字、Number、URL、下拉選單、電話(含國碼的 E.164)、Color(原生色彩選擇器;儲存 HEX)、Date/Date & time/Time 選擇器、圖片、Video 上傳,以及 Media Gallery 多檔上傳
- 文字欄位的 Radio buttons 與 Checkbox(多選),可自訂選項
- Multi-step form — 以 Next/Back 與進度拆成多頁;編輯器的 Preview step
- Show only when — 直到另一欄位為空、非空,或符合所選值才顯示
- Autosave — 輸入時即儲存;會員會繼續集合中的草稿,其他人則在此瀏覽器保留草稿直到提交
- 在同一個面板設定提交標籤(取代早期版本中分開的 Text Input/Dropdown/Submit Button/Form Dataset 小工具)
- Update displays on this page — 成功提交後,同一頁面上使用相同集合的 Table、Repeater、Slideshow、Media Gallery、Calendar 與 Dynamic Page 小工具會自動重新載入
- Contacts — Create contact:從對應的表單欄位建立或更新 Wix 聯絡人
- Members — Create member:以 login email 與密碼註冊網站會員
- Wix Automations — 每次成功提交後觸發 Form submitted
- Payments(Pro)— pay-on-submit:儲存提交、開啟 Wix Checkout,再把訂單詳情寫回提交紀錄
設定
在面板使用 AI setup 以平易語言開始,再於 Manual 微調。詳情:AI setup。
- 從 Add → Elements → Installed Apps → CMS for Harmony 新增 Form(可新增多次)。
- 連接應接收提交內容的集合。
- 挑選訪客要填寫的欄位與標籤(Number 與 URL 欄位會取得對應的輸入類型)。
- 可選擇在 Steps 開啟 Multi-step form 並在 Field setup 指派欄位;為各欄位設定 Show only when。
- 可選擇開啟 Update displays on this page、Create contact、Create member 和/或 Enable payments(Pro)——見下方。
- 發佈並在正式(或預覽)網站測試一次提交。付款結帳在正式網站上執行。
提交內容會進入你的集合,之後若需要,可用 Table 或 Repeater 顯示。使用 Update displays on this page 時,同一頁面上的清單會在提交成功後立即更新。
Steps
- 在 Steps 開啟 Multi-step form。
- 新增步驟並設定每個 Step title。
- 在 Field setup 將每個欄位指派到一個 Step。
- 在編輯器使用 Preview step,一次預覽一頁畫布。
- 正式表單上訪客使用 Next/Back;提交在最後一步執行。
Field setup
為每個欄位設定 Label、Placeholder、Required 與 Input type。文字欄位支援自訂 Options 的 Radio buttons 與 Checkbox(多選)。啟用多步驟時指派 Step。Show only when 會在另一欄位為空、非空,或 Equals any of 所選值之前隱藏該欄——Required 只在顯示時生效。
Update displays on this page
在 Form 面板中,開啟 Update displays on this page。成功提交後,同一頁面上使用相同集合的 Table、Repeater、Slideshow、Media Gallery、Calendar 與 Dynamic Page 小工具會自動重新載入——訪客無需重新整理瀏覽器即可看到新增或更新的項目。
Autosave
在 Submit 開啟 Autosave,即可在訪客輸入時儲存。Editable form 與 Autosave 不能同時開啟。
- 開啟 Autosave。
- 選擇一個 Submitted field(boolean)。若集合還沒有,使用 Add submitted field 建立名為 Submitted 的欄位。該欄位不會出現在表單上。
- 會員需要對自己的項目具備 Read 與 Update(缺少時面板會提供 Fix)。
會員會在集合中儲存一筆草稿,submitted field 為 false。再次開啟表單會接續該草稿。Submit 會更新同一筆項目並把欄位設為 true。若要隱藏未完成的草稿,請用這個欄位篩選清單。
未登入的訪客會把草稿留在此瀏覽器,直到提交。提交後會寫入一筆新的集合項目,並清除瀏覽器草稿。
表單會顯示 Saving…、Saved 或 Couldn’t save. Keep editing — we’ll try again. 密碼不會存進草稿。
Contacts
在 Form 面板的 Contacts 區段,於有人提交時建立或更新 Wix 聯絡人。
- 開啟 Create contact。
- 對應 Email(必填)與任何選用欄位:Phone、First name、Last name、Full name、Company、Job title。
- 若也要把值存進 CMS,優先使用集合欄位。對不存入集合的純表單欄位使用 Add field (contact)——面板會顯示簡短說明與 Add to collection(若你改變主意)。
- 若要清除選用對應,請使用下拉選單旁的 X。清除 Add field (contact) 對應時,也會從表單移除該純表單欄位。Contacts 開啟期間 Email 仍為必填,因此沒有清除控制項。
- 發佈並提交測試項目;確認聯絡人出現在網站的 Contacts 中。
Create member 開啟時,Contacts 仍保持啟用,login email 與個人資料欄位維持對應。
Members
使用 Members 區段,讓訪客在提交時建立網站會員帳戶。
- 開啟 Create member(同時啟用 Contacts)。
- 設定 Login email(必填)——對應集合的 email 欄位或使用 Add field (member)。
- 對應你想放在會員/聯絡人上的其他 contact 欄位(與 Contacts 相同對應)。
- 在正式表單上,訪客會看到 Password 與 Confirm password(可在 Field setup 編輯標籤/placeholder)。密碼絕不寫入集合。
- 發佈並在正式網站測試註冊。
Wix Automations
每次 Form 成功提交都會向 Wix Automations 回報 Form submitted 事件(best-effort;不會阻擋儲存提交)。
在 Automations 中選擇 CMS for Harmony 的 Form submitted 觸發器。payload 包含 submission id、collection id、submitted time、payment-pending flag、欄位值的 JSON 字串,以及 Contacts 有對應時的 email、name、phone 與可用的 contact id。
可用於電郵通知、CRM 交接,或網站上既有的 Automations 動作。
Form payments (Pro)
Form 付款與目錄付款(顯示元件上的 Add to cart/Buy now)是分開的。這裡訪客在提交表單時支付固定金額或自行輸入的金額。
- 連接集合,然後在 Form 面板開啟 Payments 區段。
- 開啟 Enable payments(必要時會安裝 Wix Stores)。
- 設定 Item name(結帳明細名稱)。
- 選擇 Price:Fixed amount 或 Visitor enters amount(會在正式表單上新增必填 Amount 欄位)。
- 設定付款按鈕的 Label。
- 在 Save to submission 下,使用 Add fields(或手動對應)設定 Order ID、Total paid 與 Payment status——付款成功後的結帳完成時會填入。
- 發佈並在正式網站上測試。
沒有 Pro 時,付款開關維持關閉,面板會顯示升級提示。