聯繫咱們吧 - 12個聯繫咱們表單和頁面設計賞析和學習

設計網站時，關於咱們頁面和聯繫頁面（contact us page）每每是必要頁面之一。雖然只是一個簡單的頁面，但要真的能讓用戶有聯繫你的衝動仍是頗有挑戰性。若是說，用戶點擊了聯繫頁面，用戶其實已經在嘗試聯繫你了，這個時候，你須要提供的，不是花哨的設計，而是直觀的聯繫方式，不阻礙用戶嘗試聯繫你的行爲。但話又說回來，若是你有信心設計得美觀，新穎，天然是最好，並且簡潔也不意味着簡單。今天我和你們分享12個聯繫咱們表單和頁面設計模板和例子，若是你喜歡，能夠用在你的網頁設計裏哦。

1. General Inquiry Contact Form

特點：

• 簡單的黑白系聯繫表格
• 徹底響應式的聯繫表單設計
• 支持再設計
• 適用於任何網頁側邊欄
• 使用了15547次

該模板是一個響應式的聯繫表單模板，它具備不錯的佈局，能夠自適應任何大小的屏幕。憑藉其簡單的白色界面，您能夠收集客戶信息，包含姓名，電子郵件，聯繫電話，網站和消息等。

使用模板：

www.jotform.com/form-templa…

2. Contact Form 15

特點：

• 谷歌地圖背景
• 簡潔精緻的標題
• 自定義樣式提交按鈕
• CSS3和HTML5技術
• 優秀的配色方案

該模板是一個基於CSS3和HTML5的簡易聯繫表格，能夠在任何不一樣行業的網站上使用。 該聯繫表單包含有Google地圖背景，能夠準確地展現你公司在地圖上的位置。此外，該模板還帶有經常使用的表單字段和標題，其圖片精緻，文字簡練，能夠鼓勵訪客與你取得聯繫，也有助你收集用戶信息，包括姓名，電子郵件，消息字段等。

使用模板：colorlib.com/wp/template…

3. Contact Form v10

特點：

• 純色按鈕
• 自定義樣式提交按鈕
• 大文本框
• 徹底響應設計
• 圓邊框

該模板是一個簡易的免費HTML5聯繫表單模板。它有一個自定義風格的按鈕，採用了純色配色方案，響應式設計使其在任何網頁和移動屏幕上能夠完美顯示。該模板發表於2018年5月，採用了最新設計趨勢，爲你提供一個很是不錯的收集用戶信息的解決方案。

使用模板：colorlib.com/wp/template…

4. Under the Sea Contact Form

特點：

• HTML，CSS，JS，JavaScript
• 圓邊框設計
• 乾淨的配色方案
• 互動效果
• 流暢的動畫
• 好看的字體

該模板是一個動態的聯繫表格，有很是不錯的交互設計，絕對是一個可讓訪客爲之驚歎的聯繫頁面設計。該模板是一個整頁的聯繫表單，擴展了JavaScript和CSS3，它很是適合兒童類網站，或是動畫效果突出的網站。

使用模板：https://codepen.io/anon/pen/OMMOaO/

5. Meet our team

特點：

• 移動端友好的設計
• 獨特界面風格
• 一致的動畫
• 關於咱們頁面設計
• 完整的網站頁面

該模板是一個關於咱們頁面模板的響應式引導程序，它包含關於咱們網頁所需的全部元素。此模板主要有3個部分：團隊介紹，聯繫咱們表單和客戶介紹。若是你須要一個包含乾淨聯繫表單的完整的關於咱們頁面設計，那麼此模板是你的最佳選擇。該頁面包含的聯繫表單很簡單，有一個大文本框，能夠了解用戶的想法。

使用模板：mobirise.com/bootstrap-t…

6. Bootstrap 3 contact form

特點：

• HTML代碼
• 視頻演示
• 定製/使用指南
• CSS樣式
• jQuery表單提交
• 表格驗證
• 服務器端處理
• 圖像背景

