Creating a visually appealing and user-friendly website is crucial for engaging your visitors, and the contact form plays a significant role in this process. If you’re using the Divi theme by Elegant Themes, you might have encountered a limitation: the submit button on the Contact Form module doesn’t have a built-in option to make it full-width. A full-width submit button can enhance the form’s appearance and make it more accessible, ensuring it stands out and encourages users to complete and submit the form.

This guide is here to help. We’ll walk you through the steps needed to customize your Divi contact form and make the submit button span the entire width of its container. Whether you’re a seasoned web developer or a Divi beginner, our step-by-step instructions will make this task straightforward and manageable.

We’ll start by showing you how to add a contact form module to your page if you haven’t already. Then, we’ll dive into the advanced settings where you can apply custom CSS to transform the submit button’s layout. For those who prefer a more organized approach, we’ll also cover how to use a custom class and add the necessary CSS in your theme’s stylesheet or Divi theme options.

By the end of this tutorial, you’ll have a beautifully styled, full-width submit button that enhances your contact form’s usability and aesthetics. So, if you’re ready to create a more user-friendly contact form with Divi, keep reading!

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

To start customizing your contact form, the first step is to add a Custom CSS Class to the Contact Form module. This CSS Class helps our website know exactly which part we want to change. Here’s how to do it:

• Open up the settings for the contact form module by clicking on it.
• Look for the “Advanced” tab and click on it.
• Find where it says “CSS IDs & Classes” and turn that on.
• In the box that appears, type in “dc-contact-form-submit-fullwidth”. This label tells our website what we want to do with the submit button.

Once you’ve done this, you’re ready to move on to the next step and make the submit button full-width!

Contact Form Settings

Read More: Basics of Divi Responsive Design

2. Adding Custom CSS Code Snippet

Next, we’ll tackle the second step, which involves adding custom CSS code to your website. Don’t worry, it’s a breeze! With just a few lines of CSS, we’ll make the magic happen.

Simply navigate to your Divi theme settings and locate the Custom CSS code box. Once you’re there, paste the following code:

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

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

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

Let’s break down what this code does. The first part targets the button container, ensuring it spans the full width of its parent element. We’ve also made a slight adjustment to the padding to match the rest of the form fields. The second part of the code focuses on the button itself, making sure it inherits the full-width property from its container.

Once you’ve added this code and saved your settings, your Divi contact form’s submit button will be seamlessly integrated into your design, ready to capture user input with style and functionality.

Adding Custom CSS Code Snippet

Read More: Free Speed Test Tools for Your Divi Website

3. Make The Button Full Width With The Help Of A Plugin

If you’re not comfortable messing with custom code on your Divi website and prefer a simpler solution, we’ve got just the thing for you. Check out the Divi Contact Form Helper Plugin available in the Elegant Themes marketplace. This plugin can save you the hassle of writing custom CSS to customize your contact form’s submit button. It’s an easy, affordable option to enhance your Divi website’s functionality without diving into complex coding. Ready to streamline your contact form setup? Grab the plugin today!

Final Thoughts:

Enhancing your Divi contact form with a full-width submit button is a simple yet impactful way to improve the user experience on your website. By following the steps outlined in this guide, you’ve learned how to overcome the limitations of the default Divi settings and customize your contact form to better suit your design preferences.

Whether you opted for the custom CSS approach or decided to use the Divi Contact Form Helper Plugin, you’ve taken a step towards creating a more user-friendly website. The ability to seamlessly integrate a full-width submit button not only enhances the visual appeal of your contact form but also makes it more accessible and inviting for your visitors.

Remember, the key to a successful website is to continuously strive for improvement and optimization. Don’t hesitate to explore other customization options and experiment with different design elements to further enhance your Divi website’s functionality and aesthetics.

We hope this tutorial has been helpful in guiding you through the process of making the Divi contact form submit button full-width. If you have any questions or need further assistance, feel free to reach out. Happy designing!

Read More: How to Stop Divi Contact Form Sending Spam