設計網站時，關於我們頁面和聯絡頁面（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表單包含所有必填欄位，例如姓名，電子郵件，電話和訊息等。最後，配色方案也值得一提，明亮鮮豔，很具有吸引力。

A: TML5-Contact-Form

使用模板：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個聯絡我們表單和頁面設計。總的來講，聯絡我們頁面就只有一個最大的用途——刺激使用者產生聯絡互動。因此，聯絡我們頁面的設計應該是簡潔的，聯絡方式多樣的，最好能提供不同業務的不同聯絡方式，以便使用者能快速的找到自己需要的聯絡方式。希望你喜歡今天的分享。