# 表單 Form

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

1. [如何添加表格](https://university.webflow.com/lesson/intro-to-forms#how-to-add-a-form)
2. [形成解剖](https://university.webflow.com/lesson/intro-to-forms#form-anatomy)
3. [如何配置表單元素](https://university.webflow.com/lesson/intro-to-forms#how-to-configure-form-elements)
4. [成功和錯誤狀態](https://university.webflow.com/lesson/intro-to-forms#success-and-error-states)
5. [表單提交](https://university.webflow.com/lesson/intro-to-forms#form-submissions)
6. [表單數據和 GDPR](https://university.webflow.com/lesson/intro-to-forms#form-data-and-gdpr)
7. [故障排除](https://university.webflow.com/lesson/intro-to-forms#troubleshooting)

### **如何添加表格**

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

![](/files/JpS7sKtxPPxJmcERXTAW)

將**表單塊**拖到畫布上。

![](/files/ZVTeAdZQ04RkKGznZ202)

### **形成解剖**

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

* **表單**

  — 包含所有表單輸入和元素
* **成功消息**

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

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

![](/files/bjAKRyng4ALkBfO3eRrk)

**表單的結構**

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

**表單元素**

* **字段標籤不要刪除**

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

  —字段用於收集單行數據，例如對問題的單字回复（例如，姓名或電子郵件地址）。
* **文件上傳文件上傳**[閱讀有關文件上傳按鈕以及如何自定義它的所有信息](https://university.webflow.com/article/form-file-upload)
  * 按鈕允許網站訪問者將文件附加到他們的表單提交中。
* **文本區域文本區域**

  —字段允許訪問者輸入多行數據，例如冗長的消息。
* **複選框複選框***一個或多個*[了解有關複選框](https://university.webflow.com/article/checkboxes-radio-buttons-and-select-inputs)

  ——最適合用於訪問者可以選擇選項的輸入數據的更多信息。
* **單選按鈕單選按鈕***之一的輸入數據。*[了解有關單選按鈕](https://university.webflow.com/article/checkboxes-radio-buttons-and-select-inputs)

  —字段最適用於訪問者只能選擇多個選項的更多信息。
* **選擇選擇**[了解有關選擇輸入](https://university.webflow.com/article/checkboxes-radio-buttons-and-select-inputs)
  * 輸入的行為與下拉元素非常相似，您可以在其中添加不同選項的列表供訪問者選擇。您還可以允許多項選擇。的更多信息。
* **reCAPTCHA**[了解如何在您的表單中添加 reCAPTCHA](https://university.webflow.com/article/recaptcha)

  — reCAPTCHA 是一項有助於防止垃圾郵件的 Google 服務。
* **提交按鈕完整**

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

![](/files/pbdfFyUPZ9yKi6Nka23g)

> 需要知道：

### **如何配置表單元素**

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

**輸入設置**

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

* **名稱名稱**

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

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

> 重要提示：

* **文本類型文本類型輸入**

  —允許您指定要收集的輸入類型。例如，**文本類型的**字段：**電子郵件**將只接受電子郵件地址。**電話**文本類型將只接受電話號碼。**密碼**文本類型將隱藏輸入字段中輸入的字符。
* **AutofocusInput**[焦點](https://university.webflow.com/lesson/states#focused-state)**Input字段內），請選中Autofocus**

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

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

![](/files/t0HhKra8m8gJsVMnT4qO)要了解有關輸入設置的更多信息，請查看我們關於[復選框、單選按鈕和選擇輸入](https://university.webflow.com/article/checkboxes-radio-buttons-and-select-inputs)的單獨指南。

**提交按鈕**

**Submit** **按鈕的**設置允許您設置其**Button text**和**Waiting text**。![](/files/nd4K0fItlmVVPGCD9ffX)

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

* **按鈕文本按鈕文本**

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

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

### **成功和錯誤狀態**

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

* **正常**

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

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

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

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

![](/files/WqXwrNcO4d5m5GdUbRMA)![](/files/5EUdxPgiRS8Duq5JKRMb)

### **表單提交**

當有人通過您的某個站點提交表單時，提交的數據將被發送到您的**表單通知設置**中指定的電子郵件- 和/或如果您已將表單設置為[收集，則重定向到第三方位置](https://university.webflow.com/article/collecting-form-submissions-on-exported-sites)[在別處形成數據](https://university.webflow.com/article/collecting-form-submissions-on-exported-sites)。如果您完全擁有一個網站（也就是說，它不是客戶的網站），那麼您還可以訪問這些數據並在您的**網站設置**或[編輯器](https://university.webflow.com/lesson/intro-to-the-editor)中對其進行管理。

**專業提示：您可以將**[**MailChimp**](https://university.webflow.com/integrations/mailchimp-form-integration)**和/或**[**Zapier**](https://university.webflow.com/integrations/zapier)**與您的 Webflow 表單集成以自動化您的列表構建。**

**表單通知**

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

![](/files/nlj0nTXP0LEdzI3ytrJ6)

在這裡，您可以配置接收數據的方式和位置。[了解有關設置表單通知的更多信息](https://university.webflow.com/lesson/form-submissions)。

**表單提交**

如果您擁有該站點，您還可以在“**站點設置**” > **“表單”**選項卡下訪問和管理提交的數據。您可以在此處查看提交內容或將提交內容下載為 CSV 文件。您還可以在編輯器中訪問表單提交。[了解有關表單提交以及如何管理表單數據的所有信息](https://university.webflow.com/lesson/form-submissions)。

![](/files/GK4Kra4qCmaJxEbn0nYq)

### **表單數據和 GDPR**

> 免責聲明

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

### **故障排除**

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

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

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

> 重要提示：

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/4-yuan-su-de-lei-xing/biao-dan-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.