LogoLogo
資源社群課程服務About
  • Welcome!
  • Webflow 101
    • 1 HTML 和 CSS 簡介
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - HTML
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - CSS
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - Javascript
    • 2 Box 盒子模組介紹
    • 3 Designer 介面總覽
      • Webflow 中的樣式設定
      • States 狀態
      • Display settings 顯示設置
      • Position 位置
      • Size 尺寸
      • Background 背景
      • Effects 效果
      • Transitions 過渡
    • 4 元素的類型
      • 布局類型 Section
      • 布局類型 Div Block
      • 布局類型 Grid
      • 基本類型 Link Block
      • 基本類型 List
      • 基本類型 Button
      • 文字類型
      • 媒體類型 Image
      • 媒體類型 Video
      • 表單 Form
      • 組件類型
      • 網站搜索
      • lottie Animation
    • 5 元素的層級
    • 6 CMS
      • Webflow CMS介绍
      • CMS集合
      • 導入集合項目
      • 集合列表
      • 集合頁面
      • 過濾收集列表
      • 有條件的可見性
      • CMS編輯器介紹
    • 7 動畫
      • 嵌入After Effects和Lottie動畫
      • 網頁加載動畫
      • 3D介绍
      • 創建懸停(鼠標移動)時旋轉的動畫
      • 在滾動中顯示和隱藏導航欄
      • 在滾動中顯示元素
      • 建立滾動的進度指示器
      • 懸停時顯示元素
      • 點擊時顯示和隱藏元素
    • 8 項目設定
      • 在Made in Webflow上展示您的網站
      • 複製、轉移或刪除網站
      • 發布Webflow項目
      • 發布您的Webflow網站
      • 保存和恢復備份
      • 分享您的項目並邀請合作者
      • 分享您的網站並邀請合作者
      • 網頁圖標和觸摸圖標
      • Webflow品牌建設
      • 編輯品牌
      • 自定義代碼嵌入
      • 上傳自定義字體
      • 用密碼保護網站或網頁
    • 9 托管和代碼輸出
      • 網域 = 代表你的品牌
      • Webflow 網站計劃
      • 管理網站計劃
      • 透過客戶計費將托管費轉給客戶
      • 連接自定義域名
      • 設置一個默認的域名
      • 透過Webflow購買自定義域名
      • SSL托管
      • 排除網站性能問題的故障
    • 10 SEO
      • 付費搜索與自然搜索簡介
      • Google網站驗證
      • 設置Google Analytics
      • 設置301重定向以保持SEO排名
    • 11. DevLink
      • DevLink 使用指南
    • 模板
      • Webflow模板概述
      • 兌換購買的ThemeForest模板
      • 兌換購買的創意市場模板
    • 帳戶和計劃
      • 管理您的Webflow帳戶
      • 團隊帳戶
      • 帳戶計費
      • 團隊計費概述
      • 項目計費
    • 工作空間計畫
      • 工作區角色和權限
      • 將您的帳戶過渡到工作空間
      • 管理您的工作空間
    • 更新
      • 2024
        • Webflow 表單功能增強 (10-15-2024)
        • 擴充功能: .well-known 檔案支援 (12-16-2024)
        • CMS 草稿和發布工作流程的改進 (12-12-2024)
        • 優化企業數據集成 (12-12-2024)
        • 儀表板排序增強功能 (12-12-2024)
        • 定價和產品更新 (12-11-2024)
        • 棄用邏輯和用戶帳戶 (12-11-2024)
        • 在 CMS 上下文中建立 Component (12-09-2024)
        • 使用Webflow的AI助理快速產生或修改任何文字內容 (12-04-2024)
        • 文字裝飾風格 (11-26-2024)
        • 設計審核增強功能 (11-21-2024)
        • 新變數類型:數字和百分比 (11-20-2024)
        • Component style variants 現已可用 (11-19-2024)
        • 新的產品內導航 (11-18-2024)
        • 斜線指令 (11-18-2024)
        • 直接在畫布上顯示和編輯空的 CMS 綁定元素 (11-12-2024)
        • 通過支持組件插槽使頁面構建更加靈活 (11-12-2024)
        • Webflow Analyze 現已推出 (10-31-2024)
        • Webflow Analyze 現正推出 (10-28-2024)
        • Dashboard 列表視圖 (10-24-2024)
        • 增強功能以改善您的表單體驗 (10-15-2024)
        • CMS API 現在支援批量操作 (10-15-2024)
        • 為所有客戶解鎖本地化樣式,還有更多 (10-15-2024)
        • 介紹 Webflow Analyze (10-15-2024)
        • 使用 Webflow Optimize 最大化轉換 (10-15-2024)
        • 為設計審批帶來更多可見性和微調 (10-15-2024)
        • 拖放式頁面建立使行銷人員能夠更快地啟動行銷活動 (10-15-2024)
        • 使用 Webflow AI Assistant 加快建置速度 (10-15-2024)
        • 推出新的幫助中心以增強支持 (10-15-2024)
        • 簡化 Figma 到 Webflow 同步 (10-03-2024)
        • Webflow 支援 Rive
        • 調整外觀設定
        • 透過機器翻譯支援使編輯模式更加強大
        • 陰影和變數支援的 X 和 Y 偏移
        • 將組件屬性進行分組
        • 自訂暫存域支持
        • 新頁面作為分支並編輯分支中的元件
        • 透過 API 存取您的站點登入紀錄
        • 自訂 CSS 屬性和值
        • Figma 到 Webflow 應用程式
        • 新樣式面板佈局部分和控件
        • 在您的網站上顯示程式碼,無需編寫程式碼和更新有序列表
        • 改進的 API 令牌管理
        • 無需編寫程式碼即可將自訂圖像新增至區域設定切換器
        • 本地化頁面分支
        • 控制您的隊友、訪客和客戶可以訪問哪些站點
        • 使用持久 CMS ID 等自信地恢復網站備份
        • 從“應用程式”面板尋找並安裝 Webflow 應用程式
        • 查看合併摘要以安全地合併頁面分支
        • 將類別作為自訂屬性新增至元素
        • 可用於企業在地化的機器翻譯術語表
        • Lightbox的單一多圖像字段綁定
        • 支援 Figma 中的 Rem 和 Em 單位到 Webflow 同步
        • Webflow 中的 Apple 知名文件
        • 固定標尺和十字準線
        • 額外的尺寸和佈局控制
        • CMS 資源的 WebP 轉換工具
        • 增加了自訂程式碼字元限制
        • 擴充元素轉換
        • 為 Webflow 上的開發人員擴充了 CMS API 功能
        • !Webflow 自訂屬性中的重要標誌
        • 使用頁面模板更快建立品牌一致的頁面,並更新頁面建立模式
        • Webflow Enterprise 上的自動化 JIT 配置和 SCIM 取消配置
        • 用於帳戶復原的輔助電子郵件
        • CMS CSV 匯入/匯出現在支援 HTML 程式碼嵌入
        • 畫布上的 CMS 編輯功能現已推出
        • 學習助手
        • 快速複製組件
        • 使用情況儀表板
        • 站點訪問預設設定
        • 透過 CSV 支援簡化您的 301 重定向管理
        • Webflow 應用程式的最新更新
      • 2023
        • 引入程式碼區塊元素
        • 單一 CMS 專案的批次欄位翻譯
        • Rich Text 中的 Markdown 支持
        • 重新排序您的元件屬性
        • 防止與指標事件發生不必要的點擊和觸控交互
        • 引入自訂元素
        • 在地化現已向所有客戶推出
        • 透過分支暫存更快、更安全地在分支上測試設計
        • Webflow 服務條款的更新
        • Rich Text 編輯器的改善
        • Webflow 多語系在地化功能現可供企業使用
        • 將 Spline 3D 場景新增至您的站點
        • 控制設計元素的縱橫比
        • 為 Webflow 引入新的外觀和感覺
        • 用變數編寫您的設計系統
        • 透過對各個頁面進行 noindex 控制來提高您的 SEO
        • 導航器面板現在支援右鍵單擊
        • 透過組件可用性讓你更快的建構專案
        • Webflow API: 元件、變數和多語系
        • Webflow 留言系統
        • 透過新的切換簡化了發布權限
        • 內容編輯者的站點登入紀錄
        • 使用新的 Quick Stack 功能加快構建頁面的速度
        • 解鎖對頁面分支上的自訂動畫的支持
        • 透過增加頁面來解鎖更大的規模
        • 靜態頁面的限制從 100 頁提升至 150 頁
        • 透過改進的發布工作流程保護您的網站
        • 更好地了解 Webflow 發佈時的進度
        • 在 robots.txt 文件中自定義 sitemap.xml 地址
        • 展示客戶工作區的項目
        • 元件現在可以在集合清單中使用
        • 大型站點的編輯器性能改進
        • Library 測試版的更新
        • Webflow 的 Google Analytics 整合更新
        • 為頁面分支帶來更多控制和可見性
        • 設置默認工作區以將儀表板打開到正確的位置
        • 可變字體更新
        • 選擇您的 Workspace 配置文件 URL
        • 在自定義屬性中使用 CMS 數據
        • 更新我們的開發者平台
        • dotLottie 動畫文件支持
        • 使用過濾器在站點活動日誌中更快地找到您要查找的內容
        • 在 div 或鏈接塊中包裝元素的快捷方式
        • 支持新的 CSS 動態視口單元
        • 不受銷售限制地擴展您的業務
        • webflow.io 網站上分析 cookie 行為的變化
        • 引入文本筆劃樣式
        • 組件的可用性更新
        • SSO 功能更新 (Webflow 企業版用戶)
        • 在文件夾中嵌套集合頁面以進行更多 URL 控制
        • 引入用於移動元素的新鍵盤快捷鍵
        • 用於展開元素和包裹 H Flex 或 V Flex 元素的新快捷方式
        • DevLink 公開測試版
        • Figma 外掛程式改進了響應式設計支援
        • Designer 中大型網站的性能改進
        • 複製或刪除最後一個類別的捷徑
        • 存檔工作區以將其從儀表板中刪除
        • 現在可以在設計器中使用 Webflow 應用程式的強大功能
        • Webflow 中管理自訂網域的改進
        • 透過新的內容編輯和評論者角色不斷發展團隊合作
        • 將站點計劃從一個站點傳輸到另一個站點
        • 現在支援文字換行和斷字
        • 改進了 Figma 插件的複製貼上的功能
        • 在樣式面板中快速搜索色板
        • 透過設計器中的評論集中回饋
        • Private Staging (私人測試站)
        • Figma 到 Webflow 插件的 Combo Class 支援
        • 在資料夾中歸類 CMS 頁面,以實現更多的URL控制
      • 2022
        • 更新了託管配置以支持更安全的 TLS 1.3
        • Webflow 定價和計劃的更新
        • 新創作者頁面
        • Webflow Marketplace
        • 開發者資源
        • 會員資格測試版
        • “Symbols”進化為“Components”
        • 增加電子商務網站的商品規模
        • 頁面分支
        • 以訪客身份免費加入客戶的工作區
        • 更新了 Hosting 選項以支持更安全的 SSL TLS 1.3 協定
        • 一次發布和取消發布多個 CMS 項目
        • Webflow 新功能 Logic (Beta)
        • Webflow 會員功能 (Beta)
        • 直接預覽不同文字大小的佈局
        • 檢測網站元素中的重複 ID
        • 刪除 CMS 內容而不發布您的整個網站
        • Made in Webflow 展示區
        • 在 Designer 中準確查看您的隊友正在處理的頁面
        • 簡化團隊合作:工作區就在這裡
  • MasterClass (大師班)
    • Intro
    • Webflow Pricing
    • Webflow 服務條款
  • 資源
    • 官方 Youtube 課程
    • Webflow 學習資源
    • Webflow 官方資源
