[WordPress] 客製化 Contact Form 7 表單時使用 jQuery 捕捉事件

表單真的是網站上很常見的功能,套裝外掛也很方便使用,但一定有時候就是有那麼一點不夠,所以就是自己包過,把內容處理好後再傳給表單送出。

使用 WordPress 的表單外掛絕對會推: Contact Form 7

要包裝前端也不難,後台欄位控制也可以自定義 HTML 標籤與 CSS 樣式。

但,送出的時候怎麼捕捉事件?

這款外掛還是夠強大,就是這部分文件沒寫好,只有在 3.3 改版歷程中提到,而開發人的知識家(Stackoverflow)有解答

就是下面的事件 flag

  • wpcf7:invalid 驗證錯誤事件
  • wpcf7:spam 垃圾信事件
  • wpcf7:mailsent 信件送出成功事件
  • wpcf7:mailfailed 信件送出失敗事件
  • wpcf7:submit 按下送出事件

前端使用 jQuery 去聽這幾個事件,會在發生這些事的時候被同時觸發。

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});

這樣要完整結合客製化表單服務就沒問題囉~

Facebook 外掛整合

Share: