0

我在我的网站的联系表单上设置了 Google reCAPTCHA。

我也在尝试在 localhost 和服务器上对其进行测试,但 recaptcha 仅在隐身模式下工作。

没有捕获 reCAPTCHA 邮件正在发送。我的问题是 grecaptcha.execute(); 没有执行,请为此提出解决方案。

$("#cont_msg").keypress(function (e) {
    var key = e.which;
    if (key == 13) {
      // the enter key code
      $("#contact_form_submit").click();
      return false;
    }
  });

  $(
    ".app_form_wrapper .apps_input input, .app_form_wrapper .apps_input textarea"
  ).keypress(function () {
    $(this).parent().removeClass("error");
  });
  
  function sendMail() {
  var co_name = $("#cont_name").val();
  var co_email = $("#cont_email").val();
  var co_phone = $("#cont_phone").val();
  var co_company = $("#cont_company").val();
  var co_message = $("#cont_msg").val();
  let data = {
    username: co_name,
    useremail: co_email,
    userphone: co_phone,
    usercompany: co_company,
    usermessage: co_message,
  };
  $("#loading").show();
  $("#contact_form_submit").hide();
  $.ajax({
    type: "POST",
    url: "contact_ajaxmail.php",
    data: data,
    success: function (contact) {
      //grecaptcha.execute();
      $("#loading").hide();
      $("#contact_form_submit").show();

      var i = contact.split("#");
      if (i[0] == "1") {
        $("#cont_name").val("");
        $("#cont_email").val("");
        $("#cont_phone").val("");
        $("#cont_company").val("");
        $("#cont_msg").val("");
        $("#contact_err").html(i[1]);

        $(".app_form_wrapper .apps_input").addClass("success");
        setTimeout(function () {
          $(".app_form_wrapper .apps_input").removeClass("success");
          $(".app_form_wrapper .apps_input").removeClass("error");
          $("#cont_email").parent().removeClass("error");
        }, 2500);
      } else {
        $("#cont_name").val(data.username);
        $("#cont_email").val(data.useremail);
        $("#cont_phone").val(data.userphone);
        $("#cont_company").val(data.usercompany);
        $("#cont_msg").val(data.usermessage);
        $("#contact_err").html(i[1]);

        $(
          ".app_form_wrapper .apps_input input, .app_form_wrapper .apps_input textarea"
        ).each(function () {
          if (!$(this).val()) {
            $(this).parent().addClass("error");
          } else {
            if (i[0] == 3) {
              $("#cont_email").parent().addClass("error");
            } else {
              $(this).parent().addClass("error");
            }
            $(this).parent().removeClass("error");
          }
        });
      }
    },
  });
}

**My form**
Here iam trying to send mails for entered email
<!DOCTYPE html>
    <html lang="en">
    <!-- BEGIN HEAD -->
    <head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    </head>
<form class="app_form_wrapper" role="form" >
                <div class="col-lg-6 text-left">
                    <div class="form-group apps-pulldown-20">
                        <div class="apps_input">
                            <input type="text" class="form-control" id="cont_name"placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group apps-pulldown-20">
                        <div class="apps_input">
                            <input type="text" class="form-control" id="cont_email" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group apps-pulldown-20">
                        <div class="apps_input">
                            <input type="tel" class="form-control" id="cont_phone" placeholder="Phone Number" minlength="10" maxlength="15">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                     <div class="form-group apps-pulldown-20">
                        <div class="apps_input">
                            <input type="text" class="form-control" id="cont_company" placeholder="Company">
                        </div>
                    </div>
                    <div class="form-group apps-pulldown-20">
                        <div class="apps_input">
                            <textarea rows="10" class="form-control" id="cont_msg" placeholder="Message"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="g-recaptcha"
                      data-sitekey="Site_key"
                      data-callback="sendMail"
                      data-size="invisible">
                    </div>
                    <p>
                        This site is protected by reCAPTCHA and the Google
                        <a href="https://policies.google.com/privacy">Privacy Policy</a> and
                        <a href="https://policies.google.com/terms">Terms of Service</a> apply.
                    </p>
                    <a class="btn btn-default btn-lg contact_btn" id="contact_form_submit">Send</a>
                    <a class="btn btn-default btn-lg contact_btn" id="loading" style="display: none;">Sending...</a>

                    <p class="input_error"id="contact_err" style="color:#FF6666;position:absolute;font-size:14px;font-weight: 500;letter-spacing: 0.5px;bottom: 10px;left: 0;right: 0;">
                </p>
                </div>
        </form>
        
        
<script type="text/javascript">
    $(document).ready(function () {
    $("#contact_form_submit").on("click", function () {
    var co_name = $("#cont_name").val();
    var co_email = $("#cont_email").val();
    var co_phone = $("#cont_phone").val();
    var co_company = $("#cont_company").val();
    var co_message = $("#cont_msg").val();
    if (
      co_name != "" &&
      co_email != "" &&
      co_phone != "" &&
      co_company != "" &&
      co_message != ""
    ) {
      grecaptcha.execute();
    } else {
      $("#loading").hide();
      $("#contact_form_submit").show();
      $("#contact_err").html("Please fill all the fields !!!!");
    }
  });
    })   
</script>

</body>
</html>

4

1 回答 1

0

Captcha 需要两件事才能使其正常工作

  1. Javascript 中的客户端代码,你已经通过正确的外观完成了。

  2. 服务器端代码,如果不实现服务器端代码,验证码是无用的,因为机器人只会直接发布到您的 PHP 表单,而无需输入验证码!根据您的评论,这是您缺少的部分。

https://developers.google.com/recaptcha/intro

请注意,它说您需要执行 2 个步骤,1 个客户端,2 个验证响应:

https://developers.google.com/recaptcha/docs/verify

谷歌返回加载结果,但这似乎是最新的文章

https://phppot.com/php/php-contact-form-with-google-recaptcha/

谷歌实现谷歌验证码 php

于 2021-05-20T07:55:13.763 回答