Powered by GitBook
On this page
  • 如何添加表格
  • 形成解剖
  • 如何配置表單元素
  • 成功和錯誤狀態
  • 表單提交
  • 表單數據和 GDPR
  • 故障排除

Was this helpful?

Edit on GitHub
Export as PDF
  1. Webflow 101
  2. 4 元素的類型

表單 Form

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

Previous媒體類型 VideoNext組件類型

Last updated 2 years ago

Was this helpful?

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

如何添加表格

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

將表單塊拖到畫布上。

形成解剖

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

  • 表單

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

  • 成功消息

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

  • 錯誤消息

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

表單的結構

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

表單元素

  • 字段標籤不要刪除

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

  • 輸入輸入

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

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

  • 文本區域文本區域

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

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

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

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

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

  • 提交按鈕完整

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

需要知道:

如何配置表單元素

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

輸入設置

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

  • 名稱名稱

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

  • 必需必需

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

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

    • 對於

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

重要提示:

  • 文本類型文本類型輸入

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

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

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

提交按鈕

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

  • 按鈕文本按鈕文本

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

  • 等待文本等待文本

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

成功和錯誤狀態

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

  • 正常

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

  • Success

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

  • 錯誤

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

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

表單提交

表單通知

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

表單提交

表單數據和 GDPR

免責聲明

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

故障排除

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

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

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

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

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

重要提示:

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

文件上傳文件上傳

複選框複選框一個或多個

單選按鈕單選按鈕之一的輸入數據。

選擇選擇

reCAPTCHA

AutofocusInputInput字段內),請選中Autofocus

要了解有關輸入設置的更多信息,請查看我們關於的單獨指南。

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

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

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

在這裡,您可以配置接收數據的方式和位置。。

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

免費帳戶上的非託管網站(即您沒有有效託管計劃的網站)上的表單提交最多可提交 10 個表單。如果您已達到此限制,則需要

閱讀有關文件上傳按鈕以及如何自定義它的所有信息
了解有關複選框
了解有關單選按鈕
了解有關選擇輸入
了解如何在您的表單中添加 reCAPTCHA
焦點
收集,則重定向到第三方位置
在別處形成數據
編輯器
MailChimp
Zapier
了解有關設置表單通知的更多信息
了解有關表單提交以及如何管理表單數據的所有信息
升級站點計劃
如何添加表格
形成解剖
如何配置表單元素
成功和錯誤狀態
表單提交
表單數據和 GDPR
故障排除
復選框、單選按鈕和選擇輸入