8 個漂亮的聯繫表單示例 + 如何將它們添加到您的網站

已發表: 2019-12-10

簡陋的聯繫表格——以某種形式或另一種形式,是互聯網上幾乎每個網站的主力軍。 但是,雖然每個網站都有聯繫表格,但並非所有聯繫表格設計都是平等的。

為了幫助您創建可實現業務目標的聯繫表單,我們從真實網站中收集了八個聯繫表單示例。 對於每個示例,我們都會準確地告訴您它的哪些方面做得好,以便您知道要在表單中包含哪些內容。

然後,為了使這篇文章更美觀且可操作,我們將展示如何在不需要任何特殊知識的情況下創建您自己的靈活聯繫表單。


確定聯繫表單設計的五個技巧

在我們進入真正的聯繫表單示例之前,讓我們快速繞道而行,談談什麼是一個很好的聯繫表單。 在我們討論每個聯繫表單示例在下一節中做得好的地方時,這個繞道將奠定基礎。

您很可能有一個聯繫表格,因為您希望人們填寫它。 那麼如何讓更多人使用它呢? 以下是一些最佳實踐……

1. 清楚地傳達您的表格的用途

如果您有一個繁忙的業務或網站,您可能有多個用於不同用途的聯繫表格。 例如,它可以是:

  • 銷售查詢表

  • 客戶支持表格

  • 在線訂單

  • 回電申請表

  • 等等。

有兩種基本方法可以處理此問題,您將在下面的實際聯繫表單示例中看到這兩種方法:

  1. 單獨的表格。 為每個用例創建單獨的表單並添加文本以明確每個表單的作用。

  2. 一個下拉字段。 在表單頂部添加一個下拉字段,列出不同的用例並自動將您的聯繫表單路由到正確的位置。

帶有下拉菜單的聯繫表單示例 查看實時預覽 →

無論哪種方式,請使用您的表單標籤和周圍的文本,讓您的訪問者完全清楚每個聯繫表單的目的。

2. 限製表單長度以獲得更多轉換(但不要忘記質量)

在所有條件相同的情況下,數據似乎表明更長的聯繫表格意味著更少的提交。

例如,HubSpot 分析了超過 40,000 個登錄頁面,並註意到轉化率與表單字段數量之間存在明顯的相關性。

峰值轉化率在三個字段左右。 轉化率穩步下降,直到八個表單字段,然後變平:

基於表單字段數量的聯繫表單轉換率 來源

更有趣的是,Marketo 測試了三種形式,結果與 HubSpot 相似:

  • 5 個字段 — 13.4% 的轉化率

  • 7 個字段 — 12.0% 的轉化率

  • 9 個字段 — 10.0% 的轉化率

當然,僅僅獲得更多的聯繫表單提交可能不是您的真正目標,因此它並不像將表單上的字段數量減少到最低限度那麼簡單。

例如,雖然您可能會通過減少字段獲得更多提交,但這些提交的質量可能不那麼高,因為進入門檻很低。

總的來說,一個好的經驗法則是消除所有不必要的字段,但不要僅僅為了縮短表單而消除收集重要信息的字段,特別是如果這些信息有助於使您的潛在客戶合格。

3.使用智能微文解釋字段

如果您的聯繫表單不僅僅包含標準的“姓名、電子郵件、消息”字段,您就有可能讓訪問者感到困惑。

例如,如果您有一個“預算”字段,則可能不清楚該預算的用途。 是針對整個項目嗎? 它只是針對特定部分嗎?

為避免此類混淆,您可以在聯繫表格中添加“縮微文案”。

Microcopy 基本上是伴隨表單字段的小型解釋文本,使它們更清晰。 例如,查看下面的 Payments volume 字段(稍後您也會看到此示例):

在聯繫表格中使用縮微

4. 嘗試不同的格式

當大多數人想到聯繫表單時,他們會想到您在大多數網站上看到的基本嵌入表單。 但是,如果您想讓人們更輕鬆地與您取得聯繫,有時需要嘗試不同的顯示方法,例如彈出窗口或通知欄。

例如,在您的網站一側有一個浮動的聯繫按鈕對於支持聯繫表單來說非常有用。 它使用戶在遇到問題時立即與您聯繫非常容易,而無需他們四處搜索您的聯繫頁面:

