Recaptcha html form code

How to use Recaptcha Html form code

We will need some input tags to use the Recaptcha Html form code. Must have an account with Google Recaptcha. From where we will need Recaptcha Site Key and Secret Key. If you have all these, then you can work with Recaptcha Html form code. If you do not have a Recaptcha account, then visit this site https://www.google.com/recaptcha/about/ from now on v3 Admin Clicking on the console will bring up new content. Now put the label on your project name. Now in Recaptcha type, you can give either v2 or v3. Put a domain name in the form below, you can name your project if you want. Accept the reCAPTCHA Terms of Service. Don’t forget to tick the name but click submit again.

Why use reCAPTCHA v2

Using reCAPTCHA v2 becomes a bit of a problem for the user. Many times reCAPTCHA has to be filled again and again due to a weak net. Many times the user will not understand which image to click on. To get rid of this problem, Google developer reCAPTCHA v3 brings more sophistication to the bar.

Why use reCAPTCHA v3

reCAPTCHA v3 takes any form. Google itself says that the website is running a gospel and people are running it. Everyone has started using reCAPTCHA v3 so that they don’t have to face the same hassle as using reCAPTCHA v2.

what is  Recaptcha?

Recaptcha helps to protect the website from abuse. In short, you have to call it ReCaptcha. The current means that there are two types of ReCaptcha, ReCaptcha v2 and v3.

Currently, more than 90% of websites have reCAPTCHA added. If you do not add reCAPTCHA Google search console will get an error as a result of which Google will not be able to index your site. Adding reCAPTCHA prevents the user from inserting any type of spam text. And if you haven’t seen your website reCAPTCHA yet, then add it. To learn more about reCAPTCHA visit https://developers.google.com/recaptcha
How do I add Google reCAPTCHA to the contact form in HTML?

For this, you need to follow the code below. If you want you can copy and paste the codes and you can add them to your website oh reCAPTCHA. It is very easy to use. Now copy the code and add Google reCAPTCHA to your site.

<?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...";
    }
  }

?>

<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>
<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>

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

Leave a Reply

Your email address will not be published.

Education Template