表單是互聯網上最有效的工具之一,使您能夠有效地收集信息,無論是收集電子郵件通訊訂閱還是來自潛在客戶的業務查詢。透過 Webflow,您能夠廣泛地個人化和增強您的表單以滿足您的特定要求。
本教學涵蓋以下內容:
- 新增表單
- 表格結構
- 表單組件的配置
- 成功和錯誤的回饋
- 處理表單提交
- 表單資料和 GDPR 合規性
- 解決問題
如何整合表格
您可以包含來自 插入部分 (一)> 成分 > 形式 category。
拖曳一個 形成塊 到畫布上。
表格結構
這 形成塊 採用其包含元素的完整寬度並包含 3 個子元素:
- 形式 — 包含所有表單輸入和組件
- 成功訊息 — 表單提交成功後顯示的訊息
- 錯誤訊息 — 提交問題時顯示的訊息
此外, 形成塊 元素具有一個 來源 選項,使您能夠將表單連結到 Logic。這允許您透過 Logic 將表單提交中的資料傳輸到其他平台,或根據提交的表單或其內容將表單提交直接傳送給工作區中的不同內容編輯者或貢獻者。了解有關邏輯的更多資訊。
表格的安排
內 形式,您可以靈活地附加或刪除任何表單元件,例如 入口 或一個 複選框,根據需要調整您的表單。
表單元件
- 字段說明 — 描述用於定義表單欄位的功能或重要性。描述對於輕鬆瀏覽表單是必不可少的,因此至關重要 不消除 他們。
- 入口 - 這 入口 欄位收集單行數據,例如查詢的單字答案(例如姓名或電子郵件地址)。
- 文件附件 - 這 文件附件 按鈕使訪客能夠將文件附加到他們提交的表單中。詳細了解“文件附件”按鈕以及如何修改它。
- 文字區域 - 這 文字區域 欄位允許使用者輸入多行數據,例如長訊息。
- 複選框 — 勾選框 對於使用者可以選擇的輸入資料是最佳的 一個或多個 選項。了解有關勾選框的更多資訊。
- 選擇按鈕 - 這 選擇按鈕 欄位非常適合使用者可以選擇的輸入數據 只有一個 從許多選擇中。了解有關選擇按鈕的更多資訊。
- 選項 - 這 選項 輸入的行為類似於下拉元件,提供各種選項清單供使用者選擇。它還允許多種選擇。了解有關選項輸入的更多資訊。
- 驗證碼 — reCAPTCHA 是一項 Google 服務,有助於防止垃圾郵件。了解如何將 reCAPTCHA 整合到您的表單中。
- 提交按鈕 — 如果沒有形式,任何形式都無法發揮作用 提交按鈕!點擊後,此按鈕將提交表單中所有累積的資料。
需要知道: FormOnly 表單區塊允許包含元素。
配置表單元件
若要調整表單元件(例如,輸入、提交按鈕),您可以透過雙擊它們來開啟它們的設定。或者,選擇一個元素並按 輸入/返回 還將調出設定。
自訂輸入
根據其類型,每個表單元素可以使用不同的輸入設定。
- 標題 — 每個表單元素都包含一個 標題 field,用於標識表單提交中的欄位。所有表單的預設標題均設定為「電子郵件表單」。
- 強制的 — 每個表單元素都提供 強制的 選擇。選擇後,網站訪客在未填寫此欄位的情況下無法提交表單。
- 臨時文字- 為了 輸入 和 文字區 領域, 臨時文字 是空輸入欄位中顯示的初始文本,一旦使用者開始輸入,就會被取代。它可以是範例文字或所需資料的簡短描述。您可以從狀態選單設定臨時文字的樣式。
至關重要的: 為避免問題,建議不要使用 臨時文字 作為替代品 標題 或為其相應的輸入欄位提供重要的詳細資訊或說明(例如,「密碼必須介於8-20 個字元之間」),因為使用翻譯工具的網站訪客可能無法翻譯臨時文本,並且螢幕等輔助技術無法存取臨時文本讀者。此外,由於當使用者開始在欄位中輸入時臨時文字消失,因此使用它而不是 標題 可能會使用戶對該欄位的預期資訊感到困惑。
- 文字樣式 - 這 文字樣式 允許您指定正在收集的輸入的類型。例如,一個 輸入 場與 文字樣式:電子郵件 將專門接受電子郵件地址。 A 電話 文字樣式接受電話號碼和文字字元(而電話文字樣式在行動裝置上顯示鍵盤)。 A 密碼 文字樣式將隱藏輸入欄位中輸入的字元。
- 初始焦點 — 如果你想要一個 輸入 獲得焦點(即使用者的遊標自動落在 輸入 欄位)當頁面載入時,啟用 初始焦點 選項中的 表單設定 是必要的。當表單中的元素具有 初始焦點 啟用後,如果表單位在需要捲動查看的頁面部分內,頁面將載入並捲動到該元素。
提醒: 如果您的網頁在載入時自動向下捲動,可能是由於 初始焦點 被激活在 輸入 表單內的欄位位於需要捲動檢視的頁面部分。為了防止這種行為,請確保停用 初始焦點 對全部 輸入 表單中的欄位。確保 初始焦點 對於任何隱藏的表單欄位都停用,因為這可能會導致提交複雜化。
有關輸入配置的更多信息,請參閱有關 checkboxes、單選按鈕和選擇輸入的詳細指南。
提交按鈕
的設定 提交按鈕 允許您指定 按鈕文字 和 等待文字.
透過雙擊 提交按鈕,將出現其設定模式。在這裡,您可以修改 2 個關鍵元素:
- 按鈕文字 — 提交按鈕上顯示的文字。預設 按鈕文字 是“提交”
- 等待文字 — 點選提交按鈕後、表單提交之前取代按鈕位置的文字。預設 等待文字 是“請稍等…”
確認和錯誤指示
若要存取確認和錯誤指示器,請選擇 形式 在 - 的裡面 形成塊 並打開 設定 (D)> 表單設定。在此部分中,您將找到可用的 狀態 選擇。點選 狀態 你想修改。
- 標準 — 使用者與表單互動之前的預設狀態
- 確認 — 成功提交表單後顯示的訊息。您可以根據需要個性化和自訂此文字。
- 問題 — 表單提交過程中發生錯誤時顯示的訊息。再次,錯誤狀態的自訂是可能的。