Recaptcha gem with custom theme using bootstrap form controls

Recently i have used recaptcha gem in one of my rails application with custom bootstrap form controls. Here i am sharing my codes, so that someone can get help from this. Thanks to the creator of this awesome jsfiddle, because I have followed this to create the custom recaptcha bootstrap theme.

First of all checkout installation documentation of recaptcha gem here and add it to your application. 

Now check my gist below. app/views/shared/_recaptcha.html.haml file is the main file which generates the recaptcha with custom bootstrap theme.

	/ /app/views/shared/_recaptcha.html.haml
	#recaptcha_widget{:style => "display:none"}
	.control-group
	%label.control-label reCAPTCHA
	.controls
	%a#recaptcha_image.thumbnail{:href => "#"}
	%p.help-block
	To confirm that you are not a bot/computer please fill out the captcha below.
	.recaptcha_only_if_incorrect_sol{:style => "color:red"} Incorrect please try again
	.control-group
	%label.recaptcha_only_if_image.control-label * Enter the words above:
	%label.recaptcha_only_if_audio.control-label * Enter the numbers you hear:
	.controls
	.input-append
	%input#recaptcha_response_field.input-recaptcha{:name => "recaptcha_response_field", :type => "text"}/
	%a.btn{:href => "javascript:Recaptcha.reload()"}
	%i.icon-refresh
	%a.btn.recaptcha_only_if_image{:href => "javascript:Recaptcha.switch_type('audio')"}
	%i.icon-headphones{:title => "Get an audio CAPTCHA"}
	%a.btn.recaptcha_only_if_audio{:href => "javascript:Recaptcha.switch_type('image')"}
	%i.icon-picture{:title => "Get an image CAPTCHA"}
	%a.btn{:href => "javascript:Recaptcha.showhelp()"}
	%i.icon-question-sign
	= recaptcha_tags :display => {:theme => 'custom', :custom_theme_widget => 'recaptcha_widget'}

view raw _recaptcha.html.haml hosted with ❤ by GitHub

	/ app/views/posts/_form.html.haml
	= simple_form_for(@post) do |f|
	= f.error_notification
	.form-inputs
	= f.input :title
	= f.input :content, :as => :text
	= render 'shared/recaptcha'
	.form-actions
	= f.button :submit, 'Submit', :class => 'btn-primary'
	= link_to t('.cancel', :default => t("helpers.links.cancel")), :back, :class => 'btn'

view raw _form.html.haml hosted with ❤ by GitHub

	# app/controllers/posts_controller.rb
	class PostsController < ApplicationController
	# GET /posts/new
	# GET /posts/new.json
	def new
	@posts = Post.new
	respond_to do |format|
	format.html # new.html.erb
	format.json { render json: @post }
	end
	end
	# POST /posts
	# POST /posts.json
	def create
	@post = Post.new(params[:post])
	respond_to do |format|
	if verify_recaptcha
	if @post.save
	format.html { redirect_to @post, notice: "Your post was successfully submitted" }
	format.json { render json: @post, status: :created, location: @post }
	else
	format.html { render action: "new" }
	format.json { render json: @post.errors, status: :unprocessable_entity }
	end
	else
	flash[:recaptcha_error] = 'Captcha is incorrect please try again.'
	format.html { render action: "new" }
	format.json { render json: @post.errors, status: :unprocessable_entity }
	end
	end
	end
	end

view raw posts_controller.rb hosted with ❤ by GitHub

Here is the output of recaptcha custom theme using bootstrap form controls. Enjoy!