How To Build Spam Free Bootstrap Contact Form With Captcha

How To Build Spam Free Bootstrap Contact Form With Captcha

In this article, I will show you how to add google recaptcha to your bootstrap form & this will also prevent form spam entries

We will use javascript to validate form. Form will not submit untill user fill all fields with captcha checkbox

Form preview:

For Demo & Source Code Scroll down

Lets start by creating three files:

• 1. Index.html - for our markup
• 3. contact.js - for our url manupulation

Before creating files, You will need to register your website on Google ReCaptcha’s website first.

After successful registration, You will get 2 unique keys such as Site key & Secret key. After Getting all keys you need to use those keys to add Recaptcha into form as well as you will need to add api script which you will get from same.

In order to integrate Recaptcha into your HTML/Bootstrap form you need to follow these points:

• 1. Firstly, you need to include <div class="g-recaptcha" data-sitekey="site key"></div> in your form (replace the site key with your own key)
• 2. Then include, the Google ReCaptcha api to initialize ReCaptcha on your form — <script src='https://www.google.com/recaptcha/api.js'></script>
• 3. I also use data-callback and data-expired-callback attributes on the g-recaptcha div — these are optional and I will use them to make ReCaptcha cooperate with the validator

Here is the structure of Bootstrap form where you will need to place Recaptcha

<div class="form-group">
<div class="g-recaptcha" data-sitekey="6Les_LUUAAAAAOwAecAV2bvGOrePoZVQPLDOJcs_" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
<input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
<div class="help-block with-errors"></div>
</div>

At last, to validate form to ensure that form submit only when user fill all fields with Recaptch you need to manupulate it through JavaScript as i did through contact.js by using bootstrap validator & then handle JS callbacks from ReCaptcha.

Follow all steps and you are done. Also, you can Download Source code or View Demo. Link given below