23個表單設計最佳實踐來增加提交

所有企業都可以從更多的表單提交中受益。 您可能以前見過：大多數流量在填寫表格之前就離開了，而留下來的人，並非所有人都完成了它。

如果少於 100% 的訪問者填寫您的表單，您就有機會。

表格在業務中起著不可或缺的作用。 註冊表格、登錄表格、訂單表格、付款表格、反饋表格、患者表格、聯繫表格 - 表格豐富！ 我們需要網絡表單來產生潛在客戶、增加參與度和擴展。

表單是網站訪問者和您之間的橋樑，但如果不進行優化，它們就會成為障礙。

除非表格被填寫並提交，否則它沒有完成它的工作。 除非企業充分利用其接收到的表單數據（例如，及時返回、發送新聞通訊、豐富表單數據以生成潛在客戶），否則表單將被浪費。

創建任何舊形式都很容易； 創建一個出色的表單需要知道是什麼阻礙了用戶。 出色的 Web 表單設計需要了解如何有效地使用所有表單元素：標題、子副本、表單字段、字段標籤、操作按鈕以及糾正和肯定反饋。

管理好它，您將獲得高轉化形式的回報。 您將以相同的流量獲得更多潛在客戶，節省營銷費用並更快地實現相關業務目標。

那麼，從哪裡開始呢？

問問自己：我應該使用表格嗎？

首先決定是否應該使用表單。 如果表單沒有為您或您的用戶提供足夠的價值，最好不要擁有它。 甚至可能有更簡單的方法來獲取您想要的信息。

社交媒體註冊和登錄選項已成為這些表單的流行替代品，因為它們可以避免用戶再次輸入密碼。 它的便利性增加了訪問者通過手頭的操作並留在您的網站上的機會。

如果您確實認為使用表單是值得的，請使用以下提示來告知您的策略，並使用我們的 Ultimate Web Form Checklist 檢查您的表單，以確保其盡可能有效：

明確動機

當用戶覺得他們從表單中獲得了有價值的東西時，他們更有可能完成它。 這是一個成本效益分析的問題：他們投入時間和精力會得到什麼？

本文中的表單設計最佳實踐將使您的表單更具吸引力、令人愉悅且易於使用，從而降低完成的感知成本。 不過，您可以強調表單的價值或目的以增加提交。 他們會創建一個允許他們做 X、獲得免費試用或獲得幫助的帳戶嗎？ 無論用戶從交易所中得到什麼，都要說清楚。

強有力的標題、以利益為導向的文案和直接號召性用語 (CTA) 可以提供幫助。 不要忘記說服仍在發揮作用。

如果您希望訪問者註冊您的時事通訊，請說明賣點。 “更新”沒有說服力。 更新什麼？ 他們還得到什麼嗎？ 告訴他們為什麼他們應該關心。

顯示表單的長度也是一個好習慣。 如果它很短，請使用 CTA 按鈕一次顯示所有字段，這樣他們就知道它有多快。 如果它是一個有幾頁的較長的表格，包括一個進度條，這樣他們就會覺得自己接近了終點線。 他們將不太願意放棄和浪費他們的進步。

觀察那些在你之前的人

每個人都對一個網站的表單長什麼樣子有一個想法，這些想法是比較一致的。 這是因為大多數 Web 表單都遵循使它們看起來相似的一般準則。 這不是偶然的。

Web表單無處不在，由於風格和領域的相似性，人們有期待。 堅持這些期望會創造一種熟悉感、安全感和輕鬆感。

如果你認為一個新的領域或表單設計會起作用，你可以有點創意。 但是，如果您偏離標準太遠，請知道有些用戶可能會感到困惑並放棄表格。

準備接受審判

不管他們是否意識到這一點，人們都是根據外表來判斷的。 企業無法逃避這個事實，因此您的網站和表格具有吸引力和專業性就顯得尤為重要。 考慮您的網絡表單如何與頁面和網站的風格相適應總是有​​幫助的。

要記住的兩個介紹風格提示是空間和可讀性。

空間：通過在元素之間保持合理的空間來簡化導航。 應該清楚哪些標籤與哪些輸入字段一起使用。 添加空間還可以防止擁擠的外觀，使表格感覺更複雜。

可讀性：空格有助於提高可讀性，但表單設計者還應考慮文本選擇，包括易於閱讀和大小合理的字體。 始終刪除所有不必要的細節，並以普通用戶理解的閱讀水平編寫。 使用句子大小寫也可以提高可讀性。

保持簡短

很容易掌握有關您獲得的潛在客戶的每一個小細節，但您應該只詢問您需要知道的內容。 你問的越多，表格越長，表格越長，你收到的提交就越少。 時間很寶貴，所以要尊重他們的。

