設(shè)計(jì)網(wǎng)站時(shí)，關(guān)于我們頁(yè)面和聯(lián)系頁(yè)面（contact us page）往往是必要頁(yè)面之一。雖然只是一個(gè)簡(jiǎn)單的頁(yè)面，但要真的能讓用戶有聯(lián)系你的沖動(dòng)還是很有挑戰(zhàn)性。如果說(shuō)，用戶點(diǎn)擊了聯(lián)系頁(yè)面，用戶其實(shí)已經(jīng)在嘗試聯(lián)系你了，這個(gè)時(shí)候，你需要提供的，不是花哨的設(shè)計(jì)，而是直觀的聯(lián)系方式，不阻礙用戶嘗試聯(lián)系你的行為。但話又說(shuō)回來(lái)，如果你有信心設(shè)計(jì)得美觀，新穎，自然是最好，而且簡(jiǎn)潔也不意味著簡(jiǎn)單。今天我和大家分享12個(gè)聯(lián)系我們表單和頁(yè)面設(shè)計(jì)模板和例子，如果你喜歡，可以用在你的網(wǎng)頁(yè)設(shè)計(jì)里哦。

1. General Inquiry Contact Form

特色：

• 簡(jiǎn)單的黑白系聯(lián)系表格
• 完全響應(yīng)式的聯(lián)系表單設(shè)計(jì)
• 支持再設(shè)計(jì)
• 適用于任何網(wǎng)頁(yè)側(cè)邊欄
• 使用了15547次

該模板是一個(gè)響應(yīng)式的聯(lián)系表單模板，它具有不錯(cuò)的布局，可以自適應(yīng)任何大小的屏幕。憑借其簡(jiǎn)單的白色界面，您可以收集客戶信息，包含姓名，電子郵件，聯(lián)系電話，網(wǎng)站和消息等。

使用模板：

https://www.jotform.com/form-templates/responsive-layout-general-inquiry-contact-form

2. Contact Form 15

特色：

• 谷歌地圖背景
• 簡(jiǎn)潔精致的標(biāo)題
• 自定義樣式提交按鈕
• CSS3和HTML5技術(shù)
• 優(yōu)秀的配色方案

該模板是一個(gè)基于CSS3和HTML5的簡(jiǎn)易聯(lián)系表格，可以在任何不同行業(yè)的網(wǎng)站上使用。 該聯(lián)系表單包含有Google地圖背景，可以準(zhǔn)確地展示你公司在地圖上的位置。此外，該模板還帶有常用的表單字段和標(biāo)題，其圖片精致，文字簡(jiǎn)練，可以鼓勵(lì)訪客與你取得聯(lián)系，也有助你收集用戶信息，包括姓名，電子郵件，消息字段等。

使用模板：https://colorlib.com/wp/template/contact-form-v15/

3. Contact Form v10

特色：

• 純色按鈕
• 自定義樣式提交按鈕
• 大文本框
• 完全響應(yīng)設(shè)計(jì)
• 圓邊框

該模板是一個(gè)簡(jiǎn)易的免費(fèi)HTML5聯(lián)系表單模板。它有一個(gè)自定義風(fēng)格的按鈕，采用了純色配色方案，響應(yīng)式設(shè)計(jì)使其在任何網(wǎng)頁(yè)和移動(dòng)屏幕上可以完美顯示。該模板發(fā)表于2018年5月，采用了最新設(shè)計(jì)趨勢(shì)，為你提供一個(gè)非常不錯(cuò)的收集用戶信息的解決方案。

使用模板：https://colorlib.com/wp/template/contact-form-v10/

4. Under the Sea Contact Form

特色：

• HTML，CSS，JS，JavaScript
• 圓邊框設(shè)計(jì)
• 干凈的配色方案
• 互動(dòng)效果
• 流暢的動(dòng)畫(huà)
• 好看的字體

