Resizing Recaptcha

RecaptchaGoogle has made it really easy to add their Recaptcha to any form, but since it’s an iframe, sizing it to fit any space becomes an issue. This is especially difficult in a sidebar, because the Recaptcha will easily stretch past anything under 300px in width. Because of the iframe, writing CSS rules for any of the internal elements is useless, so the only chance is to put it in a container and style that. Fortunately, Gravity Forms already provides a container around the iframe, in the form of a div with the class “ginput_container” and “ginput_recaptcha”. Most form plugins will provide the same container div around the iframe.

To the “ginput_recaptcha” class, I’ll add these rules:

transform: scale(0.77);

-webkit-transform: scale(0.77);

transform-origin: 0 0;

-webkit-transform-origin: 0 0;

Captcha corrected

77% seems to be the best resize, although you can scale it to whatever size you need. In this case, 77 was the perfect number, as it completely lined up with the other inputs in the form.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.