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

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 ,觸發後要執行的動作當然也可以視自身需求而定,更多詳細的資料可以參考官方文件