多數人以為只要把落落長的表單拆成好幾頁,使用者就會比較有耐心填完;實際上,步驟切錯地方、進度條又交代不清楚,中途放棄的人反而更多。想像一份活動報名表單,第一頁只問姓名和信箱,按下一步卻要重新整理頁面枯等,第二頁忽然冒出五個先前完全沒提示過的欄位。填到一半,不少人乾脆關掉分頁走人。
這種把表單拆成好幾個畫面、每次只問一小段問題的做法,一般稱為多步驟表單(multi-step form)。放到 WordPress 網站上,WordPress多步驟表單能不能真的降低放棄率,關鍵從來不是「有沒有拆」,而是拆的方式對不對,分組邏輯合不合理、進度提示說不說真話,才是使用者填不填得完的真正變數。
多步驟表單是什麼?
多步驟表單(也稱為多頁表單,multi-page form)是把一份表單原本要問的問題,拆成好幾個畫面或頁面,使用者填完一段、按下「下一步」才會看到下一段;跟把所有欄位一次攤開在同一頁、使用者要從頭滑到尾才填得完的單頁長表單,是兩種截然不同的填寫體驗。單頁表單的優點是使用者一眼就能看到整份表單有多長;缺點是欄位一多,畫面看起來就密密麻麻,容易讓人還沒開始填就先打退堂鼓。
這種「先只給一小部分、其餘留到後面才出現」的做法,Nielsen Norman Group 稱為漸進揭露(progressive disclosure)。這個概念指的是介面一開始只呈現使用者當下最需要的少數選項,其餘功能或欄位等使用者往下走、有需要時才顯示,避免一次把所有選項攤開嚇跑新手。Nielsen Norman Group 進一步把漸進揭露分成兩種:一種是階層式,把次要選項藏進子畫面,使用者要自己點開才看得到;另一種則是分步驟揭露(staged disclosure),把任務拆成一連串線性的步驟,像精靈(wizard)介面一樣一步接一步走完。多步驟表單屬於後者,特別適合把任務拆成彼此相對獨立、只是排列上有先後順序的段落,例如結帳、申請、預約,這類流程原本就得先填基本資料才能選方案,先選方案才能填付款資訊,順序本身就是流程的一部分。

