How to setup the google reCAPTCHA

STEP :-1

Create reCAPTCHA API keys from recaptcha admin.

STEP :-2 [Client Side]

Add the recaptcha api js and render explicit.

Put below code in bottom of page:

function init_google_captcha() {
	if( jQuery('#home-contact-captcha').length>0 ) {
		captcha_home_contact = grecaptcha.render('home-contact-captcha',{
		 'sitekey' : '6LeJTT8UAAAAABjGeM6FpNutjh9_4t5sTixpnpdq',
		 'theme' : 'light'


STEP :-3 [Server Side]

While submit the form you got the post variable with name “g-recaptcha-response”.

For verify the response use the below API_URL.

You have to add the secret, response, remoteip vars with URL and post the data.

-Sample snippet


if( $this->input->post('g-recaptcha-response') ) {
	$recaptcha_response = $this->input->post('g-recaptcha-response');
	$response = file_get_contents("" . $reCAPTCHA_secret_key . "&response=" . $recaptcha_response . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
	$response = json_decode($response);
	if ( isset($response->success) && $response->success == 1 ) {
		//validate successfully.

Ref :


Best Web Development Tutorials For Beginners


W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.


Free tutorials and reference manuals with examples for Kubernetes, Spring JDBC, Java Concurrency, Gerrit, Spring AOP, Spring MVC, Apache Solr, Excel Power View, Sencha Touch, Tex Commands, Agile Testing, Apache Tajo, C++ Library, MariaDB, SAP QM, SAP SOLMAN, SAP SCM, MS Access, KoaJS, OAuth2.0, Scrapy, SAP CCA, SAP PM, SAPUI5, Cognos, Internet of Things, Rural Marketing, Trampolining, Golf, Angular2, Framework7, Arduino, CherryPy, Firebase, SAP C4C, SAP Dashboard, SAP PI, ExpressJS, Design Thinking, Internet Security, PyGTK, Apache Drill, Excel Charts, Elastic Search, Computer Security, Extreme Programming, Behavior Driven Development, Conversion Rate Optimization, SAP Basis, Business Law, Kanban, Erlang, SAP Payroll, ASP.Net WP, PouchDB, MFC, SAP HR, Yii, Clojure, Aurelia, CoffeeScript, CPanel, Laravel, SAP Webi, MS SQL Server, pinterest, Indian Polity, Windows10, Teradata

CSS Tricks

Tips, Tricks, and Techniques on using Cascading Style Sheets.


Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.


GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code. It offers all of the distributed version control and source code management functionality of Git as well as adding its own features.

Stack Overflow

Stack Overflow is the largest online community for programmers to learn, share their knowledge, and advance their careers.

Simple template for create HTML5 project

Here is sample template for starting the HTML5 Project.

File Structure :

  • ProjectName
    • assets
      • css
        • reset.css
        • responsive.css
        • style.css
      • fonts
      • images
      • js
        • jquery-1.11.3.min.js
        • modernizr-3.2.0.base.js
        • prefixfree.min.js
    • index.html


<!doctype html>

<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->


	<meta charset="utf-8">

		HTML5 Reset:
		Free to use

	<!-- Always force latest IE rendering engine (even in intranet) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- Important stuff for SEO, don't neglect. (And don't dupicate values across your site!) -->
	<meta name="author" content="" />
	<meta name="description" content="" />

	<!-- Don't forget to set your site up: -->
	<meta name="google-site-verification" content="" />

	<!-- Who owns the content of this site? -->
	<meta name="Copyright" content="" />

	<!--  Mobile Viewport &
	device-width : Occupy full width of the screen in its current orientation
	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width (wrong for most sites)
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Use Iconifyer to generate all the favicons and touch icons you need: -->
	<link rel="shortcut icon" href="favicon.ico" />

	<!-- concatenate and minify for production -->
	<link rel="stylesheet" href="assets/css/reset.css" />
	<link rel="stylesheet" href="assets/css/style.css" />
	<!-- media query -->
	<link rel="stylesheet" href="assets/css/responsive.css" />

	<!-- Lea Verou's prefixfree (, lets you use un-prefixed properties in your CSS files -->
	<script src="assets/js/libs/prefixfree.min.js"></script>

	<!-- This is a minimized, base version of Modernizr. (
		  You will need to create new builds to get the detects you need. -->
	<script src="assets/js/libs/modernizr-3.2.0.base.js"></script>

	<!-- Twitter: see for details -->
	<meta name="twitter:card" content="">
	<meta name="twitter:site" content="">
	<meta name="twitter:title" content="">
	<meta name="twitter:description" content="">
	<meta name="twitter:url" content="">
	<!-- Facebook (and some others) use the Open Graph protocol: see for details -->
	<meta property="og:title" content="" />
	<meta property="og:description" content="" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />



<div class="wrapper"><!-- not needed? up to you: -->


		<h1><a href="/">Page Title</a></h1>


				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>




		<h1>Article Header</h1>

		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>

		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>



		<h2>Sidebar Content</h2>



		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>



<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script type="text/javascript" src="assets/js/libs/jquery-1.11.3.min.js"></script>

<!-- this is where we put our custom functions -->
<!-- don't forget to concatenate and minify for production -->
<script type="text/javascript" src="assets/js/functions.js"></script>
<script type="text/javascript">

<!-- Asynchronous google analytics; this is the official snippet.
	 Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  ga('create', 'UA-XXXXXX-XX', 'auto');
  ga('send', 'pageview');



Reference : HTML5-Reset

Blog at

Up ↑