How To Make The Divi Contact Form Submit Button Fullwidth Tutorial by Pee Aye Creative

How To Make The Divi Contact Form Submit Button Fullwidth

In this tutorial I will show you how to make the Divi Contact Form submit button fullwidth with some simple CSS.

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

1. Add A Custom CSS Class To The Divi Contact Form

The first step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make the submit button fullwidth and only affect a specific module. 

To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-submit-fullwidth” in the CSS Class input field of the Contact Form module.

add the CSS class to the Divi Contact form to make the button fullwdith

2. Add The Custom CSS Code Snippet

The second step is to add the custom CSS code to your website. This step is also very easy, and we are doing the work with only a few lines of CSS.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*Make The Divi Contact Form Submit Button Fullwidth*/

.pa-contact-form-submit-fullwidth .et_contact_bottom_container {
	width: 100%;
	flex-direction: column;
	gap: 1em;
	padding-left: 3%;
	margin-top: 0px;
}

.pa-contact-form-submit-fullwidth .et_contact_bottom_container button {
	width: 100%;
	margin: 0;
}

The first part of the code is targeting the button container and making it fullwidth, including a small adjustment for the padding that all the other form fields have by default. Then the second part of the code is making the button within the button container fullwidth.

Make The Contact Form Basic Captcha On It’s Own Line

As a bonus, our code works even if you are using the reCAPTCHA. Most other tutorials on this topic miss this point and use totally different code, but ours takes this into consideration.

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

Divi Contact Form Helper by Pee Aye Creative
Divi Contact Form Helper Fullwidth Submit Button setting

The Divi Contact Form Helper plugin has the option to simply enable the fullwidth button with a toggle setting. Couldn’t be easier than that!

2

Last updated May 27, 2022 @ 10:47 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart