HOW TO RESIZE THE GOOGLE RECAPTCHA IN CALDERA FORM

by Jan 28, 2020Projects, Tutorials0 comments

Some days ago I needed to insert the reCAPTCHA in a form particularly strict. Unfortunately the code released by Google is not responsive and I found this situation:

HOW TO RESIZE THE GOOGLE RECAPTCHA IN CALDERA FORM

HOW TO RESIZE THE GOOGLE RECAPTCHA IN CALDERA FORM

I though: “No problem, I’ll fix it in a couple of minutes!”
Needless to say, I was wrong.

The situation was this: I had a form created with Calder Form, I inserted the code generated by Google but the Google reCAPTCHA overlapping the screen.

I tried several css code but no one worked. After a couple of hours I thought to a potential solution. My Idea was about the transform:scale(value) and transform-origin: (value).

With this technique, simply adding 2 lines of CSS I was able to transform the entire scale of the reCAPTCHA.

I wrote this code:

transform:scale(0.62)!important;
-webkit-transform:scale(0.62)!important;

I added also !important becasue I worked on the CSS of Divi.

Then I added a class to my form to be sure to identificate exactly the div.

It was working.

But the reCAPTCHA was not aligned to left, so I added the following code too:

transform-origin: 0 0;
-webkit-transform-origin: 0 0;

And the magic appeared!
The reCAPTCHA was perfect.

 

 

To recap

 

 

  • Create a custom class to your reCAPTCHA

 

  • Copy and Paste this code in you CSS sheet
.customclass {
transform:scale(0.62)!important;
-webkit-transform:scale(0.62)!important; transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

At the end, lean your back against the back of the chair and enjoy the show.

That’s all, folks.