This is a very common question of WordPress users: how to centralize the contact form 7 submit button?
It’s easier than you think. I’ll show below.
How to center the Contact Form 7 submit button
To do this is very simple. You just need to create your contact form the way you want it, and add the following code in your CSS editor or theme editor:
input.wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
}
Ready, the result will be this:
I hope that you enjoyed.
Do you like the post? Please, leave your comment!
31 Responses
ok, but how do I apply this to only 1 specific form? do you have additional CSS coding for that?
Hi Erez.
if you need set to a specific form use the form ID or page class before this css.
ex. .home for form in home page or .single-post for forms in single post page.
if you need more informations send me a mail.
Thanks! Works for me 🙂
Thank you very much 🙂
It worked.
Thanks so much for your help!
Perfecto. Thanks a bunch!
Very handy. I love Contact Form 7, but the centering issue has always been a problem for me. Thanks so much for sharing.
Awesome – thank youy
would love to know how to align left. It’s fine in every other form except the footer. Can’t get it to go left
Thanks!
Thank you so much Eduardo, you just saved me alot of time and energy.
Thank you
Yeah, we got the “center” part thank you. But the guy above asked how to align “left?” No answer? I am asking how to align the button to the “right?” Thanks.
thanks, it worked for me :))
Gracias honorable hombre!
Thanks! So simple 🙂
Thank yout
Thank you for taking the time to make this page,
Wonderful.
Absolutely brilliant, thank you so much Eduardo 👍🏾
Hope you and the family are all very well my brother 🙏🏾
Thank you very much! Worked asap!!
Thanks,It worked but what if we have to use it for a particular form? can we do it from additional setting section of cf7 using css?
Thanks, it works perfectly.
: )
Endo.
Worked for me! Thanks a lot!
Hello
I used your css code to centre my submit button and hey presto it was centred!
Thanks so much.
Thanks, It’s work for me, Great
thank you very much
Worked. To those who need to know, this code has to be added in Appearance > Customize > Additional CSS
Thanks a lot! If you hadn’t made this comment, I definitely wouldn’t be able to use that code…
Thank You very much. The code works perfect. But without the hint from Mayapur Voice, i couldn’t use that code…
I didn’t expect it to work – (seemed to simple) but IT DID! — Thanks
Thank you! I’ve been looking for a long time how to make it in the center. Your method helped