監聽 Contact Form 7 事件並執行想要的動作

此文章已於 2022-03-28 更新

WordPress裡有很多好用的表單外掛，我個人最常用的是Gravity Form，簡單好用易上手，但如果面對比較複雜的客製需求時，我則會改用 Contact Form 7 ，原因無他，就因為Contact Form 7非常的陽春，但也提供很多好用的事件綁定處理，最近剛好遇到客戶希望填完表單後，可以進行檔案的下載或是頁面的瀏覽，這邊就筆記一下這方面的應用。

 

Contact Form 7可監聽的事件

wpcf7invalid：表單送出後未填寫完整資料而引發的錯誤。
wpcf7spam：表單送出後被判定為垃圾信的錯誤。
wpcf7mailsent：表單送出並成功後（以送出郵件為主）會觸發。
wpcf7mailfailed：表單送出但發送郵件失敗時會觸發。
wpcf7submit：按下「送出」按鈕會觸發。

 

觸發事件的寫法

這邊我使用的是jQuery，以我開頭的需求來看，成功送出後要可以下載檔案，語法如下：

$(".wpcf7").on("wpcf7mailsent",function(){
  //這裡放觸發後要執行的動作
  location = '檔案連結網址';
})

如果只是要按下「送出」觸發，則可以將 wpcf7mailsent 替換為 wpcf7submit ，觸發後要執行的動作當然也可以視自身需求而定，更多詳細的資料可以參考官方文件。