如果有您不需要但設置為保留的字段，請指出哪些是必需的。 大多數公司用星號表示必要的字段。 不介意的用戶會填寫每個字段，但那些對回復其他字段或提供太多個人信息不感興趣的用戶可以縮短完成時間。

您還可以通過在有意義的地方壓縮字段來使表單看起來更短。 例如，您可以將一個字段用於全名，而不是兩個用於名字和姓氏。

具有邏輯的結構形式

有效的網頁表單設計就像對話一樣流暢。 在構建表單時，想像您正在與您的領導交談。 遵循邏輯順序並將類似的問題組合在一起。

分組後，按從最簡單到最難的順序排列字段。 人們更喜歡先填寫簡單的信息，一旦他們有時間填寫大部分錶格，他們就更有可能完成。

通過良好的形式設計減少眼球運動和混亂

限制用戶的眼睛必須移動多少使您的表單更易於遵循並減少錯誤和表單放棄。

首先讓您可以輕鬆分辨表單的哪些部分組合在一起。 表單字段的標籤應該緊挨著字段或在它上面——永遠不要在下面。 標籤也應該最接近它們各自的字段，而不是在兩個字段之間相等。 這有助於用戶快速辨別哪些信息流向何處。

使用一列而不是兩列使表單看起來更乾淨，並防止用戶來回曲折。 然後將文本向左對齊，以便閱讀更自然。

設計有用的提示

您可以將一些有用的視覺提示合併到表單的設計中，以幫助引導用戶完成。

這些線索之一是現場焦點。 它通過指示選中的框來幫助用戶隨時了解他們的位置。 您可以通過使用粗體邊框、顏色或其他效果突出顯示框來實現此目的。 您還可以從一開始就突出顯示第一個字段，以便用戶了解效果的含義。

另一個常見的視覺提示是密碼強度指示器。 如果您正在設計註冊或帳戶創建表單，請使用此指示器向客戶展示他們創建密碼時的密碼強度。

如果您對新的設計提示有想法，可以使您的表單更具吸引力且易於瀏覽，請進行測試。 歡迎創新，但如果它不起作用，請願意將其刪除。

利用預填充和自動功能

預填充、自動填充、自動填充和自動格式化可以減少表單完成時間，同時使表單更易於遵循並減少錯誤。

預填是當您使用示例答案填寫表單字段時。 文本通常顏色較淺，以表明它是一個示例。 提供示例答案可以闡明字段中的內容以及用戶應輸入的格式。無論您做什麼，都不要將字段標籤放在字段本身中。 一旦用戶選擇了該字段，文本就會消失，用戶可能很難記住他們必須輸入的內容。

自動填充使用存儲在用戶瀏覽器中的用戶數據來自動填寫表單字段。 這可以減少用戶必須填寫的字段數量，但如果填寫錯誤信息也會令人沮喪。 另一方面，自動完成功能會根據用戶開始輸入的內容自動完成用戶的響應。 要利用這些功能，請確保優化您的表單以使用自動填充。

您還可以實施智能默認值。 這些默認值會根據用戶先前響應的數據自動填充信息。 例如，如果用戶輸入他們的城市，表單可能會自動填寫相應的郵政編碼。

另一個自動功能是自動格式化。 如果做得好，它可以最大限度地減少對複制說明或示例答案的需求。 自動格式化是當字段在用戶輸入時格式化用戶輸入，因此用戶不必考慮他們是否以正確的方式輸入。 這對於經常採用不同間距或格式的變量（如日期、電話號碼和信用卡號碼）非常有用。

使用條件邏輯

有時形式問題與某些細分受眾群無關，會浪費他們的時間。 沒有什麼比填寫表格並不得不回答或跳過幾個對您不適用的問題更糟糕的了。

如果這是可能的，請考慮使用條件邏輯。 具有條件邏輯的表單基於用戶的初始響應向給定用戶顯示問題。 通過這種方式，您可以為用戶提供個性化的體驗，其中僅包含相關問題。

使用正確的輸入控件

在設計表單時，您可以使用多種輸入控件：附件按鈕、複選框、下拉菜單、單選按鈕等。 為每個目的使用正確的輸入控件很重要。

複選框和單選按鈕經常混淆。 當用戶可以從一系列選項中選擇多個選項時，或者當您要求用戶選擇加入或同意聲明時，請使用複選框。 當用戶只能選擇一個選項時使用單選按鈕。

添加輸入控件時，請務必在使用它們時考慮到道德規範。 使用使用戶感到困惑或容易錯過的預先選中的框或切換可能是不道德的。 在某些情況下，這是非法的。

按表單按鈕做正確的事

