在使用ELementor製作詢盤表單/聯繫表單時,為了避免頻繁收到垃圾詢盤/郵件,我們可以給表單添加Google reCAPTCHA V3進行反垃圾驗證,這樣以來,當網頁里包含表單時,會自動載入reCAPTCHA進行無感知驗證,能大幅度減少垃圾詢盤郵件,也不會給使用者添加負擔:譬如點擊驗證碼或驗證圖片等等。
按照這篇教學添加谷歌反垃圾驗證后,在表單所在頁面的左下角/右下角/表單提交按鈕上方,就能看到下圖所示的圖示。
![image 135 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-135.png)
不過,要說明的是,由於預設的reCAPTCHA V3載入的是外網資源,所以,如果在大陸訪問網站時載入的是外網資源的話,回應速度有明顯的降低,於是,這種做法通常只適用於架設企業網站或外文網站,不適合中文網站。
好在,我已經研究發現了調用全球reCAPTCHA資源的方法,這樣以來,即便在大陸訪問reCAPTCHA資源,也能順利載入,下文我們來介紹具體做法。
具體分為4個步驟:
- 為你的WordPress網站註冊Google reCAPTCHA,獲取兩個密鑰
- 將金鑰填入網站的Elementor-設置-集成頁面中
- 在Elementor製作的表單中添加reCAPTCHA V3字段
- 使用Code Snippets外掛,添加代碼段,實現reCAPTCHA V3的資源全球化,以便國內能順利載入
第一步、為你的WordPress網站註冊Google reCAPTCHA
第1步,進入:https://www.google.com/recaptcha/admin 並登錄你的谷歌帳號(如果還沒有,就去註冊Gmail)
第2步,點擊創建按鈕,進入下面的介面后,點擊(1)切換到經典密鑰模式
![elementor for google recaptcha v3 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) elementor for google recaptcha v3](https://loyseo.com/wp-content/uploads/2023/10/elementor-for-google-recaptcha-v3.jpg)
第3步,然後按下方圖片所示輸入標籤、網域等資訊並提交。
![image 129 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-129.png)
![image 130 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-130.png)
第4步,獲取這兩個密鑰
![image 131 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-131.png)
第二步、將密鑰填入網站的Elementor-設置-集成頁面中
前往你的WordPress網站後台,進入Elementor-設置-集成頁面,如下圖所示,黏貼輸入網站密鑰和密鑰,最後拉到頁面下方點擊保存。
![image 132 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-132.png)
第三步、在Elementor製作的表單中添加reCAPTCHA V3字段
請編輯表單元素,添加新字段,將字段的Type選擇為recaptcha v3,將badge設為bottom left或其他你想要展示的位置。
![image 133 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-133.png)
然後保存這個頁面,去預覽一下效果,就能看到下圖了。
![image 134 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA)](https://loyseo.com/wp-content/uploads/2021/05/image-134.png)
第四步、使用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');
}
![add google recaptcha v3 code snippet - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) add google recaptcha v3 code snippet](https://loyseo.com/wp-content/uploads/2023/10/add-google-recaptcha-v3-code-snippet.jpg)
接下來我們對比一下區別,如下兩圖,均在在沒有開代理的情況下,且是清緩存初次訪問網站
這是使用預設reCAPTCHA V3,調用的是 google.com 的資源,無法順利載入
![google recaptcha v3 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) google recaptcha v3](https://loyseo.com/wp-content/uploads/2023/10/google-recaptcha-v3.jpg)
這是加了Code Snippet之後,調用的是 recaptcha.net 的資源,順利載入
![recaptcha v3 - 如何給Elementor的表單添加反垃圾驗證(Google reCAPTCHA) recaptcha v3](https://loyseo.com/wp-content/uploads/2023/10/recaptcha-v3.jpg)
至此,大功告成,如有疑問可在下方留言,或在聯繫我頁面中,加入微信群交流。
Your page rank: