web-dev-qa-db-fra.com

Modifier la nouvelle largeur de Google Recaptcha (v2)

Nous venons tout juste de commencer à mettre en œuvre le nouveau recaptcha de Google comme indiqué dans la liste https://www.google.com/recaptcha/intro/index.html

Cependant, la nouvelle méthode semble être contenue dans un iFrame plutôt que intégrée dans la page, ce qui rend plus difficile l'application de CSS.

Cependant, notre formulaire ayant une largeur de 400 pixels, nous aimerions que le recaptcha ait la même largeur.

Actuellement, cela ressemble, mais nous aimerions que ce soit la même chose que pour le reste.

Est-ce que quelqu'un sait comment faire cela encore?

Merci

recaptcha layout example

cssiframewidthrecaptcha
61
Owen

Voici un moyen de contourner le problème, mais pas toujours, en fonction de son échelle. L'explication peut être trouvée ici: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha {
    transform:scale(0.77);
    transform-Origin:0 0;
}

UPDATE: Google a ajouté la prise en charge d'une taille plus petite via un paramètre. Consultez la documentation - https://developers.google.com/recaptcha/docs/display#render_param

82
colecmc

Pour plus de compatibilité:

  -webkit-transform: scale(0.77);
     -moz-transform: scale(0.77);
      -ms-transform: scale(0.77);
       -o-transform: scale(0.77);
          transform: scale(0.77);
   -webkit-transform-Origin: 0 0;
      -moz-transform-Origin: 0 0;
       -ms-transform-Origin: 0 0;
        -o-transform-Origin: 0 0;
           transform-Origin: 0 0;
10
k1r8r0wn

Non, actuellement vous ne pouvez pas. C'était seulement possible avec l'ancien recaptcha, mais je suis sûr que vous pourrez le faire à l'avenir.

Je n'ai pas de solution mais une suggestion. J'ai eu le même problème, alors j'ai centré le div recaptcha (margin: 0 auto;display: table), Je pense que cela a l'air beaucoup mieux qu'un div aligné à gauche.

9
Luca Steeb

Un peu tard mais j'ai une solution de contournement facile:

Ajoutez simplement ce code à votre classe "g-recaptcha":

width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
7
Andrew Rockwell

Pour la nouvelle version de noCaptcha Recaptcha, ce qui suit fonctionne pour moi:

<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-Origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-Origin:0 0;transform-Origin:0 0;"></div>

Ref

6
Muntasim
.g-recaptcha{
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    -moz-transform-Origin:0; 
    -ms-transform-Origin:0;
    -o-transform-Origin:0;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transform-Origin:0 0;
    transform-Origin:0;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}
4
Avanish Kumar

J'ai cette fonction dans l'événement document ready afin que le reCaptcha soit dimensionné de manière dynamique. Tout le monde devrait pouvoir laisser tomber ceci et partir.

function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
         childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
         scale = (parentWidth) / (childWidth);
         new_width = childWidth * scale;
         document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
         document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
     }
}
4
Donald Skipper

Maintenant, vous pouvez utiliser le code ci-dessous (par google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

2
PurTahan

J'ai trouvé les moyens suivants pour redimensionner Google recaptchas

Option 1: vous pouvez redimensionner Google ReCaptcha en utilisant un style inline.

Une toute première façon de redimensionner Google recapture en utilisant le style en ligne. Les styles en ligne sont des styles CSS qui sont appliqués à un élément, directement dans le code HTML de la page, à l'aide de l'attribut style. Voici l'exemple qui montre comment styliser Google reCAPTCHA en utilisant le style en ligne.

<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>

Option 2: en insérant le style suivant dans votre page (feuille de style interne).

Deuxièmement, vous pouvez mettre du style pour ReCaptcha dans la page entre et. Une feuille de style interne est une section d'une page HTML contenant des définitions de style. Les feuilles de style internes sont définies à l'aide de la balise située dans la zone du document. Voici l'exemple qui montre comment styliser Google reCAPTCHA à l'aide d'une feuille de style externe.

<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>

Option 3: redimensionnez Google ReCaptcha à l'aide d'une feuille de style externe.

Créez un fichier séparé, nommez-le comme style.css et ajoutez ce lien de fichier entre vos éléments de votre page. Par ex. .

<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>
2
Mayank Dudakiya

Ceci est mon travail autour de:

1) Ajoutez une division wrapper à la division recaptcha.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Ajoutez le code javascript/jquery.

$(function(){
    // global variables
    captchaResized = false;
    captchaWidth = 304;
    captchaHeight = 78;
    captchaWrapper = $('#recaptcha-wrapper');
    captchaElements = $('#rc-imageselect, .g-recaptcha');

    resizeCaptcha();
    $(window).on('resize', function() {
        resizeCaptcha();
    });
});

function resizeCaptcha() {
    if (captchaWrapper.width() >= captchaWidth) {
        if (captchaResized) {
            captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-Origin', '').css('-webkit-transform-Origin', '').css('-ms-transform-Origin', '').css('-o-transform-Origin', '');
            captchaWrapper.height(captchaHeight);
            captchaResized = false;
        }
    } else {
        var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
        captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-Origin', '0 0').css('-webkit-transform-Origin', '0 0').css('-ms-transform-Origin', '0 0').css('-o-transform-Origin', '0 0');
        captchaWrapper.height(captchaHeight * scale);
        if (captchaResized == false) captchaResized = true;
    }
}

3) Facultatif: ajoutez du style si nécessaire.

#recaptcha-wrapper {text-align:center;margin-bottom:15px;}

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

1
Kevin Lau

Vous pouvez utiliser le paramètre de reCaptcha. Par défaut, il utilise normal value sur data-size, Vous devez simplement utiliser compact pour l’adapter à de petits périphériques ou à d’autres types de mise en page de faible largeur.

exemple:

<div class="g-recaptcha" data-size="compact"></div>
0
KirtJ