Adding reCAPTCHA to forms using Google’s reCAPTCHA. reCAPTCHA is mainly used to protect a website from spam and automated abuses.
Steps for Adding reCAPTCHA to forms
- 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.
- In the next step, a regeneration’s forms appears.
- Enter an appropriate label for your reCAPTCHA.
- Choose the type of reCAPTCHA you want. For right choice refer to Choose a type.
- After successful registration, a window will appear containing details about client-side and server-side integration.
- Note: do not share you private key.
- 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>