Center Captcha in Contact Form

Support
#1

Hi There,

When Centering the Contact Form, the Captcha box does not align Center.

So just looking to find a way to center the Captcha box for the Contact Form.

Thanks!

Chris

site: darylstoneage.com

#2

Hi Chris,

I tried to check your website but it’s in “Coming Soon” mode, could you please provide us with login access in “Secure Note” so we can see your website and provide help?

Thanks.

#3

Hi There,

Thanks for your response!

I’ve added the site and login below.

Thanks!

Chris

#4

Hi Chris,

Thank you for writing in, please add this to Theme Options > CSS

.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha > div{
	margin-left: auto;
	margin-right: auto;
}

Hope it helps,
Cheers!

#5

Hi there,

Thanks so much - works perfectly!

A quick addition to this…

I would like it only aligned left for the 1200px and up breakpoint, then centered for the rest of the breaks. Could you pass along the CSS for that?

Thanks again,

Chris

#6

Hi Chris,

In that case, you may change the code to this.

@media(max-width:1200px) {
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha > div{
	margin-left: auto;
	margin-right: auto;
}
}

Hope that helps.

#7

Hi There,

Thanks so much for your response!

I’ve added the code, but unfortunately either the Send or Recaptcha button is not centered. Not sure exactly which.

Any ideas?

Thanks again,

Chris

#8

Hi Chris,

It should be:

@media(min-width:1200px) {
    .wpcf7-form-control.g-recaptcha.wpcf7-recaptcha > div {
       	margin-left: auto;
	    margin-right: auto;
    }
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.``

#9

Hi Jade,

The solution previous to yours actually does what I need it to.

However, if you view the site at the 768 x 979 breakpoint, you can see the captcha and/or the send button don’t look centered. I’m just wondering which isn’t correctly centered and how to remedy that.

Thanks for the links as well!

Chris

#10

Hi There,

Please delete the previous CSS and add this custom CSS instead:

.wpcf7-form-control.g-recaptcha > div {
    margin: 0 auto;
    width: 156px !important;
}

input.wpcf7-form-control.wpcf7-submit {
    margin: 0 auto !important;
    display: block;
}

span.ajax-loader {
    display: block !important;
    margin: 0 auto !important;
}

Hope it helps :slight_smile:

#11

Hi There!

Thanks for getting back to me.

The CSS works great to center everything up, however I’m still needing the CSS to keep the Captcha and the Send box aligned Left for the 1200px and above breakpoint, as was mentioned in my original post.

Thanks!

Chris

#12

Hi Chris,

In this case, that’s the extra CSS code snippet you need:

@media screen and (min-width: 1200px){

    input.wpcf7-form-control.wpcf7-submit {
        float: left;
        margin: auto!important;
    }
    .wpcf7-form-control.g-recaptcha > div {
        float: left;
        width: 100%!important;
    }
}

Thanks.

#13

Hi Alaa,

Worked perfectly.

Thanks so much!

Chris

#14

We are delighted to assist you with this.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.