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

本篇文章更新時間:2020/07/13
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~


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

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

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

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

這款外掛還是夠強大,這部分文件在這 DOM events3.3 改版歷程中更新,而開發人的知識家(Stackoverflow)有解答

就是下面的事件 flag (2020/07/13 對應最新版本 5.2 寫法更新)

  • wpcf7invalid 驗證錯誤事件
  • wpcf7spam 垃圾信事件
  • wpcf7mailsent 信件送出成功事件
  • wpcf7mailfailed 信件送出失敗事件
  • wpcf7submit 按下送出事件

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

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

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


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

發佈留言

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