Search

How to Move the Submit Button to the Center on Divi Contact Form Module

The Divi Contact Form module is a great way to add a contact form to your website. It can be a valuable tool for your business or your organization to provide a way for visitors to contact you. They can be used to answer questions, get feedback, etc. The contact form typically asks for the visitor’s name, email address, and message. The form data is then emailed to us as the website owner.

However, by default, the submit button on the Contact Form module is aligned to the right. This tutorial will show you how to move the submit button to the center.

Steps to Move the Submit Button to the Center on Divi Contact Form Module

Step 1: Add or Edit the Contact Form Module

Go to your Divi Builder editor; add a new Contact Form module or edit an existing one.

Step 2: Add the Custom CSS

Once you add the Contact Form module, we will add the CSS code to the page settings.

Go to the Page Settings by clicking the gear button (⚙️). Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.

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

This CSS code targets an element in a container (submit button), adjusting its properties to center-align that. This code helps center the submit button within the contact form inside the container.

Thats it. Now, you have successfully moved the submit button to the center of the Divi Contact Form module. Don’t forget to save your project or publish it if you want to.

The Bottom Line

By following these steps, you can now easily move your submit button to the center of the Divi Contact Form module. The submit button’s centering can improve the contact form’s responsiveness on mobile devices. A centered button ensures it stays within thumb reach, boosting accessibility and lowering the possibility of unintentional clicks.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.