Contact Form 7 WordPress 表單外掛,免費表單外掛的佼佼者,定製功能強悍,相當大部分 theme 有用到或者基於此外掛改造。下面

簡要說說,我們在響應式網站建設外貿網站建設專案中經常用到的一些定製方法以及細節處理。當然表單就是我們在網站中獲取客

戶詢盤的重要手段!你懂的。

第一步:外掛下載安裝

Contact Form 7 外掛下載地址:https://WordPress.org/plugins/contact-form-7/  可在後臺直接下載

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

當前最新版本 4.3.1 。安裝完成之後在後臺選單欄會出現

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

直接新建表單,圖下圖,三個紅色框框圈起來的就是我們的表單欄位以及提交按鈕

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

需要的欄位根據自身網站需求來構建表單,欄位使用也相當簡單,直接點欄位,都會有相應的提示

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

還可以像我們一樣,巢狀 html 程式碼來使用,這樣我們可以在頁面自定義 CSS 來非常方便建立漂亮的表單。

建立完之後,要使 Contact Form 7 外掛前臺正常收發信,還需要在後臺配置 SMTP 資訊,安裝 smtp 外掛即可!

第二步:收件配置選項

到這一步,還不算完成,點選項卡的郵箱,會出現 如下

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

根據你命名的表單欄位的 name,在下面的選項中來填寫試用,才能讓表單正常收發信。很多使用者,就是沒有配置此選項導致無法正常

收發信。

第三步:提示資訊配置

切換到選項卡留言選項,可以看到當前臺使用者輸入資訊正確或者錯誤的相關提示,在這邊可以自定義

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

第三步:額外配置

這一步可以省略,此處可以自定義觸發表單的時候啟用什麼事件,高階使用者可以用到此高大上的功能!一般小白直接忽略即可。

如上,我們最終基於 Contact Form 7 WordPress 表單外掛輕鬆的構建了漂亮的 WordPress 表單功能,如圖

Contact Form 7 WordPress表單外掛使用教程 表單外掛教程

是不是很強大!