WordPress

WordPress多步驟表單真的能降低放棄率?拆對邏輯才有效

多數人以為只要把落落長的表單拆成好幾頁,使用者就會比較有耐心填完;實際上,步驟切錯地方、進度條又交代不清楚,中途放棄的人反而更多。想像一份活動報名表單,第一頁只問姓名和信箱,按下一步卻要重新整理頁面枯等,第二頁忽然冒出五個先前完全沒提示過的欄位。填到一半,不少人乾脆關掉分頁走人。

這種把表單拆成好幾個畫面、每次只問一小段問題的做法,一般稱為多步驟表單(multi-step form)。放到 WordPress 網站上,WordPress多步驟表單能不能真的降低放棄率,關鍵從來不是「有沒有拆」,而是拆的方式對不對,分組邏輯合不合理、進度提示說不說真話,才是使用者填不填得完的真正變數。

多步驟表單是什麼?

多步驟表單(也稱為多頁表單,multi-page form)是把一份表單原本要問的問題,拆成好幾個畫面或頁面,使用者填完一段、按下「下一步」才會看到下一段;跟把所有欄位一次攤開在同一頁、使用者要從頭滑到尾才填得完的單頁長表單,是兩種截然不同的填寫體驗。單頁表單的優點是使用者一眼就能看到整份表單有多長;缺點是欄位一多,畫面看起來就密密麻麻,容易讓人還沒開始填就先打退堂鼓。

這種「先只給一小部分、其餘留到後面才出現」的做法,Nielsen Norman Group 稱為漸進揭露(progressive disclosure)。這個概念指的是介面一開始只呈現使用者當下最需要的少數選項,其餘功能或欄位等使用者往下走、有需要時才顯示,避免一次把所有選項攤開嚇跑新手。Nielsen Norman Group 進一步把漸進揭露分成兩種:一種是階層式,把次要選項藏進子畫面,使用者要自己點開才看得到;另一種則是分步驟揭露(staged disclosure),把任務拆成一連串線性的步驟,像精靈(wizard)介面一樣一步接一步走完。多步驟表單屬於後者,特別適合把任務拆成彼此相對獨立、只是排列上有先後順序的段落,例如結帳、申請、預約,這類流程原本就得先填基本資料才能選方案,先選方案才能填付款資訊,順序本身就是流程的一部分。

單頁長表單把所有欄位攤在同一頁,多步驟表單拆成基本資料、選擇方案、付款資訊三段逐步填寫
多步驟表單屬於分步驟揭露,一次只給一小段問題,適合順序本身就是流程一部分的任務(資料來源:Nielsen Norman Group)。

實作上,多步驟表單有兩種常見做法:一種是每個步驟對應一個獨立網址,使用者按下一步會真的跳轉到新頁面;另一種是整份表單其實還是同一個網頁,只是透過程式在畫面上動態切換要顯示哪一段欄位,網址從頭到尾不會改變。對使用者來說,這兩種做法給人的體感差異不大,都是一步一步往前走;差別主要在底層技術怎麼實作,不影響前面談的分組與漸進揭露原則。

步驟切分能降低認知負荷與放棄率的原理