實作上,多步驟表單有兩種常見做法:一種是每個步驟對應一個獨立網址,使用者按下一步會真的跳轉到新頁面;另一種是整份表單其實還是同一個網頁,只是透過程式在畫面上動態切換要顯示哪一段欄位,網址從頭到尾不會改變。對使用者來說,這兩種做法給人的體感差異不大,都是一步一步往前走;差別主要在底層技術怎麼實作,不影響前面談的分組與漸進揭露原則。
步驟切分能降低認知負荷與放棄率的原理
多步驟表單真正要解決的問題,是認知負荷(cognitive load),一次要處理的資訊愈多,使用者愈容易分心、出錯,甚至乾脆放棄。Nielsen Norman Group 對漸進揭露的研究指出,做得好的漸進揭露能同時改善三項可用性指標:易學性(learnability,新手不會被一堆用不到的選項淹沒,能聚焦在真正重要的功能上)、使用效率(efficiency of use,熟練使用者也不必每次都掃過一堆不相關的選項),以及錯誤率(error rate,選項變少,選錯或填錯的機率自然跟著下降)。這三項指標同時成立,才是多步驟表單值得採用的核心理由,不是單純看起來比較簡潔而已。
不過,光是把欄位拆開還不夠。Baymard Institute 的研究(該機構累積超過 20 萬小時的使用者體驗研究、稽核過 320 多個電商結帳流程)發現,多步驟流程真正容易出問題的地方,其實是進度指示。進度指示必須跟實際的步驟數一對一對應,不能為了畫面好看就把幾個步驟合併顯示成一個進度點,也不能把某些步驟藏起來不顯示。Baymard 在結帳流程的可用性測試中也觀察到,非線性的結帳流程會讓好幾位受測者感到困惑,甚至產生不安,因為這打破了使用者原本對「這是一條直線流程」的心理預期。
這也是為什麼多步驟表單不能當成萬靈丹隨手套用,Nielsen Norman Group 與 Baymard 這兩份研究的前提,都是步驟拆分本身要拆對。步驟之間資訊接不起來、進度顯示又誤導使用者,多步驟表單反而比單頁表單更容易讓人半途而廢。問題就落在下一個關鍵,表單該怎麼拆,才會拆對。
把表單拆成步驟時要做的四項設計決策
把一份表單拆成多個步驟,實際上要做四項決定:怎麼分組欄位、進度要怎麼交代、要不要用條件邏輯跳過不相關的問題、要不要讓使用者中途離開後還能回來續填。這四項決策不是各自獨立,舉例來說,一旦用了條件邏輯,不同使用者實際要走的步驟數量就會不一樣,進度提示的呈現方式也得跟著調整,不能只套一組固定的「第幾步、共幾步」。拆開來一項項決定,比較不容易漏掉。
步驟數量與欄位分組的拿捏原則
分組的判斷邏輯,核心是同類型的問題放在同一步,而不是把所有欄位平均切成幾等份。像是一份訂購表單,「姓名、聯絡方式」這類基本聯絡資料放第一步,「數量、規格、客製化需求」這類需求細節放第二步,「付款方式、發票資訊」這類確認資料放最後一步,每一步只聚焦一個明確的主題,讓使用者填完一步,就有這個階段做完了的感覺。這個原則其實呼應了 Nielsen Norman Group 對分步驟揭露的說明:這種模式適合任務步驟本身彼此獨立、有先後關係的情境,而不是隨便把欄位平分。
排列順序也有講究:負擔小、幾乎不用思考的題目,像姓名、Email,放在第一步;比較費力、需要停下來想一想的題目,像詳細需求說明或上傳檔案,往後面放。讓使用者先投入一點時間,後面幾步反而比較不容易半途放棄。瑞士巴塞爾大學研究團隊(Mirjam Seckler 等人)2014 年發表於 CHI 研討會的表單研究發現,遵循可用性準則設計的表單,78% 的使用者能一次無誤提交;沒有遵循準則的表單,這個比例只剩 42%。這個數字反映的是表單設計細節(分組合不合理正是其中一項)確實會影響完成品質,並不是在說拆成多步驟本身能讓完成率從 42% 拉到 78%。同時也別走另一個極端:步驟切得太細,使用者填完一步又一步卻感覺一直沒有進展,一樣容易提高中途離開的機率。分組沒有固定的「幾步最好」公式,判斷標準始終是同一頁的問題彼此是不是同一件事。

進度提示不只是裝飾用的進度條
進度提示是很多人隨手放一個進度條就交差的東西,實際上它得說真話。畫面上顯示的進度,必須對應使用者實際還要填的步驟數,不能為了視覺好看而隱藏或合併顯示。Baymard Institute 的研究建議,整個流程要維持完全線性,同一個頁面不應該讓使用者看到兩次;進度指示上已經走過的步驟,也建議做成可以點擊回頭的樣式,讓使用者確認或修改前面填過的內容。
具體的呈現方式其實有好幾種。以 WPForms 為例,它的說明文件列出三種內建的進度指示樣式:進度條、圓形指示器,以及連接線風格,也可以選擇完全不顯示;選用進度條時,進度文字預設會顯示「第幾步、共幾步」,並可以自訂文字與顏色。除了進度樣式,「上一步」這顆按鈕也是進度體驗的一部分,WPForms 的說明文件提到這顆按鈕預設是隱藏的,得逐頁手動開啟;沒打開的話,使用者填到一半想回頭修改,會找不到路可以回去。

