How can I change the Google Recaptcha position?

  • Profile Image
    vtiportal
    Asked on October 17, 2017 at 04:50 PM

    How can I re-position recaptcha? See attached. It's interfering the submit button. Can I move the verification panel above the button?

  • Profile Image
    Kevin_G
    Answered on October 17, 2017 at 08:19 PM

    It's possible to inject some custom CSS to the Google Recaptcha widget; however, such code may not affect the elements in the widget since it's loaded within an iFrame. 

    However, you may inject CSS code to handle the widget's position  directly to the form, your field id s "id_53" so you may inject code like the following:

    #id_53{

       margin-left: 10px;

      width: 100px;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    vtiportal
    Answered on October 18, 2017 at 10:57 AM

    See attached. I injected the following to move it to the right of the submit button:

    #id_53{

       margin-left: 150px;

      width: 100px;

    }

    The bottom part is also hidden by another element below it. Can that be fixed?

    My original question: Is it possible to move the recaptcha panel ABOVE the submit button?

  • Profile Image
    Mike_G
    Answered on October 18, 2017 at 12:23 PM

    I see that the reCaptcha on your form is moved to the right since you have set a margin on the left.

    Can you try adding the following CSS codes below to your form instead of the original CSS codes you added, please? — How-to-Inject-Custom-CSS-Codes

    #id_53 { 

       display: inline-block !important; 

    }

    I hope this helps. Please feel free to contact us again anytime should you have other questions or concerns.

  • Profile Image
    vtiportal
    Answered on October 18, 2017 at 12:30 PM

     This is a better solution, thanks.

  • Profile Image
    vtiportal
    Answered on October 18, 2017 at 01:05 PM

    Sorry, it works on all the forms, except for these 2 forms with #input_37:

    https://vtiresourceportal.com/marketing-materials/marketing-materials-re-order-form/

    https://vtiresourceportal.com/marketing-materials/business-cards/

    The submit button is still over the recaptcha panel. I'd like the submit button to be below the recaptcha panel. Why does the code work for some forms and not others?

  • Profile Image
    Mike_G
    Answered on October 18, 2017 at 01:52 PM

    It is because the reCaptcha of the forms on the website you shared with us has a different element "id". Please add the following CSS codes to the form embedded on your websites.

    For the form in https://vtiresourceportal.com/marketing-materials/marketing-materials-re-order-form/

    #id_37 {

        display: inline-block !important;

    }

    For the form in https://vtiresourceportal.com/marketing-materials/business-cards/

    #id_71 {

        display: inline-block !important;

    }

    The image below shows how you can get the element ID of the fields in your form.

    1508348943t13_45_51.png

     

    Please let us know if you have other questions or concerns.

  • Profile Image
    vtiportal
    Answered on October 18, 2017 at 02:48 PM

    Don't think you understand my question. See attached. Recaptcha is displaying correctly. But the submit button is over it, which prevents verification. Also, the submit button should be below recaptcha. Can you please provide a solution.


    1508352400submit_button_recaptcha.png

  • Profile Image
    Nik_C
    Answered on October 18, 2017 at 04:31 PM

    Try adding the below CSS in your Custom CSS Field:

    button#input_2 {

        margin-top: 120px;

    }

    If you need to increase the space more, just increase the number above.

    Let us know how it worked.

    Thank you!

  • Profile Image
    vtiportal
    Answered on October 18, 2017 at 05:09 PM

    I found out that when I copied the code:

    #id_37 {

        display: inline-block !important;

    }

    It somehow became:

    #id_37 { . .

    . .  display: inline-block !important;

    }

    And of course, the extra dots were tiny and in dark grey on the dark background of your css panel. Hardly visible. That was why it did not work. Once I removed the extra dots, it worked.

    Would it be better if the css background is white?

  • Profile Image
    Kevin_G
    Answered on October 18, 2017 at 07:10 PM

    I think we could forward this as feature request, may be to have the ability to change the CSS editor background for the mini designer?

    The advanced designer tool already has a white background, but if you would like to open a feature request then you may open a thread on our forum and we will be glad to forward it to our second level. 


  • Profile Image
    vtiportal
    Answered on October 19, 2017 at 04:39 PM

    While recaptcha is working well on desktop, it continues to be a problem on mobile. See attached.

    1. On my android, the submit button is over the recpatcha panel, which prevents verification.

    2. On my windows phone, recaptcha panel is cut off at the right.

    Is there a code to fix the above mobile issues?

    1508445492recaptcha_mobile.png

  • Profile Image
    Nik_C
    Answered on October 19, 2017 at 06:07 PM

    I tested on Galaxy S7 emulator, but I wasn't able to replicate this issue:

    1508450199Screen Shot 2017-10-19 at 11.5

    I tested on Note 3 (real device) and it worked the same.

    I don't have windows phone on me, so I tested on an emulator as well:

    1508450792Screen Shot 2017-10-20 at 12.0

    On which Android and Windows phone devices are you checking your form?

    We'll wait for your response.

    Thank you!

  • Profile Image
    vtiportal
    Answered on October 19, 2017 at 06:44 PM

    Galaxy Note 3.

  • Profile Image
    Kevin_G
    Answered on October 19, 2017 at 08:08 PM

    I have already tested on the same device you replicated the issue and I can see the captcha loads fine: 

    15084579511.gif

    Device details: 

    15084580591.png

    May you please test on a different device and let us know if the problem persists?

    We will wait for your response. 

  • Profile Image
    Nik_C
    Answered on October 20, 2017 at 12:19 PM

    I tested yesterday on Note 3 (physical device) and it worked fine. And I tested in Chrome.

    I don't have it now with me to re-test, I'll be able probably later but I doubt I it will be different.

    Maybe you were testing in built-in Browser (I mean in Android phone)?