最近幫一位台灣的朋友設計了一個關於母親節活動的網頁,需要對用户進行調查,就使用到 Contact Form 7 來實現聯繫表單配置。

Contact Form 7 是一個使用簡單的 WordPress 聯繫表單插件,簡單但靈活性高,可以生成多個聯繫表單,支持通過標記自定義郵件或表單內容的顯示,Ajax 提交和 jQuery 表單插件支持,可結合 Akismet 過濾垃圾郵件,同時也支持 CAPTCHA 反垃圾郵件,表單域元素支持各種最常見的:文本 (域與區) 、郵箱、鏈接、電話、數字 (選值框與滑動選值) 、單選框、複選框、下拉菜單、 CAPTCHA 等。 Contact Form 7 強大、簡單而靈活,但不是萬能的,地址需要使用下拉式菜單,而 Contact Form 7 只有實現單獨的下拉式菜單,不能關聯,所以只有通過 jQuery 來實現區域的下拉式選擇。

網上有很多關於 Contact Form 7 的文章,絕大多數是介紹,一點都不實用,但確實沒有什麼好寫的教程,使用起來都一目瞭然,沒有難度。

首頁我們在 WP 後台搜索 Contact Form 7 安裝即可,啓用後插件會自動檢測 WP 的語言來匹配,所以不用擔心漢化,同時插件默認已經創建了一個表單,如下圖:

WordPress強大的聯繫表單Contact Form 7使用與演示

生成標籤:以文本域為例,點擊上圖右側中的 「文本域」,彈出 「文本域」 的編輯框,如下圖:

WordPress強大的聯繫表單Contact Form 7使用與演示

這些選項一目瞭然,重要的是需要把 [text your-name placeholder "筆者"] 這段代碼添加到左側的 「表單」 中,再把 [your-name] 代碼添加到下圖的 「郵件正文」 中。

WordPress強大的聯繫表單Contact Form 7使用與演示

其它的標籤使用都是一樣,生成一個標準的聯繫表單非常簡單的就實現了,台灣地區下拉式菜單是通過 jQuery 插件來實現。如需添加 CAPTCHA 驗證碼標籤,需要安裝 Really Simple CAPTCHA 插件,沒有安裝,在前台頁面會提示安裝。