當訪客對於網站上的產品、服務有興趣,要做進一步的諮詢、業務洽談時,通常會透過聯絡我們的表單填寫方便聯繫,所以為網站加入聯絡表單是非常重要的,現在就來學習如何使用 Contact Form 7,幫你的網站製作客製化的聯絡表單吧!
延伸閱讀:
文章目錄教學 ∣ 5分鐘搞定 Easy Table of Contents 目錄外掛!
Contact Form 7 是什麼?
Contact Form 7 聯絡表單外掛,能為網站建立一個方便訪客與網站管理者溝通的管道,訪客不需要撰寫 E-mail,只要透過表單填寫,就可將需求寄送到你所指定的信箱,你只要透過信件就可以與訪客做聯繫。
接下來就讓我們來開始學習,如何安裝使用Contact Form 7 外掛吧!
Contact Form 7 設定教學
step 1
點選外掛→點選安裝外掛→搜尋Contact Form 7 →點選安裝並啟動。

step 2
在左側點選→聯絡表單→接著再點選右側的聯絡表單,就進入編輯畫面。

在這邊你可以客製化調整表單內容:
- 將聯絡表單1改名為聯絡我們然後記得按下儲存。
- 這一串短代碼,待會要複製到「聯絡我們」的頁面中做設定。
- 用來調整表單的基本設定,包含表單、郵件、訊息、其他設定。
- 如果你有額外需要加入的表單內容,可以點選這些項目新增到表單裡。
- <label>後面的文字內容,可以依照你想要的命名方式做調整。

step 3
我們先來調整表單 <label> 後面的文字,像是你的全名調整成姓名,其他的文字也可以依照你的需求做調整。

step 4
現在我們來客製化表單內容,我們嘗試新增「電話號碼」。
1.先複製這下面這段內容,並往下貼上:
<label> 你的訊息 (選填)
[textarea your-message] </label>

2.然後把你的訊息改為手機號碼,並將下方這段 [textarea your-message] 刪除。

3.游標停留在這個位置,然後點選上方的「電話號碼」,就會出現下方畫面,預設值可以輸入示範的內容,然後點選插入標籤,完成後點選儲存。

接著複製下方的短代碼。

step 5
點選頁面→新增頁面,建立一個「聯絡我們」的頁面。

接著你會看到這個畫面,新增標題的地方,1.輸入聯絡我們 2.在此處把短代碼貼上,完成後點選右上的預覽,就可以看到完成的表單畫面囉~


step 6
回到聯絡表單→點選電子郵件,在收件者的地方輸入管理員email,其他部份是WordPress預設好的,你可以依照自己的需求做調整。
這些電子郵件標籤 [your-name][your-email][your-subject][tel-597][your-message] 不能隨意修改,各自有相對應的表單名稱,如需調整請參考下方加入手機號碼圖示。
- 收件者:設定指定收件信箱。
- 寄件者:WordPress預設為你的網站名稱和信箱。
- 主旨:預設為你的「網站名稱」的聯絡表單傳送。
- 其他標頭:預設你的網站信箱。
- 郵件內文:收到信件的內文格式。


我們到聯絡我們頁面填寫表單,並測試是否能順利收到信件。

信件裡的格式,會跟電子郵件內文所設定的一樣,並寄送到指定的信箱。

step 7
這裡是訪客填寫表單後,預設的回應訊息,也可直接調整成所需的文字內容。

關於其他設定除非有特殊需求,一般來說我們是用不到它的。
結語
Contact Form 7外掛已有超過500萬人啟用,設定相當的簡單、好上手,還能依照個人需求客製化表單,相信只要跟著上面的步驟,就能輕鬆完成表單的設定,現在就立即為你的網站加上聯絡表單吧,這篇分享就到這裡,希望能夠幫助到你喔~
文章推薦
WordPress 教學
- 【wordpress架站教學】30分鐘新手架站完整教學全攻略!
- 【架站教學】使用Cloudways架設WordPress網站,新手也能輕鬆快速架站!
- 如何在 Cloudways 架設第2個 WordPress 網站!
- WordPress設定教學.新手5分鐘完成「基本設定」
- WordPress教學|如何讓文章顯示「最後更新時間」來提高SEO排名!
- AddToAny設定WordPress分享按鈕 ∣ 1鍵完成FB、Line多種社交分享!
- Astra佈景主題教學|1款新手易學、專業最愛的WordPress主題!
- WordPress備份 ∣ 5分鐘教會你 UpdraftPlus 外掛+還原網站!
- WordPress教學│Site Kit by Google外掛,1次整合所有Google分析工具!
- WordPress文章目錄教學 ∣ 5分鐘搞定 Easy Table of Contents 目錄外掛!
- WordPress教學|Contact Form 7 外掛為網站客製化聯絡表單