在CRO（Conversion Rate Optimization）的整個“學術範疇”中，表單轉化率的提升可謂是核心中的核心。表單只是HTML眾多元素之一，但其商務意義卻格外重要。表單中包含一些子元素也十分值得我們探究，如表單標題、輸入框、單選框、複選框、下拉菜單等，當然還有提交按鈕。表單最主要的應用在於註冊、訂閱和提交訊息。本期，我們將介紹表單設計的一些要點，希望對你提升轉化率有所幫助。
將表單放入首屏
我們經常看到著陸頁面說了一個精彩的故事，提供了各個具有說服力的元素來促使訪客填寫表單。然而設計師卻把表單放在頁面的最下方。這看來是一個非常具有“敘事風格”的安排，實質上對提高轉化率毫無幫助。正確的做法是將表單放入首屏也就是我們常說的“fold”。唯有這樣我們的轉化才有所保障。如果你還是不放心，可以放一個懸浮在固定位置隨頁面滾動的表單，亦或是在故事的最後放置一個回到表單錨點的按鈕。
測試最佳的CTA
就如我們開篇所言，表單包含的元素很多，其中可能最關鍵的元素就是提交按鈕了。這個按鈕有另一個名字，叫做“Call-To-Action”也就是行動號召。這個按鈕的大小顏色和文字都非常有講究。比如我們通常認為CTA要大要顯眼，周圍要留白。顏色方面一般選擇橙色，但是筆者認為任何其他能抓住眼球的顏色也會是不錯的選擇，這裡強調一個強對比。文字方面你可以測試很多不同選擇，比如“立即購買”，“免費加入”，“馬上試用”等。同時在表單旁你可以用小字註釋一些關鍵訊息，如“三十天無理由退款”，“限時免費配送”。總之要為訪客的轉化掃清障礙。
減少並優化表單選項
相信很多人看到5個以上文本輸入框就會產生厭惡的感覺。的確，我們非常擔心網頁向我們索取大量個人訊息。在我們設計表單時要注意優化各個輸入項。要做到能不需要填就不要索取。舉個例子，要了手機就別再要座機；再有既然要了身份證號碼就別再讓訪客填生日了。設計上要用對控件，讓人填性別就用單選框，避免下拉菜單和多選框。讓人填省份的時候不要按照拼音順序，每次找“上海”都在好下面有木有？還有那永遠輸不對的驗證碼，圖片緩存能不在這裡開啟嗎？
在全民手機上網的時代，你的表單是否方便用戶在移動小屏幕使用是另一個優化點。糟糕的表單設計讓人抓狂最終流失大量轉化。近期我們探討了移動行銷的一些要點，其中也包含瞭如何通過HTML5增強表單填寫的經驗，請移步擴展閱讀。
將表單拆分步驟
在我們不得不收集大量的訊息時，比如婚戀網站和求職網站，我們需要將我們要收集的數據分成幾個步驟。這是兩方面的考慮。首先如上述所言，我們需要讓表單內的需要填寫的輸入框越少越好，這樣訪客才不會被“嚇走”。另一方面，我們需要先收集一些訊息，讓訪客中途放棄後有機會再回來完成填寫。剩下的步驟我們可以用電郵等方式進行。在設計表單各步驟時，我們需要提供讓訪客跳過中間某幾步的功能，同時要告訴訪客一共有幾步以便產生合理的預期。如果收集訊息較多，不管你是否拆分錶單，體貼地告訴訪客他們大約需要多少時間完成這個流程將會非常有效。
拆分錶單另一個好處是一旦訪客提交失敗丟失所有填寫的數據時不會損失全部數據。順便提一句，考慮到訪客的網絡狀況，當我們在設計表單時應該利用AJAX技術使數據提交後再跳轉頁面。
應用自動填表
你有沒有見過這個黑科技？谷歌的Chrome瀏覽器的市場份額占到了58%，善於利用谷歌的自動填表功能將會極大地改善用戶體驗。
至於如何實現？請參考谷歌開發者文檔，傳送門在這裡（需翻牆）。
利用SSO提高註冊率
SSO是Single-Sign-On的縮寫，也就是我們俗稱的第三方登錄。常見的有QQ登錄、微博登錄、微信登錄、淘寶登錄、Google賬號登錄。下圖是騰訊系的京東商城的登錄頁面。
SSO的優點是簡化註冊流程，免去用戶設定複雜密碼又忘記的麻煩。缺點是你也許要再問用戶要手機號碼，郵箱地址這些訊息。 （不過你要下單買東西不是必填這些的嗎？）
在適當的時候展示表單
筆者本人非常討厭Pop-up，不管是什麼時候。但是就連SmartInsights和MarketingProfs都對它樂此不疲。前者還沒開始讀就彈出讓你訂閱，後者過幾秒鐘就會自動彈出影響用戶體驗。當用戶不厭其煩地關閉時，你應該立即停止彈出表單。取而代之的是你可以在用戶滾動到文章末尾時彈出，或者採用其他方式。要么，你就乾脆像FinancialTimes那樣直接給一個Pay Wall。
保存填了一半的表單
在瀏覽器啟用Cookie的環境下，我們可以自動保存訪客已經填寫的內容。這樣當訪客再次進入頁面時，我們可以自動調取Cookie而不必讓用戶再次從頭填寫。這樣做的好處在於當訪客處在不良信號和網絡連接的環境中時可以為客戶實時保留階段性成果。具體的做法請參考Tony Davis的方案。至於調用時機，你可以選擇訪客離開頁面之前，或者是每過一定時間，還可以是每填寫幾個選項。
最後的福利
如果你想學習如何設計表單，我推薦你Lynda的課程Web Form Design Best Practices。主講的Luke Wroblewski在2008年的經典教程依然是你學習的好資料。 PDF版地址在這裡。