Bootstrap 3聯繫表單是一個徹底響應的網站聯繫頁面。這個模板與常見的普通聯表單設計徹底不一樣，具備夢幻般的全屏圖像背景。該模板還有優秀的配色方案，在深色背景和白色表單之間建立出強烈的對比，刺激用戶反饋。它還有一個大的文本框，能夠接收用戶想要表達的任何信息。

使用模板：reusableforms.com/d/e2/bootst…

7. 聯繫表單HTML / CSS模板

特點：

• 自定義樣式提交按鈕
• 一致的動畫
• 交互式頁面設計
• 圖標+文字設計
• HTML和CSS模板
• 背景大圖

聯繫表格HTML / CSS模板是另外一個出自reusableforms.com網站的聯繫咱們頁面模板設計之一。最大的一個亮點是大圖背景，十分美觀，具備很強的吸引力。該模板的動畫設計也很出彩，能與用戶進行有效的互動，用戶使用起來，不只有趣，也很受用。

使用模板：reusableforms.com/d/o3/contac…

8. HTML5聯繫表格

設計：

• CSS3和HTML5
• 自定義設計
• 全寬聯繫表格
• 明亮的配色方案

HTML5聯繫表單簡單而美觀，具備很棒的交互動態功能。此表單使用CSS3和HTML5建立。能夠輕鬆自定義設計以及在任何屏幕上自適應。你只需複製並粘貼HTML和CSS代碼便可將該模板添加到你的網站中。該HTML5表單包含全部必填字段，例如姓名，電子郵件，電話和消息等。最後，配色方案也值得一提，明亮鮮豔，很具備吸引力。

A: TML5-Contact-Form

使用模板：codepen.io/codeconvey/…

4個最佳免費響應式HTML5聯繫表格和聯繫咱們頁面例子

9. Choice Screening

Choice Screening的「聯繫咱們」頁面很出彩，你也許第一眼就會被他們的大標題吸引。該網站全部的頁面都組織有序，聯繫咱們頁面還包含有聯繫信息，提供了每一個不一樣部門的電子郵件，再後是一個聯繫表單。對於大多數企業來講，表單顯得有點冗長，但對於須要運行各類背景調查的企業而言，表單字段多是幫助他們查詢信息的必要條件。

查看例子：www.choicescreening.com/contact-cho…

10. Weifield Group Contracting

伴隨移動端設備使用的不斷增長，Google也在其搜索引擎結果頁面上大力支持適合在移動設備瀏覽的網站，網頁設計的自適應要求愈來愈高。該模板就是在這種設計趨勢下專門製做的，具備很是細緻美觀的自適應力，任何屏幕的尺寸均可以完美展現。該模板有一個簡化導航設計，大型CTA按鈕經過拇指能夠輕鬆點擊，大型表單字段能夠用於收集用戶反饋。

查看例子：www.weifieldcontracting.com/contact/

11. Mockplus

Mockplus是國內最好的原型工具及團隊協做工具提供者，網站設計簡潔沉靜，聯繫咱們頁面和通常的頁面設計不太同樣，沒有使用表單，而是根據用戶可能的不一樣需求提供了更加直觀的聯繫方式。Mockplus在聯繫咱們頁面特地加入了Slack連接，方便用戶找到Mockplus專屬社羣，爲用戶提供了一種及時交流的方式，非常用心。

查看例子：https://www.mockplus.cn/support

12. Helloinnovatio

該網站的聯繫咱們頁面能夠說是我最喜歡的設計之一。它的配色和設計感都很是獨特，最大的亮點是Say Hello大文本標題，這個行動召喚按鈕很是可以調動用戶的情緒，刺激用戶產生互動。

查看例子：www.helloinnovation.com/contact/

以上就是本次推薦的12個聯繫咱們表單和頁面設計。總的來說，聯繫咱們頁面就只有一個最大的用途——刺激用戶產生聯繫互動。所以，聯繫咱們頁面的設計應該是簡潔的，聯繫方式多樣的，最好能提供不一樣業務的不一樣聯繫方式，以便用戶能快速的找到本身須要的聯繫方式。但願你喜歡今天的分享。