如何添加表格

您可以從添加面板(A) >元素>表單部分添加表單。
notion image
表單塊拖到畫布上。
notion image

形成解剖

Form 塊繼承其父元素的全寬並包含 3 個子元素 
  • 表單
    • — 包含所有表單輸入和元素
  • 成功消息
    • — 表單提交成功時返回的消息
  • 錯誤消息
    • — 表單提交出現問題時返回的消息
notion image

表單的結構

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

表單元素

  • 字段標籤不要刪除
    • — 標籤用於描述表單字段的功能或用途。字段標籤對於表單的可訪問導航至關重要,因此
      這些標籤很重要。
  • 輸入輸入
    • 字段用於收集單行數據,例如對問題的單字回复(例如,姓名或電子郵件地址)。
  • 文本區域文本區域
    • 字段允許訪問者輸入多行數據,例如冗長的消息。
  • 複選框複選框一個或多個了解有關複選框
    • ——
      最適合用於訪問者可以選擇
      選項的輸入數據。
      的更多信息。
  • 單選按鈕單選按鈕之一的輸入數據。了解有關單選按鈕
    • 字段最適用於訪問者只能選擇多個選項
      的更多信息。
  • 選擇選擇了解有關選擇輸入
    • 輸入的行為與下拉元素非常相似,您可以在其中添加不同選項的列表供訪問者選擇。您還可以允許多項選擇。
      的更多信息。
  • 提交按鈕完整
    • — 沒有提交按鈕,任何表格都不
      單擊此按鈕時,將提交表單中收集的所有數據。
notion image
需要知道:

如何配置表單元素

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

輸入設置

每個表單元素根據其類型具有不同的輸入設置。
  • 名稱名稱
    • — 所有表單元素都有一個
      字段。這是您可以識別表單提交中的字段的方式。
  • 必需必需
    • — 每個表單元素都有
      選項。選中後,站點訪問者將無法在未填寫此字段的情況下提交表單。
  • 佔位符輸入文本區域佔位符
    • 對於
    • 字段,
      是顯示在空輸入字段中的文本,並在您開始在字段中鍵入時被覆蓋。它可以是示例文本或所需信息的描述。您可以從狀態菜單中設置佔位符文本的樣式。
重要提示:
  • 文本類型文本類型輸入
    • 允許您指定要收集的輸入類型。例如,文本類型的
      字段:電子郵件將只接受電子郵件地址。電話文本類型將只接受電話號碼。密碼文本類型將隱藏輸入字段中輸入的字符。
  • AutofocusInput焦點Input字段內),請選中Autofocus
    • — 如果您希望
      在頁面加載時接收
      (即站點訪問者的光標位於
      Form settings中的
      選項當表單元素選中自動對焦時,如果表單落在用戶必須滾動才能看到的頁面部分內,頁面將加載並滾動到該元素。

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

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

提交按鈕

Submit 按鈕的設置允許您設置其Button textWaiting text
notion image
雙擊提交按鈕將打開其設置模式窗口。在這裡,您可以更改 2 個設置:
  • 按鈕文本按鈕文本
    • — 出現在提交按鈕上的文本。默認
      是“提交”
  • 等待文本等待文本
    • — 在單擊提交按鈕後和提交表單之前將替換按鈕文本的文本。默認的
      是“請稍候……”

成功和錯誤狀態

要訪問成功和錯誤狀態,請選擇Form中的Form並打開Settings (D) > Form settings在這裡,您可以看到狀態選項。單擊要編輯的狀態。
  • 正常
    • ——站點訪問者與表單交互之前的默認狀態
  • Success
    • — 成功提交表單時返回的消息。您可以更改文本並根據需要進行自定義。
  • 錯誤
    • — 表單提交出現問題時返回的消息。同樣,您可以根據需要自定義錯誤狀態。

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

notion image
notion image

表單提交

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

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

表單數據和 GDPR

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

故障排除

如果您的表單無法成功提交,請嘗試以下操作:
  • 如果您在您的網站上啟用了 reCAPTCHA,請確保您網站上的所有站點設置表單
    • 表單都包含 reCAPTCHA 元素。在選項卡中啟用 reCAPTCHA 時,不包含 reCAPTCHA 元素的表單將無法提交。
  • 如果您在表單中隱藏了任何表單字段,請確保未在這些字段的設置中選中 自動對焦。
  • 免費帳戶上的非託管網站(即您沒有有效託管計劃的網站)上的表單提交最多可提交 10 個表單。如果您已達到此限制,則需要升級站點計劃
    • 才能繼續接收表單提交。
重要提示:
如果您的頁面自動加載並向下滾動,這可能是因為已在首屏下方的輸入字段中選中了自動對焦。如果您不希望發生這種情況,請確保取消選中表單中所有輸入字段的自動對焦選項。
badge