條件邏輯讓步驟能跳過不相關欄位
不是每個使用者都該走過表單裡的所有步驟。條件邏輯(conditional logic)可以依照使用者前面的回答,動態跳過整段跟他無關的頁面或欄位。舉例來說,一份服務申請表單如果先問「你需要的是個人方案還是企業方案」,選了個人方案的人就能直接跳過整個「公司統一編號、請購流程」的步驟,不用面對一堆跟自己無關的問題。這種被迫回答不相關問題的感覺,正是使用者半途放棄的常見原因之一。
條件邏輯有兩種顆粒度:一種是頁面層級,依前面欄位的答案決定整個步驟要不要顯示,WPForms 與 Gravity Forms 的說明文件都把這種能力列為多頁表單的內建功能,Gravity Forms 甚至還多一種「下一步」按鈕層級的條件邏輯,可以要求使用者先勾選同意條款才能繼續往下一步;另一種是欄位層級,在同一個步驟裡依答案顯示或隱藏個別欄位,Fluent Forms 的說明文件就把這種依提交值動態顯示或隱藏欄位的條件邏輯,列為免費版就內建的功能,不需要升級付費版。多步驟表單通常兩種顆粒度都會用到,各自解決不同層次的問題。

中途離開後的儲存與續填機制
多步驟表單天生比單頁表單多一個風險:表單本身較長、需要停下來想清楚才填得完,使用者填到一半被電話打斷,或乾脆先去查一個資料再回來,如果沒有儲存機制,前面填的內容就整個作廢,等於逼使用者要嘛一口氣填完,要嘛砍掉重練。
中途儲存實際上有兩種做法。一種是儲存後產生一個專屬的續填連結,使用者可以選擇讓系統把連結寄到自己的 Email,之後點連結就能回到原本填寫的進度繼續,Gravity Forms 的 Save and Continue 功能就是這種做法,它的說明文件寫明這個連結預設 30 天內有效,超過期限就無法再存取。另一種是系統在背景自動記錄使用者填到哪一步,重新整理頁面或關掉分頁後回來,進度還在原地,使用者完全不用另外做動作,Fluent Forms 的多步驟表單就支援這種逐步資料儲存,並且額外提供一個手動的「儲存進度」功能,還能選擇在使用者第一次儲存或更新進度時發一封提醒 Email。前者需要使用者自己動一下,點按鈕、確認信箱;後者體感無感,但技術上更依賴瀏覽器本機儲存或帳號登入狀態。

WordPress 常見表單外掛的多步驟功能落差
知道原理跟該做的設計決策之後,實際動手做 WordPress多步驟表單,多半得靠外掛。WordPress 生態圈裡有幾款外掛特別常被拿來做多步驟表單,在這件事情上做到的程度落差不小,有的功能完整但要付費才解鎖,有的免費版就夠用,也有完全不支援、得另外加裝擴充的。以下幾款是這個生態圈裡最常被提到、市佔率高的代表,各有各的定位與限制,沒有哪一款適合所有人,怎麼選,要看自己的預算、需不需要條件邏輯、需不需要中途儲存這些實際需求。

WPForms 多頁功能與條件邏輯都要付費方案
WPForms 用一個叫「Page Break」的欄位,把表單切成好幾頁,前面提過的三種進度指示樣式與跳頁條件邏輯,都是它的內建功能,整體來說功能算完整。
但有一個很容易被忽略的限制,多頁表單功能不在免費的 Lite 版本裡,得升級到付費的 Basic 方案以上才能使用。條件邏輯同樣不在 Lite 版本裡,一樣需要 Basic 以上的付費方案。也就是說,如果現在用的是 WPForms 免費版,想做多步驟表單,第一件事是先確認方案等級夠不夠,而不是急著找 Page Break 欄位在哪裡。


Gravity Forms 無免費版,多步驟功能全內建
Gravity Forms 本身就是全付費、沒有免費版本的表單外掛,所以「免費版夠不夠用」這個問題,對它來說並不適用。它把多頁表單當成核心功能內建,不是額外加購的擴充。
購買授權之後,進度條、步驟指示器、頁面導覽(上一步、下一步、送出)、前面提過的頁面層級與按鈕層級條件邏輯,以及 Email 連結式的 Save and Continue 中途儲存,都是基礎能力就有,不需要再另外加裝外掛。對於預算允許、想要一套功能齊全又不用東拼西湊的方案,Gravity Forms 算是把多步驟這件事想得比較完整的選項。

