2021.06.03 2024.04.21

Contact Form 7使用方法教學簡單製作聯絡我們表單

web

此文章可能包含廣告（PR）

吉娃娃

我想製作聯絡我表單，是不是很難？

Masa

沒問題，使用WordPress外掛 Contact Form 7可以蠻簡單製作聯絡表單！聯絡我們表單是網站經營不可缺少的頁面。使用這個外掛不需要專業知識，可以簡單製作客制化的表單！

這次介紹使用Contact Form 7外掛在WordPress網站設置“聯絡我們”,“咨詢”表單的方法。
下面是“Toyota聯絡我們”頁面,只要使用 Contact Form 7可以簡單實現類似的功能！

在這裡設置看看以下的“聯絡我們”表單（Form）頁面，再來説明自動回信的設定方法。
ContactForm7-16

文章目錄

什麽是Contact Form 7

Contact Form 7是著名的WordPress外掛，可以簡單製作“聯絡我們”等表單，網友透過表單可以簡單發送電郵至站長。

Contact Form 7的特色：

初學者也可以簡單安裝和設定
可製作客制化表單（例如下拉式選單，日期等）
可設定自動回覆
可預防垃圾郵件功能（CAPTCHA、Akismet ）
因很多人使用的外掛，網路上有不少資訊可以搜尋解決問題，包括不少中文網站
不可設定“確認”頁面

Contact Form 7安裝方法

點擊控制台 > 外掛 > 安裝外掛

從WordPress管理畫面左側選單中點擊“外掛”-“安裝外掛”

“搜尋外掛”的地方輸入“Contact Form 7”

找一下下面圖案的外掛，並點擊“立即安裝”，再點擊“啓用”

以上的步驟就會完成安裝！

Contact Form 7設置方法

在這裡説明最基本的聯絡我們表單的設定方法。
最基本的聯絡我們表單包含，你的全名，你的電子郵件地址，主旨，你的訊息的4項。如下圖：

新增聯絡表單

啓用ContactForm7後，左側管理選單當中會出現“聯絡表單”
點擊控制台 > 聯絡表單 > 聯絡表單

ContactForm7-04
再點擊在畫面左上角的“新增聯絡表單”

接下來會出現以下的表單編輯畫面。

如果只是簡單的詢問表單，不一定需要更改内容。
表單的項目如下：
·你的全名
·你的電子郵件地址
·主旨
·你的訊息 (選填)
如果需要可以更改或增加以上的内容。

設定自己的電子郵件地址

請點擊“電子郵件”的標簽。

ContactForm7-06a
收件者：輸入自己的電子郵件地址（收郵件的信箱）這是最重要的設定！
寄件者：這項不需要更改，會自動顯示寄件者的信箱地址
主旨：郵件的主旨，會自動顯示寄件者的姓名和你的網站名稱
其他標頭：可以設定其他收件的信箱地址，用Cc:或Bcc設定。
電子郵件內文：這項也不需要更改，收件的内文。

訊息

訊息標簽的部分可以更改傳送成功或傳送失敗時顯示的訊息。

ContactForm7-06b
例如，傳送成功時會顯示“感謝你的留言，已將留言傳送給站務人員。”，按照你的需要可以更改這句話。

儲存

設定以上的項目之後，輸入表單的名稱。
再點擊“儲存”

ContactForm7-06c
只有儲存還沒在你的網站裡顯示聯絡我們的頁面。需要把表單的短代碼拷貝，再你想顯示聯絡我們的頁面貼上短代碼。
等一下馬上使用，所以儲存後，請先把短代碼拷貝。

準備聯絡我們頁面

點擊控制台 > 頁面 > 新增頁面

輸入“新增標題”，例如【聯絡我們】
貼上剛才拷貝的短代碼。

發佈或更新之後，請確認有沒有成功顯示聯絡我們表單，最好測試傳送一次看看。

這樣就完成設置聯絡我們表單了！

接下來説明客制化的表單内容的進階篇。

客制化的表單内容的進階篇

ContactForm7目前有14個不同的表單使用的零件如下：

ContactForm7-06h
文字
電子郵件
網址
電話號碼
數值
日期
文字區域
下拉式選單
核取方塊
選項按鈕
同意方式
問答題
檔案上傳
傳送按鈕

以下會説明當中常用的9個零件。

文字

文字：可以輸入只有一行的簡單内容，可以適用於名字，地址等的項目。

欄位類型：在這裡打勾成爲必填欄位
欄位名稱：可以設定欄位名稱例如name,address等
預設值：在這裡可以輸入例子或示範內容等。設定示範內容（預設值）使用者比較容易輸入項目内容，提升使用者輸入内容的意願。
預設值在瀏覽器顯示如下：

Akismet：打勾這項可以減少垃圾信（需要另外設定Akismet）

網址

網址：可以輸入網址，基本上與文字一樣，但使用者輸入不符網址的格式自動要求重新輸入。
其他設定項目與文字一樣。

電話號碼

電話號碼：可以輸入電話號碼，基本上與文字一樣，但使用者輸入不符電話號碼的格式自動要求重新輸入。
其他設定項目與文字一樣。

日期

日期：可以輸入出生年月日等
可以設定最小值至最大值的範圍

文字區域（ textarea）

上述的文字只能輸入一行内容，文字區域可以輸入好幾行都沒有問題。可以適用於詢問内容，備注等。

下拉式選單（dropdown menu）

下拉式選單：使用下拉式選單可以選擇縣市等的選單

ContactForm7-10
選項：在這裡需要輸入想要下拉式選單當中顯示的選擇項目，每一行輸入一個項目。例如做選擇縣市的選單要輸入所有縣市。如下：
台北市
新北市
桃園市
新竹市
新竹縣
宜蘭縣
基隆市
打勾“允許多重選取”下拉式選單中需要選擇一個以上的項目時使用。
打勾“以空白項目作為第一個選項”第一行想要顯示空白時使用。推薦每次打勾這個項目。