該模板是一個(gè)動(dòng)態(tài)的聯(lián)系表格，有非常不錯(cuò)的交互設(shè)計(jì)，絕對(duì)是一個(gè)可以讓訪客為之驚嘆的聯(lián)系頁(yè)面設(shè)計(jì)。該模板是一個(gè)整頁(yè)的聯(lián)系表單，擴(kuò)展了JavaScript和CSS3，它非常適合兒童類網(wǎng)站，或是動(dòng)畫(huà)效果突出的網(wǎng)站。

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

5. Meet our team

特色：

• 移動(dòng)端友好的設(shè)計(jì)
• 獨(dú)特界面風(fēng)格
• 一致的動(dòng)畫(huà)
• 關(guān)于我們頁(yè)面設(shè)計(jì)
• 完整的網(wǎng)站頁(yè)面

該模板是一個(gè)關(guān)于我們頁(yè)面模板的響應(yīng)式引導(dǎo)程序，它包含關(guān)于我們網(wǎng)頁(yè)所需的所有元素。此模板主要有3個(gè)部分：團(tuán)隊(duì)介紹，聯(lián)系我們表單和客戶介紹。如果你需要一個(gè)包含干凈聯(lián)系表單的完整的關(guān)于我們頁(yè)面設(shè)計(jì)，那么此模板是你的最佳選擇。該頁(yè)面包含的聯(lián)系表單很簡(jiǎn)單，有一個(gè)大文本框，可以了解用戶的想法。

使用模板：https://mobirise.com/bootstrap-template/about-us-page-template/

6. Bootstrap 3 contact form

特色：

• HTML代碼
• 視頻演示
• 定制/使用指南
• CSS樣式
• jQuery表單提交
• 表格驗(yàn)證
• 服務(wù)器端處理
• 圖像背景

Bootstrap 3聯(lián)系表單是一個(gè)完全響應(yīng)的網(wǎng)站聯(lián)系頁(yè)面。這個(gè)模板與常見(jiàn)的普通聯(lián)表單設(shè)計(jì)完全不同，具有夢(mèng)幻般的全屏圖像背景。該模板還有優(yōu)秀的配色方案，在深色背景和白色表單之間創(chuàng)建出強(qiáng)烈的對(duì)比，刺激用戶反饋。它還有一個(gè)大的文本框，可以接收用戶想要表達(dá)的任何信息。

使用模板：http://reusableforms.com/d/e2/bootstrap-3-contact-form

7. 聯(lián)系表單HTML / CSS模板

特色：

• 自定義樣式提交按鈕
• 一致的動(dòng)畫(huà)
• 交互式頁(yè)面設(shè)計(jì)
• 圖標(biāo)+文字設(shè)計(jì)
• HTML和CSS模板
• 背景大圖

聯(lián)系表格HTML / CSS模板是另一個(gè)出自reusableforms.com網(wǎng)站的聯(lián)系我們頁(yè)面模板設(shè)計(jì)之一。最大的一個(gè)亮點(diǎn)是大圖背景，十分美觀，具有很強(qiáng)的吸引力。該模板的動(dòng)畫(huà)設(shè)計(jì)也很出彩，能與用戶進(jìn)行有效的互動(dòng)，用戶使用起來(lái)，不僅有趣，也很受用。

使用模板：http://reusableforms.com/d/o3/contact-form-css-template

8. HTML5聯(lián)系表格

設(shè)計(jì)：

• CSS3和HTML5
• 自定義設(shè)計(jì)
• 全寬聯(lián)系表格
• 明亮的配色方案

HTML5聯(lián)系表單簡(jiǎn)單而美觀，具有很棒的交互動(dòng)態(tài)功能。此表單使用CSS3和HTML5創(chuàng)建?？梢暂p松自定義設(shè)計(jì)以及在任何屏幕上自適應(yīng)。你只需復(fù)制并粘貼HTML和CSS代碼即可將該模板添加到你的網(wǎng)站中。該HTML5表單包含所有必填字段，例如姓名，電子郵件，電話和消息等。最后，配色方案也值得一提，明亮鮮艷，很具有吸引力。

