Submit Button Sends Email Even If Recaptcha Has Been Done

Im in the process of adding the reCaptcha from google to my form. The problem is that even though I have followed the instructions from google. I can still press the Submit button

Solution 1:

So we set up the form and make sure your library is included, I prevent the submit button from being clicked while the recaptcha has not been completed and show a tooltip to notify the user it is needed to continue. Then enable it when it has been complete using the callback methods.

login.php

<divclass="formContainer"><scriptsrc='https://www.google.com/recaptcha/api.js'></script><formaction="loginHandler.php"method="post"name="login_form"id="loginForm"class="loginForm"><h2>Login</h2><p><inputtype="text"requiredplaceholder="Email"name="email"></p><p><inputtype="password"requiredplaceholder="Password"name="password"id="password"></p><divclass="g-recaptcha"data-callback="captcha_filled"data-expired-callback="captcha_expired"data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div><div><pclass="show-tt"data-toggle="tooltip"title="Complete the reCAPTCHA to login."data-placement="bottom"><inputid="submitLogin"type="submit"value="Login"></p></div></form></div><script>//prevent submit and show tooltip until captch is complete.var submit = false;
    $("#submitLogin").prop('disabled', true);

    functioncaptcha_filled() {
        submit = true;
        $("#submitLogin").prop('disabled', false);
        $(".show-tt").tooltip('destroy');
    }
    functioncaptcha_expired() {
        submit = false;
        $("#submitLogin").prop('disabled', true);
        showTooltip();
    }
    functionshowTooltip () {
        $(".show-tt").tooltip('show');
    }
</script>

Now we post to loginHandler.php, or wherever your form submits too and then there we will assign your secret key and then verify the request with google.

loginHandler.php

$secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

if (isset($_POST["g-recaptcha-response"])) {

    $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret) .
            '&response=' . urlencode($_POST['g-recaptcha-response']) . '&remoteip=' . urlencode($_SERVER['REMOTE_ADDR']);
    //ip address is optional$result = json_decode(file_get_contents($url), true);

    if ($result != null && $result['success'] === true) {

        //success, handle login/submit data or whatever

    } else {
        //response is bad, handle the error
        header('Location: login.php?error=4');
    }
} else {
    //captcha response is not set, handle error
    header('Location: login.php?error=5');
}