Contact Form 7 教學 WordPress 表單 – WordPress 架站 必學外掛!

Contact Form 7 教學 WordPress 表單 教學目的:

1.透過WordPress後台安裝Contact Form 7 聯絡表單以及使用及設定位置介紹

2.介紹Contact Form 7 聯絡表單後台各種設定功能

歡迎回到鵠學苑— Contact Form 7 教學 WordPress 表單WordPress 架站 必學外掛! 在這一篇Contact Form 7 教學 中,要教大家如何在架設網站時加入 Contact Form 7 聯絡表單,這個外掛最主要的功能,就是為網站提供一個正式的聯絡方式,透過建立 WordPress 表單 與客戶建立電子郵件的往來,可以讓使用者能夠有效的與網站管理員溝通,提出需求,詢問各種問題等等。而 WordPress 表單 中最廣泛被使用的,就是Contact Form 7,在一些知名的WordPress付費主題中所支援的表單外掛,幾乎都是使用Contact Form 7,這個外掛的設定相當快速,使用按鍵的方式就可以設定表單內容而不需要透過寫入程式碼,可自由定義表單中哪些資料是客戶必填,也可以加入問題種類下拉式選單以及上傳檔案的選項,還有支援 reCAPTCHA 阻擋垃圾廣告郵件的驗證功能,如何建立圖形驗證,可以參考這篇教學:Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能。另外對於新手站長的最大幫助,就是Contact Form 7擁有已經全部繁體中文化的版本,使用起來不存在看不懂的問題。幾乎可以說一個網站表單該具備的所有功能,在Contact Form 7中都已相當完善。

相信很多同學可能都會有疑惑,現在的通訊軟體相當發達,不管是LINE、FaceBook等等都可以即時的與網站使用者對話,為何還需要建立Contact Form 7 聯絡表單?這就是從較深層面的意義來說起,我們先假設自己是使用者,當我們瀏覽完網站,在一頁一頁的商品看完之後,有問題想要詢問,第一直覺會是找哪裡?我相信大多數的人都會第一時間看網站上方的MENU(主要選單)區域,也就是選單的部分,如果我們網站有建立一個”聯絡我們“的頁面,讓使用者簡單的填寫部分資料就可以送出問題,相信比起讓使用者到處找LINE或FACEBOOK的帳號來說,會有相當的加分效果!本篇教學主要是說明Contact Form 7 聯絡表單這個WordPress的設定,另外有關連絡表單如何發送信件,請參考我們另一篇教學文章,延伸閱讀: WordPress SMTP 設定 及 Mail Server 架設 。

接下來,讓我們直接進入正題,跟著鵠學苑的腳步,讓我們開始學習~

