Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add reCaptcha on a html web form

I have all my code set up exactly how Google documents the API but it keeps returning a boolean of false, is there something wrong that I have done?

<?php
  if(isset($_POST['sendEmail'])) {
    $privateKey = "__my_secret_key__";
    $response = $_POST['g-recaptcha-response'];
    $remoteip = $_SERVER['REMOTE_ADDR'];
    $url = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$privateKey&response=$response&remoteip=$remoteip");

    $result = json_decode($url, true);

    if($result->success == true) {
      $name = strip_tags(trim($_POST['name_1']));
      $surname = strip_tags(trim($_POST['surname_1']));
      $userArray = [
        'name' => $name,
        'surname' => $surname,
      ];
      var_dump($userArray);

    } else {
      echo "reCaptcha failed, please try again...";
    }
  }

?>

and my HTML form with the JavaScript link copied from Google and the data-sitekey I received:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Recaptcha Example</title>
</head>

<body>
<br>
<br>
<form action="" method="post">
  <div class="form-row">
  <input name="name_1" placeholder="Your name" type="text">
  </div>

  <br>

  <div class="form-row">
  <input name="surname_1" placeholder="Your surname" type="text">
  </div>

  <br>

  <div class="form-row">
    <div class="g-recaptcha" data-sitekey="__Site_key__"></div>
  </div>

  <br>

  <input name="sendEmail" type="submit" value="Call me back">

  <br>

  <h4 id="response"></h4>
  </form>

    <script src='https://www.google.com/recaptcha/api.js'></script>
  </body>
</html>
like image 262
Gerald Mathabela Avatar asked Feb 16 '17 10:02

Gerald Mathabela


People also ask

How do I add reCAPTCHA v3 in HTML?

Register reCAPTCHA v3 keys You need to first register your website and get the keys here – https://www.google.com/recaptcha/admin/create. Add a label, select reCAPTCHA v3, type your domain name(s) and submit. This will generate a “site key” and a “secret key”. Copy both and keep them safe.


1 Answers

Add this script:

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>

function get_action(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
        return false;
    }
    else
    {
         document.getElementById('captcha').innerHTML="Captcha completed";
        return true; 
    }
}

</script>

and add this HTML before your submit button:

<div class="g-recaptcha" id="rcaptcha"  data-sitekey="site key"></div>
<span id="captcha" style="color:red" /></span> <!-- this will show captcha errors -->
like image 114
Raman Avatar answered Oct 04 '22 02:10

Raman