# 表單 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) >**元素**>**表單**部分添加表單。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FhIKSm8PLZXeP8593jS2s%2Fimage.png?alt=media\&token=20799388-fad6-49ff-81f3-7c689e199629)

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F5ot6YLQMqVDUXTJrovs5%2Fimage.png?alt=media\&token=7aa0d935-998e-44e7-afaf-6de320f064ae)

### **形成解剖**

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

* **表單**

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

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F7TZHMUg5HpfjCQN4yiaR%2Fimage.png?alt=media\&token=9bf9d702-1ed7-4c05-9f82-db21e77d6a03)

**表單的結構**

**您可以在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 服務。
* **提交按鈕完整**

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fe7EXojfKituWxi5IJsf0%2Fimage.png?alt=media\&token=0f900200-652a-4b9f-a62b-d4e746f08626)

> 需要知道：

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

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

**輸入設置**

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

* **名稱名稱**

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

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

> 重要提示：

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

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

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FthiqCmj1NaP80dlr6PQ5%2Fimage.png?alt=media\&token=707a7207-cc32-4112-8587-ea2df0dc080d)要了解有關輸入設置的更多信息，請查看我們關於[復選框、單選按鈕和選擇輸入](https://university.webflow.com/article/checkboxes-radio-buttons-and-select-inputs)的單獨指南。

**提交按鈕**

**Submit** **按鈕的**設置允許您設置其**Button text**和**Waiting text**。![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FVHauaFtfRB2CDk9T7FDy%2Fimage.png?alt=media\&token=2a1c992f-07a8-4f88-af33-7bcc951358a5)

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

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

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

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

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

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

* **正常**

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

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

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F9sR0Bp6T6PkTh5ZTGybZ%2Fimage.png?alt=media\&token=c99c91fd-fcf9-49ba-92bb-e40d0c812905)![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FNnXSzXDYqLY5nn4jSr7h%2Fimage.png?alt=media\&token=5ece93d5-b0f1-4369-a602-77d3b43ed9b8)

### **表單提交**

當有人通過您的某個站點提交表單時，提交的數據將被發送到您的**表單通知設置**中指定的電子郵件- 和/或如果您已將表單設置為[收集，則重定向到第三方位置](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 表單集成以自動化您的列表構建。**

**表單通知**

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F4tlptm7eMTVvWQ6abOfZ%2Fimage.png?alt=media\&token=fd33dda1-505d-4178-8ccd-8ec03a526423)

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

**表單提交**

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fm22iFEOfpW89Ix5Bottv%2Fimage.png?alt=media\&token=b9b918a0-160d-42b3-bb85-9d98475cadd9)

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

> 免責聲明

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

### **故障排除**

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

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

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

> 重要提示：

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