用於技術支持的浮動聯繫按鈕 查看實時預覽 →

5. 告訴人們接下來的步驟並設定期望

一旦人們點擊提交,您的聯繫表單設計就沒有完成!

為了提供更好的用戶體驗,您需要準確地告訴人們接下來會發生什麼以及需要多長時間。 例如…

  • 您會回复所有查詢還是僅回复部分查詢?

  • 你需要多長時間回复?

  • 您會通過電子郵件或其他方式回复嗎?

如果您設定了明確的期望,您的訪問者就不會想知道發生了什麼以及您的表單是否有效。

來自真實網站的八個很棒的聯繫表格示例

現在您已經了解了最佳實踐,讓我們看看一些現實世界的聯繫表單設計,以激發您自己的靈感並向您展示這些最佳實踐。

1. 條紋

Stripe 的銷售聯繫表是一個很好的例子,說明有時收集一些額外的信息可以使您的聯繫表產生更多合格的潛在客戶(即使它可能會稍微降低基線轉化率)。

Stripe 網站上的聯繫表格示例

除了標准信息字段之外,Stripe 還添加了 Payments volume 字段,以便他們可以更好地了解每個潛在客戶的潛在質量。

除此之外,還有一些其他不錯的設計選擇,包括:

  • 社會證明——側面的那些標誌通過顯示所有使用 Stripe 的成功企業來增加社會證明。

  • 縮微——術語“付款量”可能有點令人困惑,因此 Stripe 添加了一些有用的縮微,解釋瞭如何填寫該字段。

  • 目的— Stripe 非常清楚地表明此表格僅用於銷售查詢。 這可確保他們不會讓人們嘗試將其用於支持或其他非銷售用途。

2.獲取網站控制

在 Getsitecontrol,我們處理聯繫表單設計的方式略有不同。

Getsitecontrol 聯繫表單示例 查看實時預覽 →

我們沒有創建訪問者必須導航到的專用“聯繫我們”頁面,而是簡單地包含一個聯繫我們鏈接,該鏈接會在那裡打開一個彈出窗口,然後無需重新加載頁面。

這對人們來說真的很方便,因為他們可以……

  • 從網站上的任何頁面訪問我們的聯繫表格,

  • 發送消息而不打斷他們正在做的其他事情(比如閱讀這篇博文!)。

聯繫表單提交成功頁面 查看實時預覽 →

Getsitecontrol 聯繫表簡單且易於填寫。 此外,它清楚地傳達了人們提交表單後的後續步驟,以及用於查看 Getsitecontrol 博客的 CTA。

3.金斯塔

Kinsta 有一個“聯繫我們”頁面,可以自動引導用戶找到正確的聯繫表格,而無需他們重新加載頁面。

Kinsta表格示例

Kinsta 列出了五個最受歡迎的聯繫請求:

  1. 定價或計劃

  2. 功能或技術信息

  3. 請求遷移或任何相關問題

  4. 訪客帖子、贊助帖子或反向鏈接請求

  5. 還要別的嗎

當用戶選擇他們的目標時,Kinsta 要么顯示個性化的聯繫表格,要么顯示一條消息。

這使得 Kinsta 能夠準確地收集他們需要的信息,而不會給訪客帶來額外的字段。

例如,在定價或計劃聯繫表單上,Kinsta 添加了額外的字段來了解此人希望託管的網站和訪問者的數量,但這些字段不會出現在“其他任何”表單中。

Kinsta 還在高層設定了明確的期望——“我們將在一個工作日內與您聯繫”。

4. 選擇篩選

Choice Screening 有一個很長的聯繫表格。 乍一看,您可能認為這會降低表單的轉化率。 這是一種真正-選擇篩選無疑將獲得比他們會用更短的形式表單提交更少。

選擇篩選聯繫表示例 - 長版

但是讓我們談談為什麼有時這沒問題,以及為什麼這是一個很好的聯繫表單示例。

Choice Screening 在一個非常專業的企業對企業空間中運作。 他們試圖獲得合格的潛在客戶,他們將成為長期客戶,而不僅僅是提交聯繫表單。

憑藉其詳細的服務列表和許多複選框,該表單將淘汰那些不確定自己想要什麼的人,只讓合格的潛在客戶有很大機會成為客戶。

