Cách tạo mới Google reCAPTCHA v2 và chèn vào contact form

Sử dụng dịch vụ miễn phí Google reCAPTCHA v2 để tạo sự chuyên nghiệp và tránh những yêu cầu spam không mong muốn cho biểu mẫu liên hệ contact form trong blogspot

Lợi ích khi chèn Google reCAPTCHA v2 loại checkbox vào biểu mẫu contact form yêu cầu mỗi người phải xác thực mình không phải là robot trước khi bấm vào nút Gửi đi, như vậy sẽ tránh được những yêu cầu spam. Và khi biểu mẫu liên hệ có reCAPTCHA trông cũng chuyên nghiệp hơn hẳn tạo sự tin cậy cho khách hàng những người thực sự muốn liên hệ với chủ sở hữu trang web.

Trang liên hệ tích hợp Google reCAPTCHA v2

Google reCAPTCHA v2 là dịch vụ hoàn toàn miễn phí không bị giới hạn requests mà còn xem được số liệu thống kê trong bảng điều khiển. Việc chèn reCAPTCHA vào trang web cũng tương đối dễ dàng. 3 bước dưới đây sẽ giúp bạn tạo mới Google reCAPTCHA v2 và chèn vào contact form

Bước 1: Đăng ký site mới

Các bạn truy cập địa chỉ https://www.google.com/recaptcha/admin/create đăng nhập bằng tài khoản Google và tạo cho mình một tên miền, lưu ý với mỗi tên miền đều phải đăng ký và tương tự nếu sử dụng sub cũng phải đăng ký mới.

Đăng ký site mới để lấy khóa cho site

Mẫu đăng ký điền có dạng

Label
thietkeblogspot.com

reCAPTCHA type
reCAPTCHA version 2 Verify requests with a challenge
  "I'm not a robot" Checkbox Validate requests with the "I'm not a robot" checkbox

Domains
thietkeblogspot.com

Owners
Để trống hoặc thêm địa chỉ tài khoản quản lý khác

Khi điền xong nhấp vào nút SUBMIT đăng ký mới trang sẽ chuyển hướng đến giao diện quản lý và hiển thị sẵn 2 khóa: trang web và bí mật, các bạn chỉ sao chép khóa trong mục mình tô đâm bên ảnh dưới

Sao chéo SITE KEY

Bước 2: Chèn reCAPTCHA vào biểu mẫu form

Form có tích hợp reCAPTCHA sẽ có dạng như sau:

<form action="/page.html" name="contact-form" method="POST">
  <input type="text" placeholder="Tên" required=""/>
  <input type="text" placeholder="Email" required=""/>
  <textarea placeholder="Nội dung" required=""></textarea>
  <div class="g-recaptcha" data-sitekey="your_site_key"></div>
  <div class="error-message"></div>
  <input type="submit" value="Send"/>
</form>

Bước 3: Xác thực reCAPTCHA trước khi submit form

Trước tiên chèn đoạn script của Google hiển thị hộp kiểm checkbox reCAPTCHA v2

<script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script>

Tiếp theo xác thực biểu mẫu bằng script

Xác thực bằng Jquery

<script>//<![CDATA[
$('form[name="contact-form"]').on('submit',function(){
  var captcha_response=grecaptcha.getResponse()
  if(captcha_response.length==0){
    $('.error-message').html('<p style="margin-bottom:1.3rem;color:#d93025;">Vui lòng chọn hộp kiểm này nếu bạn muốn tiếp tục.</p>')
    return false
  }
  return true
})
//]]></script>

Xác thực bằng JavaScript

<script>//<![CDATA[
function validateform(){
  var captcha_response=grecaptcha.getResponse()
  if(captcha_response.length==0){
    document.querySelector('.error-message').innerHTML='<p style="margin-bottom:1.3rem;color:#d93025;">Vui lòng chọn hộp kiểm này nếu bạn muốn tiếp tục.</p>'
    return false
  }
  return true
}
//]]></script>

Chèn thêm đoạn onsubmit="return validateform();" trong thẻ <form> của biểu mẫu

Nguồn: https://www.share123bloggertemplates.com/

from Template Blogspot Bán Hàng, Bất Động Sản Đẹp tại Share123 Blogger Templates https://www.share123bloggertemplates.com/2020/04/cach-tao-moi-google-recaptcha-v2-va.html
via Nguồn: https://www.share123bloggertemplates.com/