Ria du PlessisAre you busy creating a website with Divi and realized that you might need a full-width submit button in order to complete your design? Unfortunately, it is impossible to make the submit button of the Divi Contact Form module full-width without extra code or an extra plugin. So, to make your life a little easier, we decided to write this Divi tutorial about How To Make The Divi Contact Form Submit Button Full-width. Ready to create the most user-friendly contact form with Divi? Keep reading!
Table of Contents
- Create A Fullwidth Button In The Divi Contact Form Module In A Few Easy Steps
- Make The Button Fullwidth With The Help Of A Plugin From The Elegant Themes Marketplace
- Wrapping Up
Create A Fullwidth Button In The Divi Contact Form Module In A Few Easy Steps
Add A Custom CSS Class To The Divi Contact Form
The tutorial’s first step is adding a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order only to make the submit button full-width.
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 “dm-contact-form-submit-fullwidth” in the CSS Class input field of the Contact Form module.
Add The Custom CSS Code Snippet To Your Theme Custom Code Area
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.
All you have to do is to place the code below in your Divi>Theme Options>Custom CSS code box.
/*Make The Divi Contact Form Submit Button Fullwidth*/
.dm-contact-form-submit-fullwidth .et_contact_bottom_container {
width: 100%;
flex-direction: column;
gap: 1em;
padding-left: 3%;
margin-top: 0px;
}
.dm-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 makes it full-width. This includes a slight adjustment for the padding that all the other form fields have by default. The second part of the code makes the button within the button container full-width.
Make The Button Fullwidth With The Help Of A Plugin From The Elegant Themes Marketplace
If you don’t feel comfortable adding custom CSS to your Divi website and prefer a plugin, then this is just the solution for you. You can buy the Divi Contact Form Helper Plugin from the Elegant Themes marketplace for only $25.
Buy The Divi Contact Form Helper Plugin ➝ Buy it!
Wrapping Up
By adding the above CSS code to your website, you can easily make your submit button full-width. But we know some people prefer to use plugins. So, the Divi Contact Form Helper is a great alternative.
Just like the Divi Contact Form Helper, do we also offer a great solution for a different Divi Theme missing feature? If you are using the Divi Theme, and want to add a few popups to your Divi website, just download our FREE Popups For Divi Plugin from the Elegant Themes Marketplace and you are good to go.
You will find a solution to almost all your problems in the Marketplace. Just take a few minutes to browse and be ready to be amazed!
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
