Wix 說明
首頁
文章庫
建立網站
進階功能
CMS
將使用者輸入元件連結至 CMS

CMS：使用輸入元件建立可提交至集合的自訂表單

20 分鐘
建立自訂 CMS 表單，讓訪客使用輸入元件直接將資訊提交至集合。輸入元件包括文字方塊、下拉式選單、日期與時間選擇器等。本文將逐步說明如何建立集合來儲存提交內容、新增輸入元件和提交按鈕，以及使用資料集連結所有項目。
使用輸入元件建立自訂表單的畫面。
需要更簡單的預建自訂表單嗎？
查看Wix Forms，使用聯絡表單、訂單表單、報名表單等設定更簡便的範本表單。
開始之前：
注意：

Wix Harmony 編輯器不提供輸入元件，因此訪客無法篩選內容或將項目提交至集合。若要收集訪客資訊，請改用 Wix Forms 新增表單。深入了解在 Wix Harmony 中運作方式不同的功能。

步驟 1｜建立集合並設定權限

建立用來儲存自訂表單提交內容的集合，並設定集合權限。您可以選擇收集內容權限設定，再選擇哪些人可從已上線網站新增或查看內容。也可以選擇進階，指定各種身分（所有人、會員、項目建立者和共同作業者）可查看、新增、更新及刪除內容的人員。

此時可以在集合中新增欄位，但建議稍後在連結輸入元件時（步驟 3）再新增。這樣即可只新增能與各類輸入元件連結的欄位類型。

建立用來儲存表單提交內容的集合：

  1. 前往網站管理介面中的 CMS。
  2. 點擊「建立集合」。
  3. 點擊「從頭開始」。
    提示：或者，點擊「使用 AI 建立」，讓 AI（人工智慧）建立集合。
  4. 點擊「下一步」。 
  5. 輸入集合名稱。以下將此集合稱為「提交內容」集合。
  6. （僅限程式碼）輸入要在程式碼中使用的集合 ID。
  7. 保持選擇「多項目集合（預設）」，然後點擊「建立」。
  8. 點擊「尚有其他操作」，然後選擇「權限與隱私權」。
在集合中選擇「權限與隱私權」的畫面。
  1. 選擇集合要使用的權限：

步驟 2｜新增輸入元件至網站

在編輯器中前往要建立自訂表單的頁面或區段，然後新增訪客提交回覆時會使用的所有輸入元件。請留意，每個輸入元件皆有限制，只能收集特定類型的資料，並連結至特定欄位類型。
哪些輸入元件可設為收集內容？
可選擇下列輸入元件來收集內容：文字輸入、文字方塊、RTF 文字、選項按鈕、多重核取方塊、單一核取方塊、下拉式選單、選擇標籤、日期選擇器、時間選擇器、滑桿、上傳按鈕、評分輸入、地址輸入、切換按鈕及簽名輸入。
  1. 前往編輯器。
  2. 前往要建立自訂表單的頁面或區段。
  3. 點擊編輯器左側的 新增元件。
  4. 點擊「輸入」。
  5. 點擊要新增的輸入元件類型。
  6. 點擊相關輸入元件，並將其拖曳至頁面上。
在編輯器中新增下拉式選單元件的畫面截圖。
  1. 重複上述步驟 3 至 6，新增表單所需的輸入元件。
頁面中新增多個輸入元件的畫面截圖。

步驟 3｜將輸入元件連結至集合

將每個輸入元件連結至已連結「提交內容」集合的資料集。接著，將輸入值連結至符合所要收集資料類型的新集合欄位。

您可將訪客在下拉式選單和選擇標籤元件中選取的選項，連結至另一個 CMS 集合中的項目。若要進行連結，請將清單選項連結至其他資料集，而該資料集須連結至另一個集合中的欄位。此資料集應設為「讀取」或「讀取與寫入」模式。
  1. 在編輯器中，新增連結至「提交內容」集合的資料集：
    1. 點擊左側的 CMS 。
    2. 點擊新增內容元件。
    3. 點擊表單資料集。
    4. 點擊選擇集合下拉式選單，然後選擇「提交內容」集合。
    5. 輸入資料集名稱（例如「提交內容」）。
    6. 點擊建立。
  2. 點擊已新增的任一輸入元件。
  3. 點擊連結至 CMS圖示 。
  4. 點擊選擇資料集下拉式選單，然後選擇「提交內容」資料集。
    提示：如果系統 提示選擇「篩選內容」或「收集內容」，請先點擊收集內容。
  5. 將輸入元件連結至新的集合欄位：
    1. 點擊值連結至下拉式選單，然後選擇 + 新增：
    2. 輸入新集合欄位的欄位名稱。
    3. （僅限程式設計）輸入用於在網站程式碼中識別此欄位的欄位金鑰。之後將無法變更。
    4. 從下拉式選單中選擇欄位類型。欄位類型會決定欄位可儲存的資料類型。
    5. 點擊新增。
