Home » Best Way to Resize Google reCAPTCHA
Last updated on December 24, 2020 by
Do you feel Google reCAPTCHA is not responsive? Do you want to resize the Google reCAPTCHA then you are at the right place.
reCAPTCHA is a free service from Google that helps to protect the websites from spam and abuse. A “CAPTCHA” is a test to distinguish humans and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure it out.
Normally, we are using the Google reCAPTCHA in Contact Form, Signup Form, Login Form, Member Registration Form, and many other areas. Let’s see different ways to do it. Are you ready? Let’s go then.
01 Via Inline Style
The easiest way of resizing Google recapture is by adding inline style. Inline styles are the CSS styles that applied directly to the HTML element by using the style attribute. Check the below example.
<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>
02 Via Internal Style
The second way, you can put style for reCAPTCHA into the page between <style> and </style>. An internal stylesheet is a section on an HTML page that contains style definitions. Internal stylesheets are defined by using the <style> tag within the <head> area of the document. Check the following example.
<style type="text/css">
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
03 Via an External Style
An external stylesheet is a file containing only CSS syntax (no document content or elements) and should carry a MIME type of "text/css". The style information is not explicitly tied directly to the document’s elements, so selector syntax is used to specify what styles attach to which portions of the document tree.
Create a separate file and give a name like style.css and add this file link in between your element in your page like <link href="style.css" type="text/css">. Here is an example.
style.css
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
04 For Mobile Devices
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good & be easy to use in all devices.
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it looks good on any screen. You can consume the following example with any of the above stylesheet types.
<style type="text/css">
@media screen and (max-height: 767px){
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
</style>
That’s it for now. We hope this article helped you to learn the different ways to resize the Google reCAPTCHA for your website.
Additionally, read our guide:
- How to Select Data Between Two Dates in MySQL
- Error After php artisan config:cache In Laravel
- Specified Key Was Too Long Error In Laravel
- AJAX PHP Post Request With Example
- How To Use The Laravel Soft Delete
- How To Add Laravel Next Prev Pagination
- cURL error 60: SSL certificate problem: unable to get local issuer certificate
- Difference Between Factory And Seeders In Laravel
- Laravel: Increase Quantity If Product Already Exists In Cart
- How To Calculate Age From Birthdate
- How to Convert Base64 to Image in PHP
- Check If A String Contains A Specific Word In PHP
- Dynamically Populate A Select Field’s Choices In ACF
- How To Find Duplicate Records in Database
- Difference between del, remove and pop on lists
- How To Solve NPM Start Script Missing Error
- How To Declare A Global Variable in Vue
- How To Merge Objects In Vue
If you still having an issue or any question then please tell me via comment. Don’t be too selfish, please like, share, comment and subscribe.
Thanks for reading this post 🙂
Last updated on September 24th, 2022 at 04:53 am
We will guide you edit CSS (re-style) of Google reCAPTCHA on your website. You can change position, language, resize of Google reCAPTCHA v2, v3 badge with some basic CSS codes.
When you install and use Google reCAPTCHA on your website, it may appears overlapped other page elements (submit button, back to top button…). So you may need to change position, language, background, color, responsive, resize…(re-style) of reCAPTCHA to fit with your theme.
Here are some simple CSS codes to help you re-style Google reCAPTHCA v2 and v3 also. You should put these CSS codes in your child theme’s stylesheets.
- Explore more: How To Remove Google reCAPTCHA Logo from Contact Form 7 in WordPress (Hide reCAPTCHA badge)
1. Change position, resize background, color of Google reCAPTCHA v3 badge
If you’re using Google reCAPTCHA v3 on your website then you can try with some CSS codes below to re-style reCAPTCHA badge:
– Change position of Google reCAPTCHA v3 badge by using CSS codes (this may help your Google reCAPTCHA not covered up back to top or share button):
.grecaptcha-badge {
bottom: 100px !important;
}
– Change background, color of reCAPTCHA logo with this snippet (for example: change it to black color, background – #000):
.rc-anchor-light {
background: #000 !important;
color: #000 !important; }
– Using this CSS to resize Google reCAPTCHA badge:
.grecaptcha-badge {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
If it’s not working for you then you can try this code below:
.grecaptcha-badge,.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
– Responsive your Google reCAPTCHA badge:
@media screen and (max-width: 991px){
.grecaptcha-badge {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
2. Change background, color, resize of Google reCAPTCHA v2
You can use some CSS to edit Google reCAPTCHA v2 on your website:
– Change background, color of Google reCAPTCHA v2 widget with CSS codes:
.rc-anchor-light {
background: #fff!important;
color: #fff!important; }
or
.rc-anchor-normal{
background: #000 !important;
color: #000 !important; }
– Resize the Google reCAPTCHA v2 widget by using this snippet:
.rc-anchor-light {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
– Responsive your Google reCAPTCHA v2:
@media only screen and (min-width: 768px) {
.rc-anchor-light {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
3. Bonus Tip: Change Google reCAPTCHA language
– With Google reCAPTCHA v2 version: you need to specify the parameter ?hl= when adding/loading the Google JavaScript API to change reCAPTCHA language (for example: changing to French language):
<script src=’https://www.google.com/recaptcha/api.js?hl=fr’></script>
– With Google reCAPTCHA v3 version: you can use the script like this:
<script src=’https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key&lang=fr’></script>
– Moreover, you can use a snippet in functions.php file (from directory: /wp-content/themes/your-theme/ ) to change language for Google reCAPTCHA:
add_action( 'wpcf7_enqueue_scripts', 'language_recaptcha_enqueue_scripts', 11 );
function language_recaptcha_enqueue_scripts() {
wp_deregister_script( 'google-recaptcha' );
$url = 'https://www.google.com/recaptcha/api.js';
$url = add_query_arg( array(
'onload' => 'recaptchaCallback',
'render' => 'explicit',
'hl' => 'fr-CA' ), $url );
wp_register_script( 'google-recaptcha', $url, array(), '2.0', true );
Notice: All elements, property of CSS above that’s just for your reference. You can change them by yourself (only using our CSS class selector).
If you need some different CSS code for your Google reCAPTCHA please let us know in the comment form below
Some day ago a client wanted to add Google noCAPTCHA reCAPTCHA to the gravity form. all looks fine but when i was visiting the site on mobile devices the Google reCAPTCHA overlapping the screen.
Its not looking good some how i need to fix it and resize the Google reCAPTCHA. There are not enough resources to control the Google noCAPTCHA reCAPTCHA, but it seemed no matter what I tried to target with CSS or a combination of CSS and javascript, nothing seemed to change the look of the captcha. So rather than trying to change what was generated by Google’s externally-loaded javascript and css files, I decided to change what I felt I could change – the div you place on your site with the g-recaptcha class that loads up the reCAPTCHA.
Then i was tried several css code but no one working. then i was thing about the transform:scale(value) and transform-origin: (value) . By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:
Much nicer!
How and where you need to add the css, simple inspect your browser by pressing ctrl+shift+I (For windows) or right click on mouse and click on Inspect and then find the class=”some-class” data-theme=”light/dark” data-sitekey=”XXXXXXXXXXXXX” just copy the class or id and use the css
transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0;
the -webkit- code for browser supporting code. you should adjust the transform:scale(0.77); to any point. Make sure you will keep same point to -webkit-transform:scale(0.77); here also. and keep as it the transform-origin:0 0; -webkit-transform-origin:0 0;
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.
To scale the images popup, you can use this code, either by inserting it as a separate style embed (like below) or simply adding it to your CSS:
<style>
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scal(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
Media queries:
<style>
@media screen and (max-width: 575px){
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
</style>
If you found this useful, please let me know in the comments below.