Submit button position after ReCaptcha

Hello,
I have installed Visforms 3.9.0 on Joomla 3.7.2
When I set up your captcha, the submit button is nicely centered under it.
But when I set google recaptcha, the button is next.
Could you do something about it?
Thanks.

Hi,

without taking a look at the website with the googel recaptcha I cannot help you.
This is probably the result of css from your template.

Regards,
Aicha

Hi,
This is shown on several of my pages, e.g. It also overlaps with the text: "Required."

Well,

at the moment you have enabled the Visforms Captcha and that looks quite fine.

Regards,
Aicha

Sorry, I probably did not clear the cache.

Please try to look now.

Hi,

thanks for this example.
You are right, that this does not look to good.
The problem is, that the recaptcha is completely rendered by Google as an Iframe inside the form, so I do not have much control over the layout. Nevertheless it is possible to let it look better.

You can add some custom css
Please check out the documentation article www.vi-solutions.de/en/documentations/vi...form-layout-with-css to learn how to add custom css to Visforms.

The following css should work for your website

.captchaCont {
min-height: 100px;
padding-left: 200px;
}
@media (max-width: 767px) {
.captchaCont {
min-height: 150px;
}
#captcha-lbl {
width: 100%;
}
}

(The @media adds css for small devices)

Each form has a specific id in html context. The form on the page with your link for example #visform1
If you have to make it more specific, so that it works only on a specific form, you have to use this id with your css selector.
For example
#visform1 .captchaCont {
min-height: 100px;
padding-left: 200px;
}
@media (max-width: 767px) {
#visform1 .captchaCont {
min-height: 150px;
}
#visform1 #captcha-lbl {
width: 100%;
}
}

Regards,
Aicha