表單 Form

表單是網絡上最強大的工具之一，無論您是收集電子郵件通訊註冊還是來自潛在客戶的工作諮詢，它都可以讓您有效地捕獲信息。

使用 Webflow，您可以完全自定義和優化表單以滿足您的需求。在本課中：

您可以從添加面板(A) >元素>表單部分添加表單。

將表單塊拖到畫布上。

Form 塊繼承其父元素的全寬並包含 3 個子元素：

表單的結構

您可以在Form中添加或刪除任何表單元素，例如Input或Checkbox，以根據需要自定義表單。

表單元素

需要知道：

您可以雙擊表單元素（例如，輸入、提交按鈕）來打開其設置。您還可以通過選擇元素並按Enter/Return來訪問元素的設置。

輸入設置

每個表單元素根據其類型具有不同的輸入設置。

名稱名稱
— 所有表單元素都有一個字段。這是您可以識別表單提交中的字段的方式。
必需必需
— 每個表單元素都有選項。選中後，站點訪問者將無法在未填寫此字段的情況下提交表單。
佔位符輸入文本區域佔位符
- 對於
- 和字段，是顯示在空輸入字段中的文本，並在您開始在字段中鍵入時被覆蓋。它可以是示例文本或所需信息的描述。您可以從狀態菜單中設置佔位符文本的樣式。

重要提示：

文本類型文本類型輸入
—允許您指定要收集的輸入類型。例如，文本類型的字段：電子郵件將只接受電子郵件地址。電話文本類型將只接受電話號碼。密碼文本類型將隱藏輸入字段中輸入的字符。
AutofocusInput焦點Input字段內），請選中Autofocus
— 如果您希望在頁面加載時接收（即站點訪問者的光標位於Form settings中的選項。當表單元素選中自動對焦時，如果表單落在用戶必須滾動才能看到的頁面部分內，頁面將加載並滾動到該元素。

注意：如果您的頁面自動加載並向下滾動，這可能是因為已在表單中的輸入字段上檢查了自動對焦，該表單位於用戶必須滾動才能看到的頁面部分內。如果您不希望發生這種情況，請確保取消選中表單中所有輸入字段的自動對焦選項。您還需要確保未選中任何隱藏表單字段的自動對焦選項，因為這可能會導致表單提交出現問題。

要了解有關輸入設置的更多信息，請查看我們關於復選框、單選按鈕和選擇輸入的單獨指南。

提交按鈕

Submit 按鈕的設置允許您設置其Button text和Waiting text。

雙擊提交按鈕將打開其設置模式窗口。在這裡，您可以更改 2 個設置：

要訪問成功和錯誤狀態，請選擇Form塊中的Form並打開Settings (D) > Form settings。在這裡，您可以看到狀態選項。單擊要編輯的狀態。

專業提示：我們建議包含處於錯誤狀態的電子郵件地址，以防用戶遇到表單問題。

當有人通過您的某個站點提交表單時，提交的數據將被發送到您的表單通知設置中指定的電子郵件- 和/或如果您已將表單設置為收集，則重定向到第三方位置在別處形成數據。如果您完全擁有一個網站（也就是說，它不是客戶的網站），那麼您還可以訪問這些數據並在您的網站設置或編輯器中對其進行管理。

專業提示：您可以將MailChimp和/或Zapier與您的 Webflow 表單集成以自動化您的列表構建。

表單通知

您可以在站點設置>表單選項卡下訪問表單通知設置。

在這裡，您可以配置接收數據的方式和位置。了解有關設置表單通知的更多信息。

表單提交

如果您擁有該站點，您還可以在“站點設置” > “表單”選項卡下訪問和管理提交的數據。您可以在此處查看提交內容或將提交內容下載為 CSV 文件。您還可以在編輯器中訪問表單提交。了解有關表單提交以及如何管理表單數據的所有信息。

免責聲明

如果您為通過網站收集個人數據的客戶創建網站，請確保您的客戶了解他們作為個人數據控制者的責任。如果您使用第三方工具（例如 Zapier）將您的 Webflow 表單連接到外部數據源並使用這些集成發送個人數據，請務必查看您作為數據控制者的職責。

如果您的表單無法成功提交，請嘗試以下操作：

如果您在您的網站上啟用了 reCAPTCHA，請確保您網站上的所有站點設置表單
表單都包含 reCAPTCHA 元素。在選項卡中啟用 reCAPTCHA 時，不包含 reCAPTCHA 元素的表單將無法提交。
如果您在表單中隱藏了任何表單字段，請確保未在這些字段的設置中選中 自動對焦。
免費帳戶上的非託管網站（即您沒有有效託管計劃的網站）上的表單提交最多可提交 10 個表單。如果您已達到此限制，則需要升級站點計劃
- 才能繼續接收表單提交。