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

17 Comments

  1. chris

    how do you align the button to the left?

    Reply
    • Anna Kurowska

      change text-align property to left

      .et_contact_bottom_container {
          float: none;
          text-align: left;
          display: block !important;
      }
    • chris

      I adjust the CSS to:

      .et_contact_bottom_container {
      float: none;
      text-align: left;
      display: block !important;
      }
      but my button out of the form div and to the very left side of the screen. I am trying to get it to align with the fields in the contact form.

    • Anna Kurowska

      Have you tried changing just float to left?

  2. Ray

    Hi guys. It gives me the errors:

    Expected RBRACE.
    &
    Unexpected Token ‘}’

    Any suggestions?

    Reply
    • Anna Kurowska

      Hi Ray, make sure you are adding the CSS in the correct place.

  3. Lisa

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

    Reply
    • Anna Kurowska

      What do you mean by “ph”?

  4. Ali Haider

    Perfect solution. Thanks for saving our time.

    Reply
  5. 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
    • Anna Kurowska

      button.et_pb_contact_submit.et_pb_button { width: 100%;}

  6. 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 🙂

  7. 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;

  8. Tommy

    Thanks!

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.