Adding reCAPTCHA to forms

      No Comments on Adding reCAPTCHA to forms

Adding reCAPTCHA to forms using Google’s reCAPTCHA. reCAPTCHA is mainly used to protect a website from spam and automated abuses.

DEMO
adding recaptcha to forms

Steps for Adding reCAPTCHA to forms

  1. To start using reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and secret key. The site key is used to invoke reCAPTCHA service on a web site. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user’s response. The secret key needs to be kept safe for security purposes.
  2. In the next step, a regeneration’s forms appears.Adding recaptcha to forms
    • Enter an appropriate label for your reCAPTCHA.
    • Choose the type of reCAPTCHA you want. For right choice refer to Choose a type.
  3. After successful registration, a window will appear containing details about client-side and server-side integration.

    Adding recaptcha to forms
  4. Note: do not share you private key.
  5. Now create a HTML form and insert the client side code as indicated. You need to include the script files in the head tag and the code for reCAPTCHA div at the place where you want the reCAPTCHA to appear.
    <html>
      <head>
       <!-- script file -->
       <script src='https://www.google.com/recaptcha/api.js'></script>
      </head>
      <body>
        <form action="#">
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" placeholder="Enter email" name="email">
          </div>
          <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" placeholder="Enter password" name="pwd">
          </div>
          <div class="checkbox">
           <label><input type="checkbox" name="remember"> Remember me</label>
           </div>
          <!-- recaptcha code--- >
          <div class="g-recaptcha" data-sitekey="---your key value---"></div>
          <button type="submit" class="btn btn-default">Submit</button>
       </form>
      </body>
    </html>
    

Summary
Adding recaptcha to forms
Article Name
Adding recaptcha to forms
Description
Adding reCAPTCHA to forms using Google's reCAPTCHA. reCAPTCHA is mainly used to protect a website from spam and automated abuses.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *