專注於架設企業網站,分享WordPress教學和Elementor教學

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

更新日期:2024-07-26
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

使用ELementor製作詢盤表單/聯繫表單時,為了避免頻繁收到垃圾詢盤/郵件,我們可以給表單添加Google reCAPTCHA V3進行反垃圾驗證,這樣以來,當網頁里包含表單時,會自動載入reCAPTCHA進行無感知驗證,能大幅度減少垃圾詢盤郵件,也不會給使用者添加負擔:譬如點擊驗證碼或驗證圖片等等。

按照這篇教學添加谷歌反垃圾驗證后,在表單所在頁面的左下角/右下角/表單提交按鈕上方,就能看到下圖所示的圖示。

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

不過,要說明的是,由於預設的reCAPTCHA V3載入的是外網資源,所以,如果在大陸訪問網站時載入的是外網資源的話,回應速度有明顯的降低,於是,這種做法通常只適用於架設企業網站或外文網站,不適合中文網站。

好在,我已經研究發現了調用全球reCAPTCHA資源的方法,這樣以來,即便在大陸訪問reCAPTCHA資源,也能順利載入,下文我們來介紹具體做法。

具體分為4個步驟:

  1. 為你的WordPress網站註冊Google reCAPTCHA,獲取兩個密鑰
  2. 將金鑰填入網站的Elementor-設置-集成頁面中
  3. 在Elementor製作的表單中添加reCAPTCHA V3字段
  4. 使用Code Snippets外掛,添加代碼段,實現reCAPTCHA V3的資源全球化,以便國內能順利載入

第一步、為你的WordPress網站註冊Google reCAPTCHA

第1步,進入:https://www.google.com/recaptcha/admin 並登錄你的谷歌帳號(如果還沒有,就去註冊Gmail

第2步,點擊創建按鈕,進入下面的介面后,點擊(1)切換到經典密鑰模式

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

第3步,然後按下方圖片所示輸入標籤、網域等資訊並提交。

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)
如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

第4步,獲取這兩個密鑰

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

第二步、將密鑰填入網站的Elementor-設置-集成頁面中

前往你的WordPress網站後台,進入Elementor-設置-集成頁面,如下圖所示,黏貼輸入網站密鑰和密鑰,最後拉到頁面下方點擊保存。

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

第三步、在Elementor製作的表單中添加reCAPTCHA V3字段

請編輯表單元素,添加新字段,將字段的Type選擇為recaptcha v3,將badge設為bottom left或其他你想要展示的位置。

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

然後保存這個頁面,去預覽一下效果,就能看到下圖了。

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

第四步、使用Code Snippets外掛,添加代碼段,實現reCAPTCHA V3的資源全球化,以便國內能順利載入

首先,請安裝Code Snippets外掛,學習如何添加代碼段

然後,請按照下圖所示,添加本文所需的代碼段,並提交保存。

add_action('elementor_pro/forms/render_field/recaptcha_v3','deregister_recaptcha_script_v3',11,3); 
function deregister_recaptcha_script_v3() {
wp_dequeue_script('elementor-recaptcha_v3-api'); 
wp_deregister_script('elementor-recaptcha_v3-api');
$src_new = 'https://www.recaptcha.net/recaptcha/api.js'; 
wp_register_script( 'elementor-recaptcha_net_v3-api', $src_new, [], ELEMENTOR_PRO_VERSION, true ); 
wp_enqueue_script('elementor-recaptcha_net_v3-api');
}
如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

接下來我們對比一下區別,如下兩圖,均在在沒有開代理的情況下,且是清緩存初次訪問網站

這是使用預設reCAPTCHA V3,調用的是 google.com 的資源,無法順利載入

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

這是加了Code Snippet之後,調用的是 recaptcha.net 的資源,順利載入

如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)

至此,大功告成,如有疑問可在下方留言,或在聯繫我頁面中,加入微信群交流。

点赞

0 / 5 5

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我