How can I change the Google Recaptcha position?

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

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. 

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?

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.

 This is a better solution, thanks.

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?

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.

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

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.

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!

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?

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. 

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?

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

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:

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

We'll wait for your response.

Thank you!

Galaxy Note 3.

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

Device details: 

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

We will wait for your response. 

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