[briireParticipant]

Hi there… the Submit button for my Contact Form 7 isn’t exactly centered. It needs to scoot over to the right about 12px, but I don’t see anywhere in the shortcode configuration that I can control this button’s alignment without all the preceding form fields also being affected.

How can I get this button into dead center where it belongs?

Thanks!

Site info to follow in a private reply…

-Brian

[briireParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Thanks for writing in! That is because of your Ajax loading image that you have used in your form. Usually we do not provide support for 3rd party plugins and we advice our customers to consult a developer or service for customization related inquiries.

However for this instance, you can try adding the following CSS rule into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

.wpcf7-submit {
    display: block;
    margin: 0 auto;
}

Thank you for your understanding.

[briireParticipant]

Thanks for explaining this! I tried using the code above, but to no avail.

I’m not sure why the Ajax loading image would be an exception for my form. I’m using it in pretty much the default mode, directly from the Backend Editor, by simply inserting a plain ‘Contact Form 7’ element.

This seems to be the default for X’s use of Contact Form 7 as an element, so why would my form have alignment issues?

Thanks for helping explain and hopefully solve this riddle. 🙂

[NicoModerator]

Hi there,

As we checked your site, we are glad you fixed this issue and works perfectly fine.

Enjoy!

[briireParticipant]

Actually, although it is *close* to centered, it’s a bit off. Exactly 8 pixels too far to the left.

So how can I add 8px to the left margin next to this ‘Submit’ button? I didn’t make any modifications to the way Contact Form 7 looks or behaves – I’m using a simple form, straight out of the Backend Editor element insertion tool for Contact Form 7, so I’m not sure why it’s behaving this way.

Thanks!
-Brian

[RadModerator]

Hi Brian,

It’s centered, but both button and ajax loading image is inline in which alignment applies on them the same time.

Add this css too to drop the loading image under the button,

.ajax-loader {
display: block;
}

Cheers!

[briireParticipant]

Brilliantly simple fix! Thank you!!

Take care…

[ChristopherModerator]

You’re welcome.

[Author]

Posts