Wix CMS：使用可提交至集合的輸入元件建立自訂表單
9 分鐘
建立自訂 Wix CMS 表單，讓訪客能使用輸入元件直接將資訊提交至集合。輸入元件包含文字方塊、下拉式選單選擇器、日期與時間選擇器等。本文將引導您建立儲存提交內容的集合、新增輸入元件和提交按鈕，並使用資料集連結所有內容。
需要更簡單、預先建立的自訂表單嗎？
檢查消失 Wix Forms 以檢視設定較少且現成的範本表單，例如聯絡表單、訂單表單、報名表單以及尚有...項。
開始之前：
- 若尚未新增，請務必將 Wix CMS 新增至網站。
- 若要查看此流程的概覽，請觀看我們的 終極 CMS 指南影片。
步驟 1 | 建立系列並設定權限
若要建立用於儲存表單提交內容的集合：
- 前往網站管理介面的 CMS。
- 點擊建立系列。
- 點擊從頭開始建立。
提示：或者，點擊使用 AI 建立以讓 AI（人工智慧）為您建立系列。 - 點擊下一步。
- 輸入系列名稱。我們將此系列稱為「提交內容」系列。
- （僅限程式碼）輸入要在程式碼中使用的系列 ID。
- 維持多個品項系列（預設）的選取狀態，然後點擊建立。
- 點擊更多操作並選擇權限與隱私權。
- 選擇集合要使用的權限：
收集內容
進階
步驟 2 | 在網站新增輸入元件
前往編輯器中要建立自訂表單的頁面或區段。接著新增訪客用來提交回覆的所有輸入元件。請留意，每個輸入元件對於可收集的資料類型以及可連結的欄位類型皆有限制。
哪些輸入元件可設定用於收集內容？
您可從下列可收集內容的輸入元件中進行選擇：文字輸入、文字方塊、RTF 文字、選項按鈕、多選核取方塊、單選核取方塊、下拉式選單、選擇標籤、日期選擇器、時間選擇器、滑桿、上傳按鈕、評分輸入、地址輸入、切換開關以及簽章輸入。
Wix 編輯器
Studio 編輯器
- 前往編輯器。
- 前往要建立自訂表單的頁面或區段。
- 點擊編輯器左側的新增元件
。 - 點擊輸入。
- 點擊要新增的輸入元件類型。
- 點擊並將相關輸入元件拖曳至頁面上。
- 重複上述步驟 3-6，根據表單需求新增所需數量的輸入元件。
步驟 3 | 將輸入元件連結至集合
將各個輸入元件連結至連結「Submissions」集合的資料集。接著將輸入金額連結至與欲收集資料類型相符的新集合欄位。
您可將訪客在下拉式選單和選擇標籤元件中選擇的選項連結至另一個 Wix CMS 集合中的項目。若要執行此操作，請將其清單選項連結至連結至另一個集合中欄位的不同資料集。此資料集應處於「閱讀」或「閱讀與寫入」模式。
Wix 編輯器
Studio 編輯器
- 在編輯器中，新增一個連結至「Submissions」系列的資料集：
- 點擊左側的 CMS
。 - 點擊新增內容元件。
- 點擊表單資料集。
- 點擊選擇系列下拉選單，然後選擇「Submissions」系列。
- 為資料集命名（例如：「Submissions」）。
- 點擊建立。
- 點擊左側的 CMS
- 點擊任何已新增的輸入元件。
- 點擊連結至 CMS 圖示
。 - 點擊選擇資料集下拉選單，然後選擇「Submissions」資料集。
提示：若系統提示在「篩選內容」與「收集內容」之間做出選擇，請先點擊收集內容。 - 將輸入元件連結至新的系列欄位：
- 點擊金額連結至下拉選單並選擇+ 新增：
- 輸入新系列欄位的欄位名稱。
- （僅限程式碼）輸入在網站程式碼中識別此欄位的欄位金鑰。此項設定稍後無法更改。
- 從下拉選單中選擇欄位類型。欄位類型決定了您可以在欄位中儲存哪種資料。
- 點擊新增。
- （若要連結特定輸入元件中的項目清單）點擊「顯示來自集合的選項」切換開關，選擇管理元件選項的位置：
- 已啟用：使用來自另一個 Wix CMS 集合的欄位作為選項。連結相關資料集，並從「標籤和金額連結至」下拉式選單中選擇要使用的欄位。
- 已停用：點擊「管理選項」為元件建立獨立於 CMS 之外的靜態選項。
- 針對自訂 Wix CMS 表單的每個輸入元件重複這些步驟。
步驟 4 | 建立提交按鈕
您需要為訪客建立一種方式，以便提交他們輸入或選擇的輸入元件回應。透過新增固定按鈕或圖片，並將其連結至資料集的 「提交」點擊小部件來建立「提交」按鈕。當訪客點擊「提交」按鈕時，來自所有連結至「提交內容」資料集的輸入元件金額都會儲存到系列中。根據 資料集模式和系列權限，這些金額會作為新項目新增，或用於更新現有項目。
您也可以為以下資料集操作建立個別按鈕：
- 新增： 新增或更新系列項目（取決於資料集模式）並重設輸入以接受新金額。
- 還原： 重設尚未提交的輸入元件中的金額。
- 刪除： 從系列中移除已選擇項目（僅限「讀取與寫入」模式）。
- 下一頁／上一頁： 如果您在圖庫或重複列表顯示訪客正在編輯的項目，可以新增這些按鈕讓訪客在項目的「頁面」之間導覽。如果您是在動態項目頁面上建立表單，請改用下一個動態頁面／上一個動態頁面點擊小部件。
Wix 編輯器
Studio 編輯器
- 點擊編輯器左側的新增元件。
- 點擊按鈕。
- 點擊並將要作為提交按鈕的按鈕拖曳至頁面上。您可使用以下任一按鈕類型：主題按鈕、文字和圖示按鈕、圖示按鈕、 或 圖片按鈕。
提示：或者，您也可以新增圖片並將其作為提交按鈕。
- 點擊變更文字與圖示並輸入想要在按鈕上顯示的文字（例如「提交」）。
- 點擊連結至 CMS圖示。
- 點擊選擇資料集下拉式選單，然後選擇連結至提交內容系列的資料集。
- 點擊點擊動作連結至下拉式選單並選擇提交。
- （選填）新增提交成功或失敗時顯現的成功和失敗訊息：
- 點擊+ 新增成功訊息，然後點擊+ 新增失敗訊息。
- 點擊並拖曳這兩條訊息到想要顯現的地點。它們可以重疊，因為訊息不會同時顯示。
- 點擊每條訊息上的編輯文字即可編輯訊息。
- 選擇按鈕並點擊連結至 CMS圖示。然後點擊成功後，導覽至下拉式選單，並選擇一個選項：
- 留在本頁：訪客在提交表單後會留在同一個頁面。
- 連結：訪客在提交表單後會被重新導向到另一個頁面。點擊選擇下方的選擇連結並設定連結。
- 點擊按鈕並選擇設計圖示
以自訂提交按鈕的外觀。
步驟 5 | 自訂輸入元件
您可自訂各個輸入元件，建立與網站外觀和形象一致且具整體感的表單。
Wix 編輯器
Studio 編輯器
- 在編輯器中，點擊任何想要自訂的輸入元件。
- 點擊設定即可輸入欄位標題、將欄位設為必填，或根據輸入類型調整各種設定。
- 點擊 版面配置 圖示
以調整文字對齊方式和其他版面配置選項。 - 點擊 設計 圖示
以選擇預設格式設計，然後選擇 自訂設計 以進一步調整元件的外觀。 - 針對每個想要自訂的輸入元件重複上述步驟。
準備好要發布並讓網站已上線了嗎？
點擊編輯器右上方的 預覽 即可測試新的自訂表單。確認一切正常後，點擊 發布 即可讓變更內容上線。
若已啟用沙箱，請 將沙箱系列同步至已上線系列，即可讓資料庫變更內容上線。
常見問題
點擊下方的問題，即可查看關於使用輸入元件建立自訂表單的常見問題答案。
如何在編輯器中找到「提交」按鈕的成功／失敗訊息？
收到表單提交時，是否可以設定自動執行的後續操作？
是否可以匯出儲存至集合中的提交內容？
網站訪客是否可使用輸入元件來篩選顯示於網站上的內容？
如果將下拉式選單或選擇標籤清單連結至參照欄位，清單選項的來源為何？
是否可以在新增輸入元件之前先設定集合欄位？
是否可以在桌次、圖庫或重複列表顯示表單提交內容？
如何允許會員更新自己的提交內容？
若上傳按鈕無法運作，該如何排除故障？
如何將多個表單連結至單一 CMS 集合？
成功／失敗訊息是否符合無障礙設計？
是否可以在多步驟表單的每個步驟中儲存回覆？