安裝 Google reCAPTCHA

Formmy 支援 Google reCAPTCHA 的服務來防止惡意的請求，提供以下兩種方式

開始安裝

首先，先到 Google reCAPTCHA 網站申請帳號， https://www.google.com/recaptcha/

captcha-index

註冊完成後，請先將 Google reCAPTCHA API 加至網站




 






<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <!-- website content -->
  </body>
</html>
1
2
3
4
5
6
7
8
9

「我不是機器人」核取方塊

將程式碼以及reCAPTCHA 網站金鑰貼到前端頁面表單的<form> 的表單之中





 



<form action="https://formmy.co/f/Your-Code" method="POST">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="tel" name="tel">
  <div class="g-recaptcha" data-sitekey="{YOUR_GOOGLE_SECRET_KEY}"></div>
  <button type="submit">送出</button>
</form>
1
2
3
4
5
6
7

secret-key

成功設定完成，如下圖

captcha_checkbox

隱形驗證方式

將程式碼以及reCAPTCHA 網站金鑰貼到前端頁面的 recaptcha API 的 render 參數中




 






<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js?render={YOUR_GOOGLE_SECRET_KEY}" async defer></script>
  </head>
  <body>
    <!-- website content -->
  </body>
</html>
1
2
3
4
5
6
7
8
9

secret-key-2

將表單中的 g-recaptcha 移除





 



<form action="https://formmy.co/f/Your-Code" method="POST">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="tel" name="tel">
  <!-- <div class="g-recaptcha" data-sitekey="{YOUR_GOOGLE_SECRET_KEY}"></div> -->
  <button type="submit">送出</button>
</form>
1
2
3
4
5
6
7

Formmy 後台設定

到 Formmy 表單後台的表單設定，將申請的 Google reCAPTCHA 的密鑰加入後台，

form_setting

secret_key-3

注意

如果密鑰留空的話，Formmy 將不會驗證 Google reCAPTCHA，請依網站使用情境做調整。

大功告成！

完成以上步驟後，Formmy 會自動去幫你向 Google 驗證你的請求是否為惡意請求，你可以放心接收你的寶貴資料。

錯誤畫面

如果系統判斷為惡意請求，將會顯示該畫面。狀態碼預設為 422。 google_error

參考文件

← AJAX →