Contact Form 7 加入顯示條件,Conditional Fields 外掛教學說明

Contact Form 7 加入顯示條件:

1. 聯絡表單 Conditional Fields 外掛安裝與表格設定範例

2. 欄位顯示條件式設定方式

Contact Form 7 加入顯示條件 主要是使用 Conditional Fields 外掛功能,為聯絡表單加入 group 群組,透過群組顯示條件公式的設定,讓每一個群組都能依據使用者選擇的項目來顯示不同的選項,讓聯絡表單欄位可以有更多變化性,更能製作出具有實用性的統計問答欄位,讓每一份提交的表單更具有參考價值。

本次教學必須要使用 Contact Form 7 所提供的短代碼才能完成表單建置,如果對聯絡表單欄位建立方式還不熟悉,可以參考這一篇文章:Contact Form 7 教學 WordPress 表單 – WordPress 架站必學外掛

Contact Form 7 – Conditional Fields 下載點:https://wordpress.org/plugins/cf7-conditional-fields/

Contact Form 7 – Conditional Fields 支援說明論壇:https://wordpress.org/support/plugin/cf7-conditional-fields/

• 聯絡表單欄位設定範例與外掛安裝

第一步:在安裝外掛介面搜尋 Contact Form 7 Conditional Fields,依序點選安裝與啟用,如下圖所示。

Contact Form 7 加入顯示條件

第二步:在聯絡表單子選單中可以找到 Conditional Fields 基本設定項目。

Contact Form 7 加入顯示條件

下圖標示處是群組變換時是否要顯示動畫,以及動畫入場持續時間,這部分屬於視覺效果,可按個人喜好做調整。

Contact Form 7 加入顯示條件

第三步:首先新增上層條件欄位,以下拉式選單建立選項。

Contact Form 7 加入顯示條件

第四步:筆者以服飾做示範,選項輸入方式為每行一個選項,其餘按照字面說明可以自行決定是否要勾選。

Contact Form 7 加入顯示條件

第五步:設定完成後顯示如下圖,主條件選項是被命名為 menu-266 的下拉式選單。

Contact Form 7 加入顯示條件

第六步:接者點重複上一步驟建立兩個子群組,分別命名為 menu-266 及 menu-267 ,接者點選 Conditional Fields Group 的按鈕,開始建立子群組。

Contact Form 7 加入顯示條件

第七步:menu-267 的下拉選單筆者將以名稱為  group-man 的群組代碼包覆,完成欄位名稱輸入後點選插入標籤。

Contact Form 7 加入顯示條件

第八步:將 [/group] 結尾標籤放置於 </label> 後方。

Contact Form 7 加入顯示條件

第九步:重複上一步的動作將 menu-268 以 [group-woman] 包覆,完成如下圖,如果對文字說明不清楚,可直接參考圖片內容的示範寫法。

Contact Form 7 加入顯示條件

 

• 欄位顯示條件建立方式

第一步:第一小節中完成表單欄位後,點選 Conditional Fields 頁籤,按照下圖所示點選綠色按鈕以開始新增群組顯示條件。

Contact Form 7 加入顯示條件

第二步:首先設定 grounp-man 的顯示條件。

Contact Form 7 加入顯示條件

第三步:下圖設定的條件式:當 menu-266 等於男裝服飾時,將顯示 group-man 中所設定的白、灰、黑三個選項

Contact Form 7 加入顯示條件

第四步:重複上一步驟對 group-woman 做設定,不同的是要將條件改成女裝服鉓,完成後點選儲存。

Contact Form 7 加入顯示條件

第五步:下圖為完成後的項目切換示意,選擇男裝服飾時將顯示白、灰、黑三種顏色的下拉式選單,反之亦然。

Contact Form 7 加入顯示條件

第六步:設定群組後,在郵件內文中必須以下圖中標示的方法做字段設定,輸出至電子郵件模板時才會根據使用者選項來顯示欄位內容。

Contact Form 7 加入顯示條件

結語:

Contact Form 7 Conditional Fields 可以應用的範圍很廣,比如產品報修頁面中需要選擇產品型號時,如果網站有上百個商品,顧客在點選下拉選單時將會顯示非常多的商品資料,光是尋找商品就非常累人了,此時就可以使用本次教學分享的功能,設定商品分類為條件,讓顧客可以在維修表單中做簡易篩選,增進使用者操作體驗喔!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress外掛 相關教學文章:

Elementor 教學 - WordPress 視覺化網站編輯外掛,基本操作及設定介紹

WordPress 特色影片 – Featured Video 讓文章顯示影片縮圖與連結

WordPress Gutenberg (古騰堡) 5.0 版本全新內建網頁編輯器外掛教學

Timeline Express 時間軸製作 沿革 年表

All in one WP Migration 教學 WordPress搬家 及 網站備份外掛

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

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

Chrome 移除蓋版廣告?Google 12 項廣告體驗規範簡易說明

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 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