您可以說 Choice Screening 正在使用此聯繫表篩選潛在客戶!

5. Joel Klettke / 商務休閒文案

喬爾是一名專業的文案撰稿人,因此您可以打賭,他的聯繫表格設計和文案一定會很到位。

商業撰稿人的潛在客戶表格示例

Joel 的表單本身很簡單,包含標準字段以及一些符合個人預算的額外合格字段。 不過,正是表單旁邊發生的一切才使它成為一個很好的聯繫表單示例。

在該文本中,喬爾在設定預期和確定潛在客戶方面做得很好。 他還通過討論他的最低費率有目的地趕走低預算客戶。 雖然喬爾可以刪除這些提及以獲得更高的前期轉化率,但這樣做實際上會導致合格潛在客戶的百分比降低,最終只會浪費喬爾的時間。

6. 尼爾帕特爾

尼爾帕特爾經營著世界上最受歡迎的數字營銷網站之一,所以你可以肯定他會收到很多聯繫表提交。

尼爾帕特爾的簡短聯繫表格示例

為了幫助將這些提交發送到正確的位置,Neil 提供了一個“我想聊聊”下拉菜單,人們可以在其中從預設的選項範圍中進行選擇。 他還在佔位符框中使用了一些縮微文案,懇請人們保持信息簡短、切題。

這個很簡單——但有時簡單就是你在聯繫表單設計中所需要的。

7. 焦點實驗室

好的,這個很有趣,異想天開,絕對不會適用於所有企業。 但是,如果您處於創意空間(Focus Lab 所在的空間),創建這樣一個異想天開的聯繫表單設計可以表明您能夠跳出框框思考。

焦點實驗室創意聯繫表設計

Focus Lab 沒有創建傳統的表單,而是使用了更多 Mad Libs 風格的方法,讓訪問者在現有段落中輸入他們的信息。 通過使用這種方法,Focus Lab 還能夠收集更多信息(如目標和預算),而沒有更傳統的聯繫表單設計可能具有的令人印象深刻的外觀。

8. CMICB

CAMICB 是 Community Association Managers International Certification Board 的縮寫,為美國的社區協會提供認證。

在 Getsitecontrol 中創建的 CAMICB 聯繫表單彈出窗口

CAMICB 聯繫表的顯著特點是它使用混合彈出/“聯繫我們”頁面方法。 當用戶登陸“聯繫我們”頁面時,CAMICB 網站會立即打開一個簡單的彈出式聯繫表單,訪問者可以在其中提交他們的消息。

只有三個字段,CAMICB 保持其形式簡潔明了。 然後,彈出方法創建了一個很好的無干擾界面,其中重點完全放在表單上。

這使得提交查詢盡可能順暢。

為了讓事情變得更簡單,CAMICB 還顯示了一個向上滑動的聯繫表格,用戶可以在其頁腳中訪問:

位於網頁底部的可擴展聯繫我們選項卡

如何創建您自己的可定制聯繫表單設計

在瀏覽了這八個聯繫表單示例之後,您可能已經有了很多關於如何將這些原則應用於您自己的聯繫表單設計的想法。

如果您想開始,[Getsitecontrol](/feedback-popup/ 可以讓您立即啟動並運行。

與大多數聯繫表單解決方案不同,Getsitecontrol 允許您從四個靈活的位置和數十個表單模板中進行選擇。 您可以創建一個傳統的彈出窗口,就像您在 CAMICB 和 Getsitecontrol 網站上看到的那樣。 或者,您可以使用幻燈片、通知欄、按鈕等來改變現狀。

您可以根據需要添加盡可能多(或盡可能少)的字段以獲得合格的提交,並且您還可以插入微文來幫助訪問者填寫您的表單。

立即註冊 Getsitecontrol,您只需幾分鐘即可獲得有效的聯繫表格。

Colin Newcomer 是一名自由撰稿人,具有 SEO 和聯盟營銷背景。 他主要撰寫有關 WordPress 和數字營銷的文章,幫助客戶提高網絡知名度。

您正在閱讀 Getsitecontrol 博客,其中營銷專家分享經過驗證的策略來發展您的在線業務。 本文是客戶參與部分的一部分。

訂閱我們的時事通訊 → Icons8 的主要插圖