設計網站時，關於我們頁面和聯繫頁面（contact us page）往往是必要頁面之一。雖然只是一個簡單的頁面，但要真的能讓用戶有聯繫你的衝動還是很有挑戰性。如果說，用戶點擊了聯繫頁面，用戶其實已經在嘗試聯繫你了，這個時候，你需要提供的，不是花哨的設計，而是直觀的聯繫方式，不阻礙用戶嘗試聯繫你的行爲。但話又說回來，如果你有信心設計得美觀，新穎，自然是最好，而且簡潔也不意味着簡單。今天我和大家分享12個聯繫我們表單和頁面設計模板和例子，如果你喜歡，可以用在你的網頁設計裏哦。
1. General Inquiry Contact Form
特色：
簡單的黑白系聯繫表格
完全響應式的聯繫表單設計
支持再設計
適用於任何網頁側邊欄
使用了15547次
該模板是一個響應式的聯繫表單模板，它具有不錯的佈局，可以自適應任何大小的屏幕。憑藉其簡單的白色界面，您可以收集客戶信息，包含姓名，電子郵件，聯繫電話，網站和消息等。
使用模板：
https://www.jotform.com/form-templates/responsive-layout-general-inquiry-contact-form
2. Contact Form 15
特色：
谷歌地圖背景
簡潔精緻的標題
自定義樣式提交按鈕
CSS3和HTML5技術
優秀的配色方案
該模板是一個基於CSS3和HTML5的簡易聯繫表格，可以在任何不同行業的網站上使用。 該聯繫表單包含有Google地圖背景，可以準確地展示你公司在地圖上的位置。此外，該模板還帶有常用的表單字段和標題，其圖片精緻，文字簡練，可以鼓勵訪客與你取得聯繫，也有助你收集用戶信息，包括姓名，電子郵件，消息字段等。
使用模板：https://colorlib.com/wp/template/contact-form-v15/
3. Contact Form v10
特色：
純色按鈕
自定義樣式提交按鈕
大文本框
完全響應設計
圓邊框
該模板是一個簡易的免費HTML5聯繫表單模板。它有一個自定義風格的按鈕，採用了純色配色方案，響應式設計使其在任何網頁和移動屏幕上可以完美顯示。該模板發表於2018年5月，採用了最新設計趨勢，爲你提供一個非常不錯的收集用戶信息的解決方案。
使用模板：https://colorlib.com/wp/template/contact-form-v10/
4. Under the Sea Contact Form
特色：
HTML，CSS，JS，JavaScript
圓邊框設計
乾淨的配色方案
互動效果
流暢的動畫
好看的字體
該模板是一個動態的聯繫表格，有非常不錯的交互設計，絕對是一個可以讓訪客爲之驚歎的聯繫頁面設計。該模板是一個整頁的聯繫表單，擴展了JavaScript和CSS3，它非常適合兒童類網站，或是動畫效果突出的網站。
使用模板：https://codepen.io/anon/pen/OMMOaO/
5. Meet our team
特色：
移動端友好的設計
獨特界面風格
一致的動畫
關於我們頁面設計
完整的網站頁面
該模板是一個關於我們頁面模板的響應式引導程序，它包含關於我們網頁所需的所有元素。此模板主要有3個部分：團隊介紹，聯繫我們表單和客戶介紹。如果你需要一個包含乾淨聯繫表單的完整的關於我們頁面設計，那麼此模板是你的最佳選擇。該頁面包含的聯繫表單很簡單，有一個大文本框，可以瞭解用戶的想法。
使用模板：https://mobirise.com/bootstrap-template/about-us-page-template/
6. Bootstrap 3 contact form
特色：
HTML代碼
視頻演示
定製/使用指南
CSS樣式
jQuery表單提交
表格驗證
服務器端處理
圖像背景
Bootstrap 3聯繫表單是一個完全響應的網站聯繫頁面。這個模板與常見的普通聯表單設計完全不同，具有夢幻般的全屏圖像背景。該模板還有優秀的配色方案，在深色背景和白色表單之間創建出強烈的對比，刺激用戶反饋。它還有一個大的文本框，可以接收用戶想要表達的任何信息。
使用模板：http://reusableforms.com/d/e2/bootstrap-3-contact-form
7. 聯繫表單HTML / CSS模板
特色：
自定義樣式提交按鈕
一致的動畫
交互式頁面設計
圖標+文字設計
HTML和CSS模板
背景大圖
聯繫表格HTML / CSS模板是另一個出自reusableforms.com網站的聯繫我們頁面模板設計之一。最大的一個亮點是大圖背景，十分美觀，具有很強的吸引力。該模板的動畫設計也很出彩，能與用戶進行有效的互動，用戶使用起來，不僅有趣，也很受用。
使用模板：http://reusableforms.com/d/o3/contact-form-css-template
8. HTML5聯繫表格
設計：
CSS3和HTML5
自定義設計
全寬聯繫表格
明亮的配色方案
HTML5聯繫表單簡單而美觀，具有很棒的交互動態功能。此表單使用CSS3和HTML5創建。可以輕鬆自定義設計以及在任何屏幕上自適應。你只需複製並粘貼HTML和CSS代碼即可將該模板添加到你的網站中。該HTML5表單包含所有必填字段，例如姓名，電子郵件，電話和消息等。最後，配色方案也值得一提，明亮鮮豔，很具有吸引力。
使用模板：https://codepen.io/codeconvey/pen/rgiLB/
4個最佳免費響應式HTML5聯繫表格和聯繫我們頁面例子
9.Choice Screening
Choice Screening的“聯繫我們”頁面很出彩，你也許第一眼就會被他們的大標題吸引。該網站所有的頁面都組織有序，聯繫我們頁面還包含有聯繫信息，提供了每個不同部門的電子郵件，再後是一個聯繫表單。對於大多數企業來說，表單顯得有點冗長，但對於需要運行各種背景調查的企業而言，表單字段可能是幫助他們查詢信息的必要條件。
查看例子：https://www.choicescreening.com/contact-choice-screening
10.Weifield Group Contracting
伴隨移動端設備使用的不斷增加，Google也在其搜索引擎結果頁面上大力支持適合在移動設備瀏覽的網站，網頁設計的自適應要求越來越高。該模板就是在這種設計趨勢下專門製作的，具有非常細緻美觀的自適應力，任何屏幕的尺寸都可以完美展示。該模板有一個簡化導航設計，大型CTA按鈕通過拇指可以輕鬆點擊，大型表單字段可以用於收集用戶反饋。
查看例子：http://www.weifieldcontracting.com/contact/
11. Mockplus
Mockplus是國內最好的原型工具及團隊協作工具提供者，網站設計簡潔沉靜，聯繫我們頁面和一般的頁面設計不太一樣，沒有使用表單，而是根據用戶可能的不同需求提供了更加直觀的聯繫方式。Mockplus在聯繫我們頁面特意加入了Slack鏈接，方便用戶找到Mockplus專屬社羣，爲用戶提供了一種及時交流的方式，很是用心。
查看例子：https://www.mockplus.cn/support
12. Helloinnovatio
該網站的聯繫我們頁面可以說是我最喜歡的設計之一。它的配色和設計感都非常獨特，最大的亮點是Say Hello大文本標題，這個行動召喚按鈕非常能夠調動用戶的情緒，刺激用戶產生互動。
查看例子：http://www.helloinnovation.com/contact/
以上就是本次推薦的12個聯繫我們表單和頁面設計。總的來講，聯繫我們頁面就只有一個最大的用途——刺激用戶產生聯繫互動。因此，聯繫我們頁面的設計應該是簡潔的，聯繫方式多樣的，最好能提供不同業務的不同聯繫方式，以便用戶能快速的找到自己需要的聯繫方式。希望你喜歡今天的分享。