ReCaptcha Centring In Contact Form 7

How To Centre The ReCaptcha Form Element

 
ReCaptcha gif
 
I recently built a site for a client and it had a Contact Form on it using the superb ContactForm7 Plugin. In this particular instance the content was to be centred on the page but for some reason I couldn’t get the ReCaptcha Form Element to centre align.

I did all of the really obvious stuff that I could with CSS and reached an impasse; I turned to the WordPress.org Support Forum for help (via Google!)

After some searching the result appeared to me! Despite the last poster saying that this solution didn’t work for them I tried it anyway and it work perfectly. So, here it is (with appropriate attribution to the original provider of the solution):


.captcha
{ text-align: center; }

.g-recaptcha
{ display: inline-block; }

 
Original Poster
Original Post
 
That’s it. Nothing fancy, nothing crazy. No leveraging arcane CSS to get the job done, just this four line chunk of code and it’s centred perfectly.

Hope this helps if you’re struggling.
 
 

Addendum: After being contacted by someone via the Facebook page for iKarra.com I realised that I hadn’t mentioned where to put this code to make it work! So…

Style.css

You’ll need to add this code into your Theme’s style.css file. If you’re using a Theme and haven’t created a Child Theme then I’d recommend installing a CSS Plugin to manage any changes you make to your Theme and adding this code into that. This will help to prevent overwriting any valuable changes you make.

However, if you’re using a Child Theme (and I highly recommend that you do!) you can safely add this code straight into your Child Theme’s style.css file.

Once you’ve done that, head back over to the site, refresh the page with the Contact Form on it and see if the changes have taken effect. If they haven’t, clear your Browser’s Cache and refer the page again. (That should really fix it if there’s a problem but if for some reason it hasn’t then your Theme may have some coding that’s stopping it from taking effect. Contact your Theme’s developer for more support).
 

ReCaptcha Centring In Contact Form 7