Divi Contact Form: Center Submit Button

Last modified Sep 10, 2020
Difficulty Beginner
Language CSS
Category

Watch Tutorial

Transcript:

Hey everybody, I’m David from Divi Space. Today I am going to show you how to center the submit button of the Divi contact form. By default, it’s aligned to the right and there is no option in the Divi Module Settings to change it.

Here is the Divi CSS code controlling the button and that we need to overwrite.

What you’ll want to do is go to the page settings and paste the CSS code snippet that you can find in the video description.

Yup, it’s that simple.

This is part of the Divi Space Snippet Series, thanks for watching the video and we’ll see you in the next one.

CSS

.et_contact_bottom_container {
    float: none;
    text-align: center;
    display: block !important;
}

 

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

9 Comments

  1. Lisa

    This works for desktop, but doesn’t appear center on mobile when using my ph?

    Reply
  2. Ali Haider

    Perfect solution. Thanks for saving our time.

    Reply
  3. Marcos

    Hi, do you know how to do to make the width of the button equals to de width of the contact form? I only have this format with the “email optin module” not with the contact form.

    Reply
  4. Michael Burch

    Didn’t work until I added “display: block !important;” per Alejo’s recommendation. You need to revise your tutorial.

    Thanks, Alejo!

    Reply
    • Anna Kurowska

      Thanks! We updated our snippet 🙂

  5. artisticbox

    is not working, the button go to the left always.

    Reply
    • Anna Kurowska

      Hi artisticbox, share a link so I can help you 🙂

    • Alejo

      Hi, try adding display: block !important;

  6. Tommy

    Thanks!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.