聯絡表單可說是Landing page中相當重要的元素，而 WordPress 的 Contact Form 7似乎只要有用到訪客資料表格都會使用的外掛之一， 而上篇分享Wordpress與GetResponse串接，也是使用到Contact form 7的設定，查了一些關於 Contact form 7的相關設定與用法，在此做紀錄分享。

方法
(一) 將 Contact form 7 安裝至WP中， 點選外掛→安裝外掛，搜尋Contact Form 7，安裝並啟用。

(二)安裝成功，會看到左欄出現一項聯絡表單，點選聯絡表單 → 新增聯絡表單，裡面會先預設好一組表單。

(三)設定網頁中表單
進入新增的表單可以看到:
A部分: 為表單中已先預設好的項目，我們可以接續新增修改表單項目，或是全部都刪除重新設定。
B部分:若要增加預設值以外的項目，可以依據需求選擇上這一區的按鈕，來新增網頁表單中出現需要填入表單的項目。

如點選B區網址的功能會另外跳出視窗，可以在其中設定是否為必填選項，欄位名稱是填入要代表此欄位名稱的短碼代碼，一更改可以看到下方，預設值的設定則是可填入在表單中出現的示範樣式，最後點選插入標籤。

回到表單語法中，直接來調整語法位置，及項目顯示所需的文字，如 Your Nam等字樣就是手動加入進去。
這邊也會顯示於前一步驟設定的網址項目語法[url* url-502 placeholder “www.example.com”]，但調整中，需要注意一個地方，有時需要在前後手動加入 <label> </label> ，有時不用顯示，所以要注意一下有無出現錯誤的訊息提示，如果有錯誤提示就要檢查是不是有<label> 寫錯。

(四)於前台置入表格
1.由於我們使用的編輯器為elementor，直接在模組中加入Contact form 7，並將Style選擇剛剛設定的表格名稱Contact Form 01即會出現於前台頁面中。

2.若是使用短代碼加入，須至聯絡表單列表中的短代碼，直接複製貼上到需要表格的頁面中，就完成設定。

最後看一下顯示效果:

(五)設定管理員通知信件
接著切換到郵件的標籤下，這階段要開始設定信件的部分，首先設定訪者填寫好資料後，系統會寄給管理員的通知信，也就是寄給自己的信件，並非是寄給來訪者的信件。
以下圈起來的字串，則是在下面表欄中可以用到的標籤。會發現有些是粗體字，這代表信件中還沒有這些資訊，可以至下方的郵件內文中複製上這些標籤，之後收到的信件內才會出現訪者所填寫對應的內容。

收件者-可以改成指定收件信箱，但由於這邊我們已做了與GetResponse的連結，所以會依照 GetResponse 中的設定，在這邊無須更動。寄件者-當架設好網站，WordPress會預設為自己的網站名稱和信箱，所以不用再做更動。主旨-可以自行設定信件主旨。郵件內文-設定收到信件的文字內容與格式。

(六)設定給寄件人的信
至同頁面下方勾選使用 [郵件 (2)] ， 也就是設定確認信件，即是當訪客留下資料後，所會收到的確認信件 ，接著一樣照上一個步驟來編輯郵件內容 ，這邊欄位只要修改主旨和內容即可，其他無須更動。

(七)訊息成功送出的訊息回覆
最後設定當訪客填寫完後，按下送出後的成功訊息設定。到這邊，基本上聯絡表單已經設定完成了。

(七)客製化表單
contact form 7表格很好用 ，但是很多人說其中一大缺點就是樣式不好看，不太能客制化，可以在WP中加入CSS來設計表格樣式。於左欄>外觀 > 自訂 ，可以看到下方有個附加的CSS項目，就是可以放入WordPress使用佈景主題額外的CSS設定，因此把以下所屬contact form 7 CSS 填回這邊， 就會前台表格呈現不同的樣式。

/*Contact Form 7樣式設定*/
.wpcf7{
background-color: white; 
padding: 40px;
font-size: 20px; 
color: red; 
}

/*回應訪客的留言*/
.wpcf7 .wpcf7-response-output{
font-style:normal;
border:2px solid red;
}

/*傳送按鈕*/
.wpcf7-form-control.wpcf7-submit{
background-color: black;
color: white;
}

[小結]
很多人說 Contact Form 7很強大，但也有美中不足的地方，有些足額外需求，是需要搭配其他工具使用，可看看篇WordPress Skill – Contact7 + WP mail SMTP，但就單一表單設定，可根據需求增減欄位、指定管理員信箱，自動回覆確認信等， 使用Contact Form 7是很足夠也很彈性的，算是個值得認識的聯絡表單工具。