How to centre the contact form submit button with Divi

A quick coding tutorial explaining how to centre the contact form submit button with the Divi theme.

One of the options not currently available within the Divi theme is the ability to centre the contact form buttons. Whilst it’s an incredibly robust and well built theme it can’t include every option possible for every element that is used to build a website. Luckily however this is relatively simple to rectify and doesn’t require much coding knowledge just a few lines of CSS code. If you’re not sure about how to add CSS to the Divi theme or WordPress take a look at the articles below:

Adding CSS to Divi

Adding CSS to WordPress

Firstly you’ll need to write a bit of CSS as seen below. This code should go in your Custom CSS section within the theme options.

.et_contact_bottom_container {
	float: none;
	text-align: center;
}

When adding the above code it may be worth including a code comment to identify what the code does. For example:

/* This code sets the contact form button to display centrally */

Further Customisations:

If you have the captcha option enabled this will create a layout where the captcha will sit to the left of the submit button. If you’ve added this to the form it’s likely that you want to keep it within the form especially for spam prevention or reduction.

If you want to change this you can enter the code below which will place the captcha above the button and to the right this way you get to include both and style the button the way that you’d like.

.et_pb_contact_right {
	display: block;
}

If you want to adjust the location of that captcha simply add in a text-align snippet as displayed in the first code block and you’ll be good to go!

An example of this might be text-align: center; which is the format that we used in the first example.

We hope this helps you to style your Divi website exactly the way you want and we’d appreciate a comment or a share if you found it useful.

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124