Google invisible reCaptcha is only working in Incognito mode
Question
I have a Google reCAPTCHA setup on my contact form in my website.
and i'm trying to test it in both localhost and server as well but recaptcha is only working in incognito mode.
without capturing reCAPTCHA mails are sending. Here my problem is grecaptcha.execute(); is not executing, Please suggest solution for this.
$("#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>
1 answers
solution1
0 2021-05-20 07:55:13
Captcha needs two things to make it work properly
Client side code in Javascript, this you have done by looks of it properly.
Server side code, without implementing server side code the captcha is useless as bots will just post straight to your PHP form without having to enter a captcha. This is your missing piece based on your comments.
See
https://developers.google.com/recaptcha/intro
Notice it says you need to do 2 steps, 1 client side, 2 verify the response:
https://developers.google.com/recaptcha/docs/verify
Google returns loads results but this seems to be an up to date article
https://phppot.com/php/php-contact-form-with-google-recaptcha/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.