設計移動友好表單的 5 個技巧
已發表: 2018-09-23聯繫表格是許多網站的關鍵組成部分。 儘管它們的功能通常很簡單，但如果您想收集潛在客戶並與用戶保持聯繫，您仍然需要確保它們易於使用。 這通常不是桌面流量的問題，但如果您使用移動設備，使用表單可能會變得棘手。
在本文中，我們將討論設計適合移動設備的表單的重要性。 然後，我們將向您介紹五個技巧，以確保您的表單在移動設備上完美運行。
讓我們開始工作吧！
為什麼您的表單對移動設備友好很重要
表單有各種形狀和大小。 最常見的是，您將處理聯繫表格：
註冊表單（或選擇加入）也非常受歡迎，因為它們使您能夠在活動期間收集電子郵件並定位它們：
但是，表單可用於各種其他目的。 例如，您可能希望使用在線投票或測驗來收集信息，在這種情況下，您需要表單供用戶輸入響應。
換句話說，表單非常通用，幾乎每個站點都以某種方式使用表單。 因此，確保您的表單易於使用至關重要（除非您想為訪問者提供令人沮喪的體驗）。
使用台式計算機或筆記本電腦中的表單通常非常簡單。 您有鼠標和全鍵盤，因此選擇要使用的字段並輸入數據應該不是問題。 但是，從智能手機或其他小型設備瀏覽網頁會帶來一些麻煩。
當您在小屏幕上使用手指工作時，由於糟糕的設計決策，與表單交互有時會很痛苦。 這是您在自己的設計中需要避免的事情。 畢竟，如果移動用戶無法與您的表單進行交互，您可能會失去轉化、潛在客戶或完全惹惱訪問者。
同樣重要的是要了解移動流量現在與桌面來源一樣重要——如果不是更重要的話。 事實上，移動流量在過去幾年內已經超過後者。 這意味著在啟動新項目時，設計一個適合移動設備的網站應該是您的主要目標。
設計移動友好表單的 5 個技巧
幸運的是，設計適合移動設備的表單並不像您想像的那麼難。 在大多數情況下，只需牢記一些基礎知識並在表單上線之前對其進行徹底測試。 我們來談談怎麼做吧！
1. 刪除所有不必要的部分
表單包含的字段越多，在移動設備上使用就越困難。 這是因為，儘管設計得很好，但在移動設備上使用表單卻更加複雜。 通過減少表單包含的字段或部分的數量，您可以最大限度地增加訪問者填寫它們的機會。
這是一個聯繫表單的快速示例，其中包含一些可以不使用的附加字段：
在大多數情況下，一個優秀的聯繫表單所需要的只是姓名、電子郵件和要接收的消息正文。 其他一切都取決於您正在運行的網站類型以及您是否要收集潛在客戶。
最終，您的表單包含的字段越少，移動訪問者就越容易使用它們。 畢竟，即使設計良好，使用觸摸屏選擇字段也可能很困難，因此您希望盡量減少用戶必須進行的“跳轉”次數。
您在此階段的目標是查看站點的現有表單。 仔細檢查它們的每個部分，並考慮您是否真的需要我們前面提到的字段之外的任何其他字段。 如果有多餘的字段，只需將其剪掉即可。
2. 盡可能使用下拉列表
我們大多數人都習慣在移動設備上打字和使用觸摸屏。 然而，給朋友發短信和填寫聯繫表格是兩種截然不同的體驗。 對於後者，如果您必須輸入大量信息，您可能會感到沮喪。
使移動訪問者的生活更輕鬆的方法之一是簡化他們需要針對您的網站元素做出的選擇。 為了讓您了解我們在說什麼，讓我們以我們之前的餐廳預訂示例為基礎：
要進行預訂，您可能需要留下姓名、電子郵件、電話，並註明時間以及參加人數。 您可以通過兩種方式創建表單域來驗證預訂時間：
- 設置一個只接受數字輸入的字段。
- 設計一個下拉列表，包括所有可用的預訂時間。
正如您想像的那樣，後者對於移動用戶來說更加人性化。 使用這種方法，他們不需要輸入數字，他們可以從您提供的選項中選擇最適合他們的選項。
讓您查看表單並查看它們是否包含您可以用下拉菜單替換的任何字段的想法。 情況並非總是如此，因為您無法使用下拉菜單來收集姓名或電子郵件，但還有其他選項可能會起作用。
無論他們的用例是什麼，您都希望確保您的下拉菜單包含易於從移動設備中選擇的選項。 換句話說，使菜單足夠大，這樣人們就不必四處尋找正確的選項。
3. 確保您的提交按鈕易於觸摸
這個技巧非常簡單，但仍然值得一提。 您設計的每個表單都需要包含一種方式，供用戶確認他們想要提交他們輸入的數據。 在大多數情況下，這意味著創建一個提交按鈕：
當您使用普通計算機時，單擊提交按鈕是世界上最自然的事情。 但是，我們在移動設備上遇到了一些表單，其中按下按鈕比應有的要困難得多。
如果您的訪問者無法提交他們在表單中輸入的信息，那麼您的所有努力都將白費。 另外，沒有什麼比不按預期工作的提交按鈕更不專業了。
要為移動設備設計更好的提交按鈕，您需要牢記以下三個快速提示：
- 確保它們足夠大，以便在使用移動設備時輕鬆按下。
- 不要把你的按鈕放在離其他元素太近的地方，這樣用戶就不會打錯一個。
- 以某種方式突出顯示您的按鈕，例如使用對比色或創意排版。
除此之外，您還需要在網站上線之前徹底測試您的按鈕。 我們將在一分鐘內更深入地了解如何做到這一點。 現在，讓我們談談性能。
4. 確保您的表單快速加載
我們在幾篇文章中談論了很多關於網站性能的問題，並不是因為我們需要速度。 事實是，大多數人不喜歡緩慢的網站，這絕對有道理。
隨著互聯網速度越來越快，等待網站加載時間過長可能是一件苦差事。 此外，移動互聯網速度的變化往往比普通家庭連接大得多。 這意味著如果您想讓這些用戶滿意，您的網站將需要針對移動設備進行高度優化，因為並非所有用戶都擁有合適（即快速）的互聯網訪問權限。
這個特別的技巧通常適用於您的整個網站，但它對於顯示表單的移動頁面也很重要。 如果您網站的這些部分加載時間過長，您將失去與訪問者建立聯繫的潛在客戶和機會。 根據經驗，網站加載時間不應超過兩秒鐘。 一旦你越過那條線，跳出率往往會急劇上升，這對你來說是個可怕的消息。
鑑於在移動設備上瀏覽的性質，盡可能縮短這段時間是一個福音。 考慮到這一點，您可以通過多種方式提高網站的整體性能。 例如，您可能會升級到更好的託管計劃，使用針對速度進行了優化的響應式主題，並壓縮您的圖像。 當然，這些將幫助所有用戶，但對使用較小設備的用戶尤其有益。
5. 在發布之前測試你的表單
考慮到表單是大多數網站的關鍵元素，因此您應該在發布之前徹底測試您的表單。 使用 WordPress，這個過程非常簡單。 您可以繼續設計特定頁面來顯示您的表單，並且在您完全測試它們之前不要發布它們。
當然，你想使用的插件或主題由你決定（只要它可以幫助開發移動網站）。 但是，就測試階段而言，我們建議您保持簡單並使用諸如 Chrome 開發工具之類的工具來完成工作。
讓我們看一個簡單的例子。 如果您使用的是 Chrome，請繼續預覽包含您要測試的表單的頁面。 接下來，右鍵單擊該頁面上的任意位置並選擇“檢查”選項。 Chrome 會向您展示一組工具，您可以使用這些工具在右側和左側查看和編輯頁面的源代碼，您可以預覽它在移動設備上的外觀：
在屏幕頂部，有一個菜單可用於在不同分辨率之間切換。 Chrome 包含多種流行移動設備的設置，但您也可以輸入自定義分辨率。
此時，您應該檢查您的聯繫表單在多個設備上的外觀和行為。 以下面的示例為例——該表單運行良好，但您可以看到它沒有按應有的比例縮放。 尤其要注意太靠近屏幕邊框的文本和圖標：
正如我們在第一個技巧中概述的那樣，防止此問題的一種方法是保持表單簡單。 在下面的示例中，表單使用多個下拉列表並且只需要三個字段。 這使得它易於使用，更重要的是，表單非常簡單，它應該可以在每個設備上完美地擴展：
如果您遇到任何表單問題，顯然應該立即修復它們。 否則，您可能會疏遠您的移動受眾，而這正是我們首先要避免的！
結論
確保您的網站適合移動設備對於保持流量和不讓訪問者感到沮喪至關重要。 具體來說，如果您不想錯過接收消息或收集有價值的潛在客戶，您的表單需要在移動設備上易於使用。
在設計適合移動設備的表單時，這裡有五個快速提示，可讓您的生活更輕鬆：
- 刪除所有不必要的部分。
- 盡可能使用下拉列表。
- 確保您的提交按鈕易於按下。
- 確保您的表單加載速度快。
- 在發布之前測試您的表單。
您對如何使用 Divi 創建適合移動設備的表單有任何疑問嗎？ 在下面的評論部分提問！
文章縮略圖由 Irina Adamovich/shutterstock.com 提供。