(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

外掛下載點:https://tw.wordpress.org/plugins/contact-form-7/

 

• 透過WordPress後台安裝Contact Form 7 聯絡表單以及使用及設定位置介紹

第一步:進入WordPress後台,從側邊工具欄內選擇外掛→安裝外掛,並在右上方搜尋欄內輸入 Contact Form 7 以搜尋外掛,可以參考之前的文章,WordPress 教學 基礎介紹六(外掛)

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第二步:外掛的圖樣是一座山峰的圖案,可以直接點選安裝,安裝完成後點擊啟用。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第三步:在”已安裝外掛”內可以看到Contact Form 7 的項目,將滑鼠移過去會出現編輯的字樣。

Contact Form 7 教學 WordPress 表單

第四步:也可以在WordPress後台側邊工具欄直接找到繁體中文選項 “聯絡表單”,點選第一個選項,一樣會進入到聯絡表單的設定畫面。

Contact Form 7 教學 WordPress 表單

• 介紹Contact Form 7 聯絡表單後台各種設定及操作功能

第一步:進入到聯絡表單的設定後,可以看到在設定的方框內有四個頁籤,分別是表單、郵件、訊息、其他設定。

1.表單:設定聯絡表單在網頁上要顯示的選項,如果你對於HTML及CSS有概念,可以在這裡自行添加元素,改變表單樣式。
2.郵件:這裡是設定當使用者發送聯絡表單後,顯示在電子郵件內的格式以及內容。
3.訊息:使用者在操作聯絡表單時,網站跳出的訊息。比如說標記為必填的欄位如果沒有填寫,就會有訊息提示該欄位不得留空。
4.其他設定:這個選項較少用到,如果對於語法有一定程度的同學,再來設定。

Contact Form 7 教學 WordPress 表單

第二步:在表單內一開始聯絡表單內已經有內建一部分的標籤(label),對於標籤的名稱如果想要更改的話,在


第三步:如下圖,可以將標籤名稱改得較為簡潔。

第四步:點選方框上方兩排橘底白字的標籤按鈕,可以新增標籤,在這裡以新增手機號碼示範,如下圖複製第四個標籤”問題內容”,並貼在下方。


第五步: < label > 後方的名稱改成”手機號碼”並將下方[textarea your-message]的部分刪除。


第六步:在刪除的位置點擊”電話”的橘色標籤按鈕,會出現如下圖畫面,可以自行決定是否要選擇為使用者必填欄位,接著點選插入標籤即可。

第七步:在表單畫面下方點擊儲存,回到前端網頁去看,可以看到聯絡表單中多了手機號碼的選項。

Contact Form 7 教學 WordPress 表單

第八步:以同樣的方法複製上一段標籤,這一次加入的是要讓使用者自己選擇”問題種類”的大項次,點擊”下拉式選單“的標籤按鈕,可以看到如下圖設定的小視窗。

Contact Form 7 教學 WordPress 表單

第九步:與電話設定不同的是,這裡可以自訂要讓使用者選擇的問題種類,輸入選項後,一樣點擊插入標籤,如下圖所示。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第十步:郵件的頁籤里,說明如下:

Contact Form 7 教學 WordPress 表單

1.收件者:將會收到使用者發送聯絡表單內容的電子信箱,可設定多組,電子信箱位址之間以半形逗號(,)隔開即可。

Contact Form 7 教學 WordPress 表單

2.寄件者:顯示發送聯絡表單的使用者在表中填寫的名稱。

Contact Form 7 教學 WordPress 表單

3,主旨:對應聯絡表單的主旨內容。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單 4.其他標題:Reply-To指的收到聯絡表單訊息的網站管理員,回覆信件時將會傳送到使用者的所設定電子信箱。

Contact Form 7 教學 WordPress 表單

5.郵件本文:外掛裡已經預先設定好了部分內容,可以自行編排文字的位置,我們剛剛在表單那裡有新增”手機號碼”以及”問題種類”這兩個選項,因此在本文內也要新增這兩個標籤。

Contact Form 7 教學 WordPress 表單

第十一步:在郵件頁面標題那裡,有提示  “在下方欄位中,可以使用以下郵件標籤:[your-name][your-email][your-subject][your-message][tel-842][menu-165]”,我們要在新增的就是[tel-842]以及[menu-165]這兩個標籤,如下圖,輸入手機號碼的文字,並在文字下方將[tel-842]複製下來並貼上。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第十二步:問題種類選項也是一樣的做法,傳送後的電子郵件內容如圖二所示。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第十三步:訊息頁籤內可以自訂想要顯示的文字,如下圖所示,可直接更改文字,或者以不同語言顯示。

Contact Form 7 教學 WordPress 表單

Contact Form 7 教學 WordPress 表單

第十四步:其他設定,由於聯絡表單外掛是以”contact-form-7 id=”16456″ title=”聯絡表單1″ 這樣的shortcode(短代碼)來設定,所以在這個頁籤除非有特殊的設計,不然其實並不需要多增加語法或更動。

Contact Form 7 教學 WordPress 表單

結語:

在聯絡表單的最上方有一段說明文字 “將這個短代碼複製到您的文章、頁面或文字小工具中:contact-form-7 id=”16456″ title=”聯絡表單 1”(注意!在貼上短代碼時要包含[ ]的符號),這就是説,要新增聯絡表單的位置可以在頁面,文章以及側邊欄或頁尾小工具中,只要在文字區塊或CODE區塊貼上這一段短代碼,就會顯示在該位置。如果還是比較不清楚,可以參考 WordPress介紹 中有關文章、頁面的教學,另外跟大家說一個小技巧,測試聯絡表單是否正確的發送,可以先將收件人設定成自己的信箱,先看看收到郵件後的畫面是否正常以及能不能收到聯絡表單信件,有關信件收發設定,也可以參考這一篇文章 WordPress SMTP 設定 及 Mail Server 架設

今天的教學內容相當簡單,各位同學只要按部就班,相信就可以很快上手的!請不要忘記持續追蹤 鵠學苑 的教學文章,更多更實用的WordPress教學文章會在陸續發布喔!您的支持,是鵠學苑最大的動力!

WordPress 外掛教學相關文章:

網站架設知識推薦閱讀:

WordPress 介紹 – 全球市佔率達三成,遠超其他CMS管理系統

免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger

WordPress 市佔率再創新高,2019 年成長至 33.4%!

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top