How to create divi contact form submit button fullwidth In A Few Easy Steps

Making your button fullwidth can enhance its visibility and usability, giving your visitors a clear and compelling way to interact with your site.

In this guide, we’ll show you How to make a Divi contact form submit button fullwidth masterpiece.

1. Add Custom CSS Class To The Divi Contact Form

1. Open the “Contact Form” module’s settings by clicking on the “Gear icon“
2. Go to the “Advanced tab“.
3. Go to the “CSS IDs & Classes toggle“
4. Place the class “form-submit-fullwidth” in the CSS Class input field of the Contact Form module

Check Out: Where to Add Custom Code in Divi

2. Add The Custom CSS Code Snippet

Go to your Divi > Theme Options > Custom CSS section and paste the following code:

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

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

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

The result would be as per the screenshot below:

That’s all for today!

Discover more by supporting me on