多步驟表單真正要解決的問題,是認知負荷(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%。同時也別走另一個極端:步驟切得太細,使用者填完一步又一步卻感覺一直沒有進展,一樣容易提高中途離開的機率。分組沒有固定的「幾步最好」公式,判斷標準始終是同一頁的問題彼此是不是同一件事。

訂購表單依問題性質分成基本聯絡資料、需求細節、確認資料三步,負擔小的題目放前面
分組看的是同一頁的問題是不是同一件事,不是把欄位平均切成幾等份;78% 與 42% 反映的是設計準則的影響(資料來源:巴塞爾大學 Seckler 等人 CHI 2014 研究)。

進度提示不只是裝飾用的進度條

進度提示是很多人隨手放一個進度條就交差的東西,實際上它得說真話。畫面上顯示的進度,必須對應使用者實際還要填的步驟數,不能為了視覺好看而隱藏或合併顯示。Baymard Institute 的研究建議,整個流程要維持完全線性,同一個頁面不應該讓使用者看到兩次;進度指示上已經走過的步驟,也建議做成可以點擊回頭的樣式,讓使用者確認或修改前面填過的內容。

具體的呈現方式其實有好幾種。以 WPForms 為例,它的說明文件列出三種內建的進度指示樣式:進度條、圓形指示器,以及連接線風格,也可以選擇完全不顯示;選用進度條時,進度文字預設會顯示「第幾步、共幾步」,並可以自訂文字與顏色。除了進度樣式,「上一步」這顆按鈕也是進度體驗的一部分,WPForms 的說明文件提到這顆按鈕預設是隱藏的,得逐頁手動開啟;沒打開的話,使用者填到一半想回頭修改,會找不到路可以回去。

進度提示與實際步驟一對一對應的線性做法,對照合併進度點、把步驟藏起來不顯示的錯誤示範與常見進度樣式
進度提示要反映實際還要填的步驟數,已走過的步驟可以點擊回頭;WPForms 另內建三種進度樣式(資料來源:Baymard Institute、WPForms)。

條件邏輯讓步驟能跳過不相關欄位

不是每個使用者都該走過表單裡的所有步驟。條件邏輯(conditional logic)可以依照使用者前面的回答,動態跳過整段跟他無關的頁面或欄位。舉例來說,一份服務申請表單如果先問「你需要的是個人方案還是企業方案」,選了個人方案的人就能直接跳過整個「公司統一編號、請購流程」的步驟,不用面對一堆跟自己無關的問題。這種被迫回答不相關問題的感覺,正是使用者半途放棄的常見原因之一。

條件邏輯有兩種顆粒度:一種是頁面層級,依前面欄位的答案決定整個步驟要不要顯示,WPForms 與 Gravity Forms 的說明文件都把這種能力列為多頁表單的內建功能,Gravity Forms 甚至還多一種「下一步」按鈕層級的條件邏輯,可以要求使用者先勾選同意條款才能繼續往下一步;另一種是欄位層級,在同一個步驟裡依答案顯示或隱藏個別欄位,Fluent Forms 的說明文件就把這種依提交值動態顯示或隱藏欄位的條件邏輯,列為免費版就內建的功能,不需要升級付費版。多步驟表單通常兩種顆粒度都會用到,各自解決不同層次的問題。

選個人方案的使用者直接跳過公司統一編號與請購流程步驟,選企業方案才需要填寫該步驟
條件邏輯分頁面層級與欄位層級兩種顆粒度,多步驟表單通常兩種都會用到(資料來源:WPForms、Gravity Forms、Fluent Forms)。

中途離開後的儲存與續填機制

多步驟表單天生比單頁表單多一個風險:表單本身較長、需要停下來想清楚才填得完,使用者填到一半被電話打斷,或乾脆先去查一個資料再回來,如果沒有儲存機制,前面填的內容就整個作廢,等於逼使用者要嘛一口氣填完,要嘛砍掉重練。

中途儲存實際上有兩種做法。一種是儲存後產生一個專屬的續填連結,使用者可以選擇讓系統把連結寄到自己的 Email,之後點連結就能回到原本填寫的進度繼續,Gravity Forms 的 Save and Continue 功能就是這種做法,它的說明文件寫明這個連結預設 30 天內有效,超過期限就無法再存取。另一種是系統在背景自動記錄使用者填到哪一步,重新整理頁面或關掉分頁後回來,進度還在原地,使用者完全不用另外做動作,Fluent Forms 的多步驟表單就支援這種逐步資料儲存,並且額外提供一個手動的「儲存進度」功能,還能選擇在使用者第一次儲存或更新進度時發一封提醒 Email。前者需要使用者自己動一下,點按鈕、確認信箱;後者體感無感,但技術上更依賴瀏覽器本機儲存或帳號登入狀態。

中途儲存的兩種做法:產生可寄到 Email 的專屬續填連結,以及系統在背景自動記錄填寫進度
寄連結的做法需要使用者自己動一下,背景自動記錄則體感無感,但更依賴瀏覽器本機儲存或帳號登入狀態(資料來源:Gravity Forms、Fluent Forms)。

WordPress 常見表單外掛的多步驟功能落差

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

WPForms、Gravity Forms、Forminator、Fluent Forms、Contact Form 7 的多步驟與條件邏輯免費付費對照
五款外掛在多步驟功能上的免費與付費界線各不相同,每一項功能都得分開確認,排列順序不代表優劣(資料來源:各外掛說明文件)。

WPForms 多頁功能與條件邏輯都要付費方案

WPForms 用一個叫「Page Break」的欄位,把表單切成好幾頁,前面提過的三種進度指示樣式與跳頁條件邏輯,都是它的內建功能,整體來說功能算完整。

但有一個很容易被忽略的限制,多頁表單功能不在免費的 Lite 版本裡,得升級到付費的 Basic 方案以上才能使用。條件邏輯同樣不在 Lite 版本裡,一樣需要 Basic 以上的付費方案。也就是說,如果現在用的是 WPForms 免費版,想做多步驟表單,第一件事是先確認方案等級夠不夠,而不是急著找 Page Break 欄位在哪裡。

WPForms 在 WordPress.org 的外掛頁面,說明區寫明多頁表單與條件邏輯屬於 Pro 版功能
WPForms 外掛目錄頁的說明區直接寫出,免費的 Lite 版不含多頁表單與條件邏輯,要升級付費方案才有。
WPForms Lite 表單編輯器點選分頁符號欄位後跳出升級提示,免費版無法加入分頁
在 WPForms Lite 的編輯器裡點「分頁符號」,會跳出「分頁符號 欄位 是 Pro 功能」的升級提示,免費版無法把表單切成多頁。

Gravity Forms 無免費版,多步驟功能全內建

Gravity Forms 本身就是全付費、沒有免費版本的表單外掛,所以「免費版夠不夠用」這個問題,對它來說並不適用。它把多頁表單當成核心功能內建,不是額外加購的擴充。

購買授權之後,進度條、步驟指示器、頁面導覽(上一步、下一步、送出)、前面提過的頁面層級與按鈕層級條件邏輯,以及 Email 連結式的 Save and Continue 中途儲存,都是基礎能力就有,不需要再另外加裝外掛。對於預算允許、想要一套功能齊全又不用東拼西湊的方案,Gravity Forms 算是把多步驟這件事想得比較完整的選項。

Gravity Forms 官網功能頁把分頁表單、條件邏輯與儲存續填列為內建功能
Gravity Forms 官網功能頁把分頁表單(Paginated forms)、條件邏輯與 Save & continue 列在同一排內建功能,購買授權後即可使用。

Forminator 免費版內建的頁面斷點與條件邏輯

跟 WPForms 剛好相反,Forminator(WPMU DEV 開發)的多步驟功能不需要額外付費。免費版本身就內建「Page Break」模組,能把表單切成好幾頁。

它同時支援依欄位答案顯示或隱藏其他欄位的條件邏輯,一樣是免費版就有的功能。對預算有限、只是想先做出一份堪用的多步驟表單的人來說,Forminator 是一個值得知道的選項,不用一開始就考慮升級付費方案。

Forminator 在 WordPress.org 的外掛頁面,由 WPMU DEV 開發的免費表單外掛
Forminator 外掛目錄頁標示由 WPMU DEV 開發,屬於另有付費升級的免費外掛;Page Break 分頁與條件邏輯在免費版就能使用。
Forminator 免費版表單編輯器插入分頁符號後,名稱與電子郵件在第一頁,文字欄位移到第二頁
Forminator 免費版從「插入表單欄位」就能加入分頁符號,編輯器頂端多出分頁設定,分隔線標出下一頁從哪裡開始。

Fluent Forms 條件邏輯免費、多步驟要 Pro

Fluent Forms 的免費版功能相對大方,連前面提到的條件邏輯都免費內建,不需要升級。但多步驟表單跟中途儲存續填進度,這兩項功能都被歸在付費的 Pro 版才開放。

這一點容易讓人誤判,光看「這款免費版功能很多」,不能直接推論「多步驟表單也一定免費」。每一項功能都得分開查證,免費版慷慨的地方,不代表所有功能都慷慨,Fluent Forms 就是一個很具體的反例。

Fluent Forms 在 WordPress.org 的外掛頁面,免費版功能清單列出條件邏輯
Fluent Forms 外掛目錄頁的免費版功能清單列有 Smart conditional logic,多步驟表單與中途儲存續填則要升級 Pro 版。
Fluent Forms 免費版編輯器的表單步驟元素呈淡色,點選後跳出免費版不支援的升級提示
Fluent Forms 免費版進階欄位裡的「表單步驟」呈淡色鎖定,點下去會顯示「免費版不支援表單步驟」並要求升級專業版。

Contact Form 7 得靠外掛才有多步驟功能

Contact Form 7 是 WordPress 生態圈裡安裝量最高的聯絡表單外掛之一,很多人第一個想到的表單工具就是它。但它的核心設計就是單頁聯絡表單,核心版本聚焦在欄位標籤語法與寄信設定,沒有內建的多步驟或分頁功能。

要用 Contact Form 7 做出多步驟表單,得另外安裝專門的擴充外掛才能實現,這在生態圈裡算是常見的做法。想清楚這一點,是為了在選外掛的時候不會誤以為裝了 Contact Form 7 就自動有分頁能力,它的簡潔正是取捨的結果,多步驟從一開始就不在它的設計範圍裡。

Contact Form 7 在 WordPress.org 的外掛頁面,有效安裝數超過一千萬
Contact Form 7 外掛目錄頁,認明藍色富士山圖示;核心版本定位在單頁聯絡表單,多步驟要另外安裝擴充外掛。

適合拆成多步驟的表單,以及該保持單頁的情況

前面談的原理跟外掛落差,最後都要落地成一個實際判斷,這份表單該不該拆成多步驟。核心判準是表單本身的複雜度與問題跨度,問題多、橫跨好幾個不同性質的資訊區塊時,拆步驟的效益才會出現;反過來,單一目的、只有幾個欄位的簡短表單,硬要拆成兩三步,多半只是多讓使用者按兩次「下一步」,看不到什麼實質效益。

內容龐雜、跨主題的申請與訂購流程適合拆步驟

像活動報名這種表單,個人資料、場次選擇、付款資訊是三種性質完全不同的問題;產品客製化訂購,規格選擇、收件資訊、付款又是另外三類;求職應徵表單也一樣,基本資料、工作經歷、上傳履歷彼此性質不同。這幾種表單天生就分成好幾類欄位,適合依資訊性質拆成對應的步驟,讓使用者一次只面對一種性質的問題。

這正好呼應 Nielsen Norman Group 對分步驟揭露的說明:適用情境是任務步驟本身彼此獨立、有先後關係。這類表單的欄位分組本來就存在,拆步驟只是把原本就分好的邏輯,用畫面呈現出來而已,不是強行切割。

單一用途的簡短聯絡表單,不必勉強分頁

反過來,一份只是想讓訪客留下姓名、聯絡方式、簡短留言的聯絡表單,欄位本來就少,彼此之間也沒有性質上的分類必要。硬要拆成多步驟,使用者只是多按幾次「下一步」,看不到認知負荷降低的效益,維持單頁反而是比較乾脆的做法。

判斷依據永遠是這份表單的欄位彼此是不是天然分屬不同類別,而不是表單長不長這種表面標準。一份表單就算只有八個欄位,只要涵蓋的是幾種完全不同性質的資訊,也可能適合拆;一份表單就算有十幾個欄位,如果全部都是同一類性質的問題,拆開來也未必有幫助。

活動報名、產品客製化訂購、求職應徵適合拆成多步驟,簡短聯絡表單維持單頁即可
該不該拆成多步驟,看的是欄位是不是天然分屬不同類別,而不是表單長不長。

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

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

WordPress多步驟表單真的能降低放棄率嗎?

WordPress多步驟表單能不能降低放棄率,關鍵在拆的方式對不對,不是有沒有拆。步驟切錯地方、進度提示又誤導使用者時,多步驟表單反而比單頁表單更容易讓人半途而廢。

多步驟表單的進度條該怎麼設計?

多步驟表單的進度條必須一對一對應使用者實際要填的步驟,不能為了畫面好看就合併或隱藏步驟,整個流程也要維持線性,同一個頁面不讓使用者看到兩次。已經走過的步驟建議做成可以點擊回頭的樣式,方便使用者確認或修改前面填過的內容。

WPForms 免費版能做多步驟表單嗎?

WPForms 免費的 Lite 版本不能做多步驟表單,多頁表單功能得升級到付費的 Basic 方案以上才能使用,條件邏輯也一樣。想免費做多步驟表單,Forminator 的免費版就內建 Page Break 模組與條件邏輯。

多步驟表單中途離開後能續填嗎?

多步驟表單可以靠中途儲存機制續填。Gravity Forms 會產生專屬的續填連結,也能寄到使用者的 Email,連結預設 30 天內有效;Fluent Forms 則在背景自動記錄填到哪一步,但續填功能要 Pro 版才有。

哪些表單適合拆成多步驟表單?

欄位分屬好幾種不同性質資訊的表單,適合拆成多步驟表單,像活動報名、產品客製化訂購、求職應徵。只留姓名、聯絡方式與簡短留言的單一用途聯絡表單,維持單頁反而比較乾脆。

資料來源
  1. Progressive Disclosure — Nielsen Norman Group
  2. Website Forms Usability: Top 10 Recommendations — Nielsen Norman Group
  3. Designing Usable Web Forms: Empirical Evaluation of Web Form Improvement Guidelines (CHI 2014) — 巴塞爾大學(Mirjam Seckler 等人)
  4. Ecommerce Checkout UX Guide - Optimize Your Order Flow — Baymard Institute
  5. How to Create Multi-Page Forms in WPForms — WPForms
  6. WPForms Pricing — WPForms
  7. WPForms – AI Form Builder for WordPress – Contact Forms, Payment Forms, Survey Form, Quiz & More — WPForms
  8. Conditional Logic for Multi Page Forms — Gravity Forms
  9. Save and Continue — Gravity Forms
  10. Is there a free version of Gravity Forms? — Gravity Forms
  11. Features | WordPress Form Builder Plugin — Gravity Forms
  12. Forminator Forms – Contact Form, Payment Form & Custom Form Builder — Forminator
  13. Fluent Forms Free vs Pro: Why and When You Need to Upgrade — Fluent Forms
  14. Fluent Forms – Customizable Contact Forms, Survey, Quiz, & Conversational Form Builder — Fluent Forms
  15. Creating a Multi-Step Form in Fluent Forms — Fluent Forms
  16. Save Progress Button in Fluent Forms — Fluent Forms
  17. Contact Form 7 — Contact Form 7