Forminator 免費版內建的頁面斷點與條件邏輯
跟 WPForms 剛好相反,Forminator(WPMU DEV 開發)的多步驟功能不需要額外付費。免費版本身就內建「Page Break」模組,能把表單切成好幾頁。
它同時支援依欄位答案顯示或隱藏其他欄位的條件邏輯,一樣是免費版就有的功能。對預算有限、只是想先做出一份堪用的多步驟表單的人來說,Forminator 是一個值得知道的選項,不用一開始就考慮升級付費方案。


Fluent Forms 條件邏輯免費、多步驟要 Pro
Fluent Forms 的免費版功能相對大方,連前面提到的條件邏輯都免費內建,不需要升級。但多步驟表單跟中途儲存續填進度,這兩項功能都被歸在付費的 Pro 版才開放。
這一點容易讓人誤判,光看「這款免費版功能很多」,不能直接推論「多步驟表單也一定免費」。每一項功能都得分開查證,免費版慷慨的地方,不代表所有功能都慷慨,Fluent Forms 就是一個很具體的反例。


Contact Form 7 得靠外掛才有多步驟功能
Contact Form 7 是 WordPress 生態圈裡安裝量最高的聯絡表單外掛之一,很多人第一個想到的表單工具就是它。但它的核心設計就是單頁聯絡表單,核心版本聚焦在欄位標籤語法與寄信設定,沒有內建的多步驟或分頁功能。
要用 Contact Form 7 做出多步驟表單,得另外安裝專門的擴充外掛才能實現,這在生態圈裡算是常見的做法。想清楚這一點,是為了在選外掛的時候不會誤以為裝了 Contact Form 7 就自動有分頁能力,它的簡潔正是取捨的結果,多步驟從一開始就不在它的設計範圍裡。

適合拆成多步驟的表單,以及該保持單頁的情況
前面談的原理跟外掛落差,最後都要落地成一個實際判斷,這份表單該不該拆成多步驟。核心判準是表單本身的複雜度與問題跨度,問題多、橫跨好幾個不同性質的資訊區塊時,拆步驟的效益才會出現;反過來,單一目的、只有幾個欄位的簡短表單,硬要拆成兩三步,多半只是多讓使用者按兩次「下一步」,看不到什麼實質效益。
內容龐雜、跨主題的申請與訂購流程適合拆步驟
像活動報名這種表單,個人資料、場次選擇、付款資訊是三種性質完全不同的問題;產品客製化訂購,規格選擇、收件資訊、付款又是另外三類;求職應徵表單也一樣,基本資料、工作經歷、上傳履歷彼此性質不同。這幾種表單天生就分成好幾類欄位,適合依資訊性質拆成對應的步驟,讓使用者一次只面對一種性質的問題。
這正好呼應 Nielsen Norman Group 對分步驟揭露的說明:適用情境是任務步驟本身彼此獨立、有先後關係。這類表單的欄位分組本來就存在,拆步驟只是把原本就分好的邏輯,用畫面呈現出來而已,不是強行切割。
單一用途的簡短聯絡表單,不必勉強分頁
反過來,一份只是想讓訪客留下姓名、聯絡方式、簡短留言的聯絡表單,欄位本來就少,彼此之間也沒有性質上的分類必要。硬要拆成多步驟,使用者只是多按幾次「下一步」,看不到認知負荷降低的效益,維持單頁反而是比較乾脆的做法。
判斷依據永遠是這份表單的欄位彼此是不是天然分屬不同類別,而不是表單長不長這種表面標準。一份表單就算只有八個欄位,只要涵蓋的是幾種完全不同性質的資訊,也可能適合拆;一份表單就算有十幾個欄位,如果全部都是同一類性質的問題,拆開來也未必有幫助。

多步驟表單能不能真的幫上忙,看的不是有沒有拆頁,而是每一項設計決策有沒有做對,分組合不合理、進度指示說不說真話、條件邏輯有沒有幫使用者省下不必要的問題、中途離開後回不回得來。這幾件事都處理到位了,WordPress多步驟表單才會是讓使用者更願意填完的工具,而不是另一道要跨過的關卡。至於自己手上這份表單,適不適合拆,回頭看它問的問題彼此性質差多少,答案通常已經很清楚。
