WordPress 小功能

How Smart Tools Are Shaping the Future of Creative Work

Eric Chuang
2020-10-29

在網址中加入參數,藉此傳遞資訊給瀏覽器,在行銷上是相當常見的手法,譬如傳遞優惠券代碼、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 的自訂欄位,便可以將該欄位的內容視為表單的預設值了。

參考資料

Sign up for our newsletter

Subscribe to our newsletter to receive the latest updates, expert insights, and practical tips directly in your inbox. Stay informed with content designed to help you grow.

+480.000 happy customers

Gain more with expert solutions

Unlock the full potential of your business with our expert solutions. Our team provides tailored strategies, professional guidance, and actionable insights to help you achieve better results.

  • Eric Chuang
  • •
  • 2025-01-23
如何同時使用 Webinoly 與 Cloudflare 保護網站安全

在社群夥伴勇哥的文章〈Webinoly 最新版快速安裝〉中,提到使用 Webinoly 來建立 WordPre […]

主機