Weber更新日誌

組件概述

自定義表單可自由新增多類表單欄位，實現聯絡諮詢、報名、問卷、資訊收集等互動場景。
組件構成：默認初始自定義表單由【單行輸入框】+【多行輸入框】+【提交按鈕】組成，可以自由新增或刪減其他表單子組件。（注意：【提交按鈕】在表單中必須存在）

適用場景

諮詢表單、報價申請表、活動報名、課程註冊、客戶意見回饋、簡易問卷等

組件使用

1、表單可在編輯器右側【設置】中【配置表單】。（注意：配置完表單一定要【保存表單配置】）

2、可在【表單】層級內添加所有的子組件

3、選中【輸入框】/【下拉框】/【單選項】/【多選項】/【選擇文件】/【多行輸入框】等層級，可在【設置】中配置對應的表單項內容

4、表單項支持樣式自定義（邊距、背景、邊框等）。支持添加圖標組件在表單項標題處

進階使用

1、多列表單樣式：

（1） 選中【表單】層級在Class的【常規】➡️【顯示方式】➡️設置成【Grid 網格排列】

（2） 在【網格】中可以調整列數和間距

（3） 如果想要某一各表單項橫跨兩列（例如按鈕、多行輸入框等），可以選中【表單項】層級，在Class的【網格】將【跨列數】設置成【2】。3列就設置成3，以此類推。（注意在其他端口時如果要恢復1列的樣式，需要將設置過【跨列數】的子組件都設置成【1】）

（4） 注意：每一個【表單項】初始默認自帶【16px下外邊距】，如果使用多列樣式，建議調整成【0px】，通過網格的間距去調整距離

2、文字統一樣式：選中【表單】層級在【文字版式】設置字體、字號等，能統一管理表單內所有文字。（如要單獨設置也可）

子組件使用

1、【標題】：表單項的文字標題（如「姓名」「聯絡郵箱」等）

2、【單行輸入框】：短文字輸入欄位，適用姓名、公司名稱等單行簡短內容

3、【多行輸入框】：長文本輸入欄位，支持換行，適用備註、需求描述；可自定義高度

4、【下拉選擇框】：點擊展開選項清單，適用服務、產品類別等選擇；可自訂下拉選項，支持單選或多選

5、【單選項】：單選按鈕組，僅能單選，適用性別、方案、協議等選項；可設定默認選中狀態、協議、自定義選項

6、【多選項】：可同時勾選多個選項，適用興趣、需求服務等多選場景；可限制最大勾選數

7、【電話號碼】：專用電話輸入欄，內建號碼格式驗證，可設定國家區碼

8、【手機驗證碼】：手機簡訊驗證欄，綁定【電話號碼】使用

9、【上傳】：檔案上傳欄，支援圖片、PDF 等多種格式檔案；可限制上傳檔案格式

10、【支付方式】：可配置多種支付渠道，需在【站點管理】內的【互動】設置【支付配置】。在表單中需搭配【單選項】或【多選項】開啟【計價規則】功能，常見用於報名繳費、訂單收費、服務訂購場景

⚠️ 支付配置流程：

(1) 在編輯器內的【表單】組件先新增【支付方式】

(2) 切回【站點列表】後台 ➡️ 打開網站【站點管理】➡️【互動】➡️【新表單】➡️【設定支付配置】➡️【添加供應商支付方式】

(3) 選擇所需【支付供應商】 ➡️ 填寫支付設置所需內容即可完成配置✅

(4) 表單支付計算規則：① 最終計算總金額＞0：表單提交後會喚起支付介面，執行付款流程。    ② 最終計算總金額≤0：支付介面不會顯示，僅完成普通表單提交，不會觸發支付流程。

11、【隱藏域】：發佈後表單不可見欄位，用於攜帶靜態參數（如來源頁面、廣告參數 UTM），提交時自動傳送至後台，訪客無法看見與修改

12、【自定義多表單項】：可重複新增的欄位組，訪客可點擊「+」追加多組相同欄位；例如多個報名人員、多項產品清單

13、【分頁欄】：將長表單拆分多個步驟頁面，訪客分步填寫，降低長表單填寫壓力，支持上一頁 / 下一頁切換（注意：如果要放置次子組件，需要在表單的【設置】中開啟【問卷模式】）

14、【提交按鈕】：可自訂按鈕文字、尺寸、色彩、交互，在表單中必須存在

⚠️ 子組件通用配置：可設定字段名、佔位符、是否必填、類型、字段關聯

注意事項

1、所有子組件的欄位名稱（字段 ID）不可重複，重複會造成數據匯出異常

2、開啟必填欄位後，前台會自動攔截未填寫的提交請求

3、可以開啟防機器人驗證，防止垃圾表單

4、編輯完表單元素或設置表單屬性後，需點擊表單【設置】中的“保存表單配置”