使用模板：https://codepen.io/codeconvey/pen/rgiLB/

4個(gè)最佳免費(fèi)響應(yīng)式HTML5聯(lián)系表格和聯(lián)系我們頁(yè)面例子

9. Choice Screening

Choice Screening的“聯(lián)系我們”頁(yè)面很出彩，你也許第一眼就會(huì)被他們的大標(biāo)題吸引。該網(wǎng)站所有的頁(yè)面都組織有序，聯(lián)系我們頁(yè)面還包含有聯(lián)系信息，提供了每個(gè)不同部門(mén)的電子郵件，再后是一個(gè)聯(lián)系表單。對(duì)于大多數(shù)企業(yè)來(lái)說(shuō)，表單顯得有點(diǎn)冗長(zhǎng)，但對(duì)于需要運(yùn)行各種背景調(diào)查的企業(yè)而言，表單字段可能是幫助他們查詢信息的必要條件。

查看例子：https://www.choicescreening.com/contact-choice-screening

10. Weifield Group Contracting

伴隨移動(dòng)端設(shè)備使用的不斷增加，Google也在其搜索引擎結(jié)果頁(yè)面上大力支持適合在移動(dòng)設(shè)備瀏覽的網(wǎng)站，網(wǎng)頁(yè)設(shè)計(jì)的自適應(yīng)要求越來(lái)越高。該模板就是在這種設(shè)計(jì)趨勢(shì)下專門(mén)制作的，具有非常細(xì)致美觀的自適應(yīng)力，任何屏幕的尺寸都可以完美展示。該模板有一個(gè)簡(jiǎn)化導(dǎo)航設(shè)計(jì)，大型CTA按鈕通過(guò)拇指可以輕松點(diǎn)擊，大型表單字段可以用于收集用戶反饋。

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

11. Mockplus

Mockpplus是國(guó)內(nèi)最好的原型工具提供者，網(wǎng)站設(shè)計(jì)簡(jiǎn)潔沉靜，聯(lián)系我們頁(yè)面和一般的頁(yè)面設(shè)計(jì)不太一樣，沒(méi)有使用表單，而是根據(jù)用戶可能的不同需求提供了更加直觀的聯(lián)系方式。Mockplus在聯(lián)系我們頁(yè)面特意加入了Slack鏈接，方便用戶找到Mockplus專屬社群，為用戶提供了一種及時(shí)交流的方式，很是用心。

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

12. Helloinnovatio

該網(wǎng)站的聯(lián)系我們頁(yè)面可以說(shuō)是我最喜歡的設(shè)計(jì)之一。它的配色和設(shè)計(jì)感都非常獨(dú)特，最大的亮點(diǎn)是Say Hello大文本標(biāo)題，這個(gè)行動(dòng)召喚按鈕非常能夠調(diào)動(dòng)用戶的情緒，刺激用戶產(chǎn)生互動(dòng)。

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

以上就是本次推薦的12個(gè)聯(lián)系我們表單和頁(yè)面設(shè)計(jì)。總的來(lái)講，聯(lián)系我們頁(yè)面就只有一個(gè)最大的用途——刺激用戶產(chǎn)生聯(lián)系互動(dòng)。因此，聯(lián)系我們頁(yè)面的設(shè)計(jì)應(yīng)該是簡(jiǎn)潔的，聯(lián)系方式多樣的，最好能提供不同業(yè)務(wù)的不同聯(lián)系方式，以便用戶能快速的找到自己需要的聯(lián)系方式。希望你喜歡今天的分享。

【設(shè)計(jì)神器推薦】設(shè)計(jì)協(xié)作，用摹客！100人以下團(tuán)隊(duì)免費(fèi)使用

摹客，支持Sketch/PS/XD/Axure設(shè)計(jì)稿交付、自動(dòng)標(biāo)注切圖、全流程協(xié)作。助力設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)高效工作！

立即體驗(yàn)：https://app.mockplus.cn/app