新增用於儲存資料的集合欄位畫面截圖。
  1. （若要連結特定輸入元件中的項目清單）點擊顯示集合中的選項切換開關，選擇管理元件選項的位置：
    • 啟用：使用其他 CMS 集合中的欄位作為選項。連結相關資料集，然後從標籤和值連結至下拉式選單中選擇要使用的欄位。
    • 停用：點擊管理選項，建立獨立於 CMS 的元件靜態選項。
連結下拉式選單輸入元件清單選項的畫面截圖。
  1. 對自訂 CMS 表單中的每個輸入元件重複上述步驟。
資料集模式有何作用？
  • 如果已新增「表單資料集」，系統會自動將資料集正確設為「寫入」模式。此模式可讓資料集根據輸入元件的提交內容，將新項目新增至集合。
  • 如果已連結訪客在下拉式選單和選取標籤元件中選擇的選項，請確認該獨立資料集設為「讀取」或「讀取與寫入」模式。
  • 若要讓 CMS 表單更新集合中的現有項目，請將「提交內容」資料集設為「讀取與寫入」模式。同時確認集合權限允許具有相關身分的人員更新內容。

第 4 步｜建立提交按鈕

需要提供一種方式，讓訪客提交在輸入元件中輸入或選擇的回覆。新增一般按鈕或圖片，並將其連結至資料集的「提交」點擊操作，即可建立「提交」按鈕。訪客點擊「提交」按鈕後，系統會將所有已連結至「提交內容」資料集之輸入元件中的值儲存至集合。根據資料集模式和集合權限，系統會將這些值新增為新項目，或用來更新現有項目。
也可以為下列資料集操作分別建立按鈕：
  • 新增： 新增或更新集合項目（視資料集模式而定），並重設輸入內容以接受新值。
  • 還原： 重設尚未提交的輸入元件值。
  • 刪除： 從集合中移除已選擇的項目（僅適用於「讀取與寫入」模式）。
  • 下一頁／上一頁： 如果使用圖庫或重複項目顯示訪客正在編輯的項目，可以新增這些按鈕，讓訪客瀏覽各個項目「頁面」。如果表單建立在動態項目頁面上，請改用「下一個動態頁面／上一個動態頁面」點擊操作。
  1. 點擊編輯器左側的「新增元件」。
  2. 點擊「按鈕」。
  3. 點擊要作為提交按鈕使用的按鈕，並將其拖曳至頁面上。可以使用以下任何按鈕類型：「主題按鈕」、「文字與圖示按鈕」、「圖示按鈕」 或「圖片按鈕」。
    提示：也可以新增圖片並將其用作提交按鈕。
新增按鈕並將其用作提交按鈕的畫面截圖。
  1. 點擊變更文字與圖示，然後輸入要在按鈕上顯示的文字（例如「提交」）。
  2. 點擊連結至 CMS圖示 。
  3. 點擊選擇資料集下拉式選單，然後選擇已連結至提交內容集合的資料集。
  4. 點擊點擊小部件連結至下拉式選單，然後選擇提交。
  5. （選填）新增提交成功和失敗訊息，並在提交內容成功或未成功提交時顯示：
    1. 點擊＋新增成功訊息，然後點擊＋新增失敗訊息。
    2. 點擊並拖曳這兩則訊息，將其移至要顯示的位置。由於兩則訊息不會同時顯示，因此可以重疊放置。
    3. 點擊每則訊息上的編輯文字來編輯訊息。
  6. 選擇按鈕並點擊連結至 CMS圖示 。接著點擊成功時前往下拉式選單，然後選擇選項：
    • 留在此頁面：訪客提交表單後會留在同一個頁面。
    • 連結：訪客提交表單後會重新導向至其他頁面。點擊選擇連結下方的選擇，然後設定連結。
「提交」按鈕設定畫面。
  1. 點擊按鈕並選擇設計圖示 ，即可自訂提交按鈕的外觀。

步驟 5｜自訂輸入元件

您可自訂各個輸入元件，建立風格一致且符合網站外觀和形象的表單。
  1. 在編輯器中，點擊要自訂的任何輸入元件。
  2. 點擊「設定」即可輸入欄位標題、將欄位設為必填，或根據輸入類型調整各項設定。
自訂下拉式選單輸入元件的截圖。
  1. 點擊「版面配置」圖示 ，即可調整文字對齊方式和其他版面配置選項。
  2. 點擊「設計」圖示 ，選擇預設設計，再選取「自訂設計」以進一步調整元件外觀。
  3. 針對要自訂的每個輸入元件重複上述步驟。
準備好上線了嗎？
點擊編輯器右上方的「預覽」，測試新的自訂表單。確認外觀和功能均符合預期後，點擊「發布」即可讓變更上線。

若已啟用沙箱，請將沙箱集合同步至正式集合，讓資料庫變更上線。

常見問題

點擊下方問題，即可查看使用輸入元件建立自訂表單的常見問題解答。