WordPress教學|Contact Form 7外掛為網站客製化聯絡表單

WordPress教學|Contact Form 7 外掛為網站客製化聯絡表單

當訪客對於網站上的產品、服務有興趣,要做進一步的諮詢、業務洽談時,通常會透過聯絡我們的表單填寫方便聯繫,所以為網站加入聯絡表單是非常重要的,現在就來學習如何使用 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 →點選安裝並啟動

安裝並啟用Contact Form 7外掛
▲ 安裝並啟用 Contact Form 7 外掛

step 2

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

點選聯絡表單
▲ 點選聯絡表單

在這邊你可以客製化調整表單內容:

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

step 3

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

Contact Form 7004
▲ 調整< label >後面的文字

step 4

現在我們來客製化表單內容,我們嘗試新增「電話號碼」。

1.先複製這下面這段內容,並往下貼上:
<label> 你的訊息 (選填)
    [textarea your-message] </label>

Contact Form 704
▲ 複製表單內容

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 教學

Google Analytics教學

聯盟行銷