Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

讓 Contact Form 7 透過網址參數取得預設值

在網址中加入參數,藉此傳遞資訊給瀏覽器,在行銷上是相當常見的手法,譬如傳遞優惠券代碼、UTM 參數等,都會透過 https://example.com/?coupon=aabcde 等方式,讓資料可以直接傳給目標頁面。

這種手法,也可以拿來 Contact Form 7 做使用,讓網站可以直接透過網址帶入預設值。我們可以透過這個連結來看實際效果。如果你點擊前面的連結,你的名字欄位就會帶入「你是從Eric的文章來的齁」,如果你點的是這個連結,便會帶入「這是另一個範例」。

基本作法

根據 Contact Form 7 的官方文件,我們可以透過 default 這個屬性,來設定表單欄位的預設值,譬如 default:"Eric Chuang" 便會將 Eric Chuang 變成欄位的預設值。但是當我們填入 default:get 時,欄位就會帶入網址參數的屬性值,而參數的查詢鍵 (query key) 便是欄位的 name 屬性。

以前面的例子來說,我們在 Contact Form 7 編輯表單時,便是透過以下的寫法來達成:

[text* your-name default:get]

前面範例的網址,則是 https://huanyichuang.com/feedback/?your-name=你是從Eric的文章來的齁

除了可以傳遞到純文字欄位外,也可以用來帶入下拉式選單的預設值。

取得自訂欄位值

此外,除了從 GET 取得網址參數帶入預設值外,也可以透過 get_post_meta() 取得的自訂欄位來當作 Contact Form 7 的預設值。

透過 Advanced Custom Field,我們可以針對連絡表單頁面,增加與 name 屬性相同名稱的自訂欄位,接著將聯絡表單做以下的修改:

[text* your-name default:post_meta]

接著,我們透過 ACF 增加名為 your-name 的自訂欄位,便可以將該欄位的內容視為表單的預設值了。

參考資料

Eric Chuang
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料