按鈕是關鍵的導航元素。 它們是提交表單或使其進入下一組問題的關鍵。 有時它們會幫助用戶切換到正確的表單，例如當他們在登錄表單上但需要註冊表單時。 按鈕引導用戶朝著正確的方向前進。

按鈕需要可見、吸引註意力並清楚它們的用途，否則放棄表單的機會會增加。 CTA 按鈕應該足夠大，可以看到，但又不能太大，以至於他們覺得垃圾郵件。 一些表單使用顏色或陰影來幫助按鈕脫穎而出。

表單有兩個重要按鈕——主要按鈕和次要按鈕。 主要按鈕鼓勵主要的期望動作並且始終存在。 並非每個表單都有輔助按鈕，但它通常用於提供支持。

您還可以使用微動畫或複制確認向用戶展示系統已註冊他們按下按鈕。

使錯誤清晰且易於修復

在不提供幫助的情況下通知用戶錯誤是令人沮喪的。 用戶友好的錯誤消息提供了解決方案。

始終設計表單以顯示哪個框包含錯誤，因此用戶不必再次掃描整個表單。 內聯錯誤消息和驗證效果最好。 這是當錯誤本身旁邊出現一條消息時。 您還可以突出顯示該框或將光標移至該框。

如果可以，請具體說明錯誤，這樣用戶就不必猜測它是什麼。 信息與您的記錄不符？ 是由於不允許的錯字或符號嗎？ 也許他們正在創建一個密碼，但它不符合長度要求。 不管是什麼，告訴他們。

當出現錯誤時，立即分享它的存在。 當用戶最終點擊提交時，更多的是讓他們失望，而他們期望的結果並沒有發生。

保存緩存數據

您是否曾經開始填寫表格但被打斷？ 也許您的 WiFi 壞了、頁面重新加載或您不小心退出了網站？

當這些類型的事件發生時，存儲緩存數據可以避免用戶重新啟動表單。 它可以保護他們免受第一方的挫敗感，並增加完成表格的機會。

與響應式設計交朋友

如果您還沒有，那麼是時候採用響應式設計了。 這適用於您網站的所有區域，包括您的表單。

響應式設計適應用戶使用的設備，確保您的網站始終看起來很棒並且可以正常工作。 現在超過 90% 的全球互聯網用戶使用移動設備上網，因此表單可用性在這些設備上保持一致至關重要。

是的，可訪問性也適用於此

我們再次談論它，不僅因為它對商業和法律要求有好處，而且因為它是正確的做法。 所有網站和這些網站的功能都應該是可訪問的。 這意味著製作每個人（包括殘疾人）都可以訪問和填寫的表格。

可訪問的表單可以很好地與屏幕閱讀器配合使用，並且不依賴於顏色。 例如，單獨使用紅色來指示表單錯誤對於色盲用戶來說可能具有挑戰性。

有關更多提示，請查看我們的殘障用戶無障礙設計指南。

製作。 那。 複製。 工作。

表單並不都是框和用戶條目。 良好的用戶體驗寫作對於有效地引導用戶完成任何形式都是必不可少的。 表單 UX 副本存在於錯誤消息和微副本中，例如按鈕、佔位符和標籤。

表格副本應簡短、有啟發性且易於理解。

編寫表單標籤時，僅使用名詞並摒棄動詞（例如，“姓名”而不是“輸入姓名”）。 它更加直接和標準。 對於按鈕，使微文案以結果為導向，以便用戶準確地知道他們在做什麼（例如，“訂閱新聞通訊”或“獲取 PDF”而不是“提交”）。

只要它簡短且有目的，表格副本也可以提供方便的細節。 將“姓名”替換為“卡片上的姓名”或“禮品收件人姓名”可以解決用戶不確定性並防止錯誤。

另一種選擇是添加微文案，以解釋為什麼您要求提供個人信息，如果它看起來不合適的話。 您可以分享您要求提供電話號碼或郵政編碼的原因，以及如果還不明顯，您將如何使用它。

消極的詞和短語往往會讓人停下來思考，而積極的措辭則更友好。 即使您說您不會向某人發送垃圾郵件，也要避免使用帶有負面含義的詞，例如“垃圾郵件”。

文案還通過使表格感覺受歡迎和品牌化來增加表格的風味。 雖然表單字段需要保持指導性，但只要消息被中繼，表單標題和其他文本就可以與品牌消息一起獲得樂趣。

談論隱私

隱私問題阻礙了許多形式，尤其是當用戶對在線共享個人信息的威脅有了更多的了解時。 用戶應該接受教育，表單應該考慮到這一點。

大約 29% 的人將安全問題作為他們放棄表格的原因。 如果您有保護用戶數據機密性的隱私政策，請告知他們。 理解並緩解擔憂，這樣 29% 的人就可以放心地與您分享。

看數字

如果您正在重新設計表單，那麼您擁有最有價值的工具：數據。

使用您的表單查看用戶的歷史記錄並尋找模式。 用戶在哪里以及為什麼會流失？ 當用戶選擇離開時，可以揭示一個問題，無論是特定字段導致放棄還是他們不清楚按鈕在哪裡。 有時只需修復一個令人困惑的元素，就像 Expedia 一樣。

在查看他們的表單數據時，Expedia 注意到一個特定的表單字段阻礙了轉化。 人們會輸入錯誤的信息，然後不允許進行下一步。 所以他們刪除了該字段。

那一年，他們從表格中賺了1200萬。

A/B 測試表單設計

公司不應該只用表單查看用戶歷史； 他們應該進行測試以繼續改進。 尤其是 A/B 測試，是不斷升級 Web 表單的好方法。

要對錶單進行 A/B 測試，請創建相關表單的兩次精確迭代，但更改一個因素。 它可以是標題、一份縮微副本、CTA 的顏色或其中一個字段的刪除。 在指定的時間內同時使用這兩種方法，然後評估哪一種表現更好。

為自己測試想法是一個很好的經驗法則，因為適用於一家公司的方法並不總是適用於下一家公司。 例如，有人說刪除表單上的電話號碼字段會增加轉化率。 了解您是否會與您的獨特受眾獲得相同結果的唯一方法是對其進行測試。

決定：單步與多步形式

單步表單是一次性列出所有字段的標準表單。 多步驟表格將問題分成多個頁面。 當用戶完成第一個時，他們會進入下一個。

一項比較一步和兩步形式的研究表明，完成兩步形式的人增加了 14%。 其他研究也聲稱多步驟表單轉換得更好，但事實是，最適合您的方式將取決於您首先使用該表單的原因。

單步表格最適合收集基本信息和增加提交。 它們不太可能嚇跑新用戶或訪客，這就是為什麼它們經常用於聯繫、支持或登錄表單的原因。

多步驟表單最適合收集多個領域的信息。 將問題分散開來使表格看起來不那麼令人生畏並且更具吸引力。 當用戶已經致力於某個流程（例如購買產品）時，這種類型的表單特別有效。 在線訂購時，將計費步驟放在下一頁上是有意義的。

在構建多步驟表單時，您不希望表單無限地繼續下去。 在每一頁上對一些問題進行分組，這樣就不會出現過多的頁數。 構建多步驟表單是利用條件邏輯的絕佳機會。

無論您選擇哪種形式，都要實施本文中討論的設計和復制技巧。

決定：聊天機器人與 Web 表單

聊天機器人越來越受歡迎，可以成為吸引用戶和改善用戶體驗的有趣方式。 它們帶來了諸如增強的個性化和更快的響應時間等好處，一些企業已經開始使用它們來代替 Web 表單。

但是，聊天機器人或網絡表單是否會為您提供更好的性能取決於您的業務和用戶。 你應該擁抱未來，但不能盲目跟風。 嘗試進行測試以確認您是否要在開始之前使用聊天機器人，特別是因為聊天機器人是一筆不小的投資。

我們在我們的指南中討論了聊天機器人和表單的優缺點以及何時使用它們：聊天機器人的轉換效果優於 Web 表單嗎？

秘密選項三：自然語言形式

早些時候，我們提到每個人都對 Web 表單的外觀有著相似的想法，因為它們長期存在相似之處。 好吧，對於稀有的自然語言形式來說，這並不完全正確。

自然語言形式，或 mad libs 風格的形式，被寫成帶有填空選項的句子。 研究表明，這些表單的轉化率提高了，但與其他表單選項一樣，您需要自己測試一下，看看哪些在您的上下文中有效。

自然語言形式的優點是它們旨在讓人感覺更自然、更有吸引力和更個性化。 他們藉鑑了日常對話和寫作的熟悉程度。

但有幾個問題。 自然語言表單的格式會減慢掃描速度，這並不是大多數用戶在處理表單時所期望的。 在跨語言翻譯時，它還會產生識字和混淆問題。

取自 The Theme Foundry 的自然語言形式示例。

將您的表單轉化為體驗

這個標題用詞不當，因為所有形式都是一種體驗。 但並不是所有的形式都是好的——這就是我們的目標。

擁有表格已經不夠了。 表格需要有說服力、有吸引力且易於填寫。 僅僅因為用戶想要您的表單提供的內容，無論是白皮書還是帳戶，並不意味著他們會填寫它。 如果一個表格令人困惑或付出的努力超過了它的價值，它就會被放棄。

因此，本文中的提示。 使用它們創建具有激勵性微文案的出色 Web 表單設計，並觀察您的轉化率上升。

對我們的建議有疑問或想談談表格？ 伸手。