表單 Form

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

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

1. 如何添加表格

2. 形成解剖

3. 如何配置表單元素

4. 成功和錯誤狀態

5. 表單提交

6. 表單數據和 GDPR

7. 故障排除

如何添加表格

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

將表單塊拖到畫布上。

形成解剖

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

• 表單

  — 包含所有表單輸入和元素

• 成功消息

  — 表單提交成功時返回的消息

• 錯誤消息

  — 表單提交出現問題時返回的消息

表單的結構

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

表單元素

• 字段標籤不要刪除

  — 標籤用於描述表單字段的功能或用途。字段標籤對於表單的可訪問導航至關重要，因此這些標籤很重要。

• 輸入輸入

  —字段用於收集單行數據，例如對問題的單字回复（例如，姓名或電子郵件地址）。

• 文件上傳文件上傳閱讀有關文件上傳按鈕以及如何自定義它的所有信息

  • 按鈕允許網站訪問者將文件附加到他們的表單提交中。

• 文本區域文本區域

  —字段允許訪問者輸入多行數據，例如冗長的消息。

• 複選框複選框一個或多個了解有關複選框

  ——最適合用於訪問者可以選擇選項的輸入數據的更多信息。

• 單選按鈕單選按鈕之一的輸入數據。了解有關單選按鈕

  —字段最適用於訪問者只能選擇多個選項的更多信息。

• 選擇選擇了解有關選擇輸入

  • 輸入的行為與下拉元素非常相似，您可以在其中添加不同選項的列表供訪問者選擇。您還可以允許多項選擇。的更多信息。

• reCAPTCHA了解如何在您的表單中添加 reCAPTCHA

  — reCAPTCHA 是一項有助於防止垃圾郵件的 Google 服務。

• 提交按鈕完整

  — 沒有提交按鈕，任何表格都不！單擊此按鈕時，將提交表單中收集的所有數據。

需要知道：

如何配置表單元素

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

輸入設置

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

• 名稱名稱

  — 所有表單元素都有一個字段。這是您可以識別表單提交中的字段的方式。

• 必需必需

  — 每個表單元素都有選項。選中後，站點訪問者將無法在未填寫此字段的情況下提交表單。

• 佔位符輸入文本區域佔位符

  • 對於

  • 和字段，是顯示在空輸入字段中的文本，並在您開始在字段中鍵入時被覆蓋。它可以是示例文本或所需信息的描述。您可以從狀態菜單中設置佔位符文本的樣式。

重要提示：

• 文本類型文本類型輸入

  —允許您指定要收集的輸入類型。例如，文本類型的字段：電子郵件將只接受電子郵件地址。電話文本類型將只接受電話號碼。密碼文本類型將隱藏輸入字段中輸入的字符。

• AutofocusInput焦點Input字段內），請選中Autofocus

  — 如果您希望在頁面加載時接收（即站點訪問者的光標位於Form settings中的選項。當表單元素選中自動對焦時，如果表單落在用戶必須滾動才能看到的頁面部分內，頁面將加載並滾動到該元素。

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

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

提交按鈕

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

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

• 按鈕文本按鈕文本

  — 出現在提交按鈕上的文本。默認是“提交”

• 等待文本等待文本

  — 在單擊提交按鈕後和提交表單之前將替換按鈕文本的文本。默認的是“請稍候……”

成功和錯誤狀態

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

• 正常

  —站點訪問者與表單交互之前的默認狀態

• Success

  — 成功提交表單時返回的消息。您可以更改文本並根據需要進行自定義。

• 錯誤

  — 表單提交出現問題時返回的消息。同樣，您可以根據需要自定義錯誤狀態。

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

表單提交

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

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

表單通知

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

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

表單提交

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

表單數據和 GDPR

免責聲明

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

故障排除

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

• 如果您在您的網站上啟用了 reCAPTCHA，請確保您網站上的所有站點設置表單

  表單都包含 reCAPTCHA 元素。在選項卡中啟用 reCAPTCHA 時，不包含 reCAPTCHA 元素的表單將無法提交。

• 如果您在表單中隱藏了任何表單字段，請確保未在這些字段的設置中選中 自動對焦。

• 免費帳戶上的非託管網站（即您沒有有效託管計劃的網站）上的表單提交最多可提交 10 個表單。如果您已達到此限制，則需要升級站點計劃

  • 才能繼續接收表單提交。

重要提示：

如果您的頁面自動加載並向下滾動，這可能是因為已在首屏下方的輸入字段中選中了自動對焦。如果您不希望發生這種情況，請確保取消選中表單中所有輸入字段的自動對焦選項。