2019年網(wǎng)站建設(shè)中提交表單的設(shè)計(jì)技巧有如下幾點(diǎn)

表單提交目的即盡可能來(lái)讓用戶留下他們的信息。 表單必須足夠直觀，以便用戶確切地知道該做什么，并且在完成該操作的過(guò)程中不會(huì)偏離。

好的聯(lián)系表單很容易被查看和理解，并包含高度可用的元素，用戶可以在不考慮它們的情況下參與其中。我們提供了一些技巧，可以幫助你設(shè)計(jì)更好的聯(lián)系表格。

1.把它做成一列一列輸入方式

什么更容易？ 垂直切換表單或在屏幕上通過(guò)同一方向的填充來(lái)滿足需求？ 創(chuàng)建具有單個(gè)垂直列的表單對(duì)于許多用戶來(lái)說(shuō)是最簡(jiǎn)單的解決方案，因?yàn)樗麄冎恍枰紤]一個(gè)操作 - 通過(guò)表單向下移動(dòng)屏幕。

它可以用于相似的字段，例如姓名，電子郵件地址和電話號(hào)碼等簡(jiǎn)短的答案。

這種形狀在響應(yīng)式格式中也能更好地工作，因此表單在不同設(shè)備上具有相同的形狀，從而提供更一致的用戶體驗(yàn)。 這對(duì)于電子商務(wù)或結(jié)賬表單尤其重要，因?yàn)槟悴幌Ｍw驗(yàn)發(fā)生變化，從而產(chǎn)生有關(guān)表單有效性和可信度的問(wèn)題。

2.按功能和邏輯分組內(nèi)容

小的，可視化分組或表單字段可以使表單更容易理解。 將類似的項(xiàng)目或內(nèi)容組織在一起（例如地址信息或付款字段），并將元素與其標(biāo)簽和任何其他說(shuō)明文本分組。 用戶不應(yīng)該對(duì)標(biāo)簽或指令是與哪個(gè)字段相關(guān)的產(chǎn)生質(zhì)疑。

內(nèi)容的邏輯分組為表單創(chuàng)建流，用戶可以預(yù)測(cè)接下來(lái)會(huì)顯示哪些信息，這使得體驗(yàn)輕松愉快。

3.將標(biāo)簽放在內(nèi)容之上

大多數(shù)表單構(gòu)建工具為你提供了大量標(biāo)簽或工具提示放置位置的選項(xiàng)。 抵制過(guò)度創(chuàng)造性的誘惑，并將標(biāo)簽置于信息所在的位置之上，這是標(biāo)簽最常見且可用的展示位置。

此外，此展示位置可輕松的在其他的設(shè)備上轉(zhuǎn)換。 例如，最先開始考慮手機(jī)而不是桌面端的表單。 如果表單位于標(biāo)簽之前，你可以計(jì)劃在滾動(dòng)到該字段之前將哪些信息放入字段中。 但是如果標(biāo)簽位于字段下方，你可能會(huì)陷入向下滾動(dòng)的模式，然后再次向上看以查看說(shuō)明并填寫表單。

雖然這可能看起來(lái)像是一件大事，但對(duì)用戶來(lái)說(shuō)卻是令人沮喪的。 對(duì)于較長(zhǎng)的表單，它可能會(huì)導(dǎo)致整個(gè)表單發(fā)生錯(cuò)誤。 這是你的聯(lián)系表單設(shè)計(jì)中的一個(gè)主要可用性問(wèn)題。

4.用戶輸入的信息盡量的少

與要求不必要信息的長(zhǎng)形式相比，更短的形式更有可能被用戶填寫（你真的需要在支付頁(yè)面上輸入你的信用卡嗎？答案是否定的，數(shù)字可以表示卡的類型，所以不要讓用戶輸入這些不必要的信息）。

較短字段以及簡(jiǎn)單的形式可以提高用戶的參與率，比起那些冗長(zhǎng)而過(guò)于詳盡的形式，設(shè)計(jì)需要得當(dāng)。

5.按鈕明顯直接，設(shè)計(jì)簡(jiǎn)約簡(jiǎn)單

一旦用戶填寫表單中的每個(gè)字段，最終操作是否明顯？ 很多時(shí)候，創(chuàng)建一個(gè)易于查看的按鈕是表單設(shè)計(jì)中被遺忘的一步。 按鈕應(yīng)清晰可見，使用特定于最終按鈕的顏色，并確保按鈕內(nèi)的微文本能夠準(zhǔn)確地告訴你發(fā)生了什么（提交，完成付款等）。

額外提示：如果你使用驗(yàn)證碼或其他類型的人工驗(yàn)證，請(qǐng)將其放在表單中的最后一個(gè)字段和提交按鈕之間（沒(méi)有什么比點(diǎn)擊提交前反復(fù)輸入驗(yàn)證碼更加讓人惱火的了......如果有的話，那可能就是讓你重新開始）。

哦，還有一個(gè)不言而喻的提示......讓用戶知道表單確實(shí)已經(jīng)完成或提交成功了！ 一個(gè)簡(jiǎn)單的“謝謝”對(duì)話框就足夠了。

6.使用適當(dāng)?shù)淖侄晤愋?/strong>

一個(gè)好的表單設(shè)計(jì)者知道一種字段類型并不適合所有信息。 將字段類型與正在收集的數(shù)據(jù)相匹配，以便用戶更輕松地正確填寫表單，你不會(huì)在電話號(hào)碼的欄目中使用下拉菜單，對(duì)嗎？

雖然這是一個(gè)看起來(lái)非常明顯的提示之一，但它在很多時(shí)候都會(huì)出錯(cuò)。

在聯(lián)系表單上考慮這個(gè)字段：聯(lián)系我的最佳方式是通過(guò)電子郵件或電話。 使用按鈕選項(xiàng)可以清楚地表明用戶應(yīng)該選擇一個(gè)按鈕。 對(duì)于任一選擇而言，使用下拉列表的操作都過(guò)于復(fù)雜。 你肯定不需要這個(gè)作為一個(gè)簡(jiǎn)短的答案字段。

使用正確類型的字段不僅可以使用戶更容易使用表單，而且還可以簡(jiǎn)化數(shù)的據(jù)收集和分析。

7.驗(yàn)證表單數(shù)據(jù)有效性

當(dāng)一個(gè)表格告訴你你所提交的信息中存在錯(cuò)誤，而不是直接刪除掉對(duì)應(yīng)的信息，你不喜歡這種形式嗎？ 這樣，你不僅可以查看并更正錯(cuò)誤，還可以節(jié)省重新輸入的時(shí)間。

在聯(lián)系表格上使用驗(yàn)證是必須的。 從確認(rèn)電子郵件地址遵循正確的格式，到驗(yàn)證郵政編碼或電話號(hào)碼的位數(shù)，這些小事情可以產(chǎn)生很大的不同。

如果你不并不是這樣做的，你就屬于少數(shù)。 因此，它不僅僅是一個(gè)可用性工具，它正在迅速成為一種普遍接受的用戶期望。啄木鳥建站表單驗(yàn)證js已廣泛被我們的網(wǎng)站建設(shè)同行使用，幾行簡(jiǎn)單的引用就可以實(shí)現(xiàn)表單驗(yàn)證功能和友好的界面提示效果，如果您是網(wǎng)站開發(fā)者，您可以與我們的客戶聯(lián)系獲得相關(guān)代碼。

總結(jié)

網(wǎng)站設(shè)計(jì)項(xiàng)目中最常用的兩種表單可能是電子郵件注冊(cè)和聯(lián)系表單。 首先你需要確保正確設(shè)置這些表單并調(diào)整設(shè)計(jì)以使其更有用（如果你注意到更多的參與，它可能正在發(fā)揮作用）。

相同的概念可以應(yīng)用于整個(gè)設(shè)計(jì)中的表單以及調(diào)查，或其他數(shù)據(jù)收集表單。 這些概念可以擴(kuò)展以滿足用戶需要輸入信息以完成流程的任何類型的網(wǎng)站元素。