Multipurpose Website Templates. How to add reCaptcha to the contact form (based on Intense)

Our Support team is ready to present you a new tutorial on how to manage Google reCAPTCHA for spam protection.

In order to set up Google reCAPTCHA, you should do the following:

1. Register your domain at Google reCaptcha website and get a pair of API keys (a pair of keys consists of site key and secret).

   

2. Specify your API keys in bat/reCaptcha.php file in $siteKey and $secret variables at the beginning of the file:

   

3. Paste this section to html and specify your site key in data-attribute data-sitekey=””. The basic markup of reCAPTCHA looks the following way:

   
   			<div class="form-group">
   			<div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
   			</div>
   		

   

4. Google reCAPTCHA supports the following settings:

   1. Changing size;

      To change widget size, specify in data-attribute data-size one of the following size values:

      • compact;

      • normal (default).

   2. The sample code looks the following way:

      
      					<div class="form-group">
      					<div id="captcha1"
      					data-sitekey="You site key here"
      					data-size="compact"
      					class="recaptcha"></div>
      					</div>
      					

   1. Changing color scheme.

      To change widget color scheme, specify in the data-attribute data-theme one of the following variants:

      • dark;

      • light (default).

   2. The sample code looks the following way:

      
      					<div class="form-group">
      					<div id="captcha1"
      					data-sitekey="You site key here"
      					data-theme="dark"
      					class="recaptcha"></div>
      					</div>
      					

5. Save settings and refresh the page on your website to see the changes.

   

   Google reCAPTCHA have been successfully added.

You can find more detailed instructions at Google reCAPTCHA official website.

Feel free to check the detailed video tutorial below:

Browse the brand new HTML5 Website Templates and learn more about HTML5 functionality.