HTML 5 CSS 3 reCaptcha V1

Out of date???

Styled for HTML 5, CSS 3, bootstrap 3 responsiveness.

Update for V2 No-CAPTCHA reCAPTCHA , not responsive. Fix

Could not stand the normal styles of reCaptcha in my dark website so I found a JSFiddle to try and I came up with a reCaptcha styled with bootstrap styling.

Created with <div> instead of tables and styled with my own styling match bootstrap styling, not Googles.

Styling of the inputs  buttons glyphicon's, for bootstrap 2 and bootstrap 3. The above image shows input-append and btn-group to group the buttons at the end of the input text.

The Glyphicon's code.

The below code is for orchard 1.7.2 but I do not think it has changed since 1.6.

You can remove the css  and add it to your main style sheet as bootstrap.min.css.

A responsive style sheet for the HTML5 reCaptcha Bootstrap 2

The CSS code.

Replace your Parts.ReCaptcha.Fields.cshtml in Orchard /Modules/Orchard.AntiSpam/Views/EditorTemplates with the code below

The Parts.ReCaptcha.Fields.cshtml code.

Addition to the above: 1/18/2014

I wanted reCaptcha to look more part of the form instead of added at the bottom, so a quick fix is to hide the Post Comments buttons on your PJS.Bootstrap Views\Editor Templates\Parts.Comment.cshtml

You can hide it by adding a class or replacing class="btn btn-primary", with class="hidden",  to the Post Comment button

<button type="submit" class="hidden">Post Comment</button>

I added an input at the bottom of the Orchard Anti.Spam Parts.ReCaptcha.Fields.cshtml form

 <input type="submit" class="btn btn-sm btn-default" value="Submit Input">

This gives me the look of one form not a addition at the bottom.

Fix for Orchard Anti.Spam Module per issue fix to the Anti-spam module which moves spam filter part validation from the driver to the handler to ensure comment tokens are evaluated at the time the spam check runs at:

Adding reCaptcha to my oForms Email page.

The oForms addition Code.

Updated On: Sun Dec 28 2014 07:32:24 GMT-0600 (Central Standard Time)

V2 of No-CAPTCHA reCAPTCHA which is in a iframe fixed at 320px! Fix by scale.

Added V2 reCAPTCHA to Orchard  module Anti.Spam Views/Editor Templates/Parts.ReCaptcha.Fields.cshtml.

V2 reCAPTCHA for

V2 is really simple to implement had to fix Google's example code, it was missing a semicolon causing loading issues, only sometime fully loading.

V2 Responsive design fix.

taken from:

<div class="g-recaptcha" data-theme="dark" data-sitekey="XXXXXXXXXXXXX"
 style="transform:scale(0.77);transform-origin:0 0">
You can adjust the scale to whatever looks best for your particular layout. The transform-origin property is added because when you use the transform property, it doesn’t change the actual space taken up by the element. So, in order to have the reCAPTCHA align to the top left, I set it so the transformation would originate from the top left-hand corner (rather than from the center, which is the default). I used “0 0″, but “left top” would have had the same effect.

That’s just a basic way to show how you can quickly change the size of the reCAPTCHA with inline styling. For something nicer, I’d suggest assigning a new class and leaving it at full size for anything above mobile, then using a media query to change it to the smaller size. Even better would be to use a transition effect so it visually “shrinks down” when you go to mobile.
In my comments Form.

No Comments

Comments are Moderated, from, "(Spam-bots)", before they are posted.