Have you ever built a contact form with the Divi Contact Form module and felt the input fields were a bit cramped, with the input fields stuck in a narrow layout? You’re not alone! By default, Divi’s Contact Form module has elements with a set width.
But what if you want them to stretch across the entire column, creating a cleaner and more modern look? This tutorial will equip you with two simple methods to make your input and email fields in the Divi Contact Form module a full-width layout.
How to Make the Input Field and Email Field Full-width in Divi Contact Form Module
As we mentioned earlier, we will walk you through two easy ways to make every field in the Divi Contact Form full-width; using the Divi built-in option and using custom CSS.
Method 1: Using the Divi Built-in Option
First, open the Contact Form Settings in the Divi Builder editor. Afterward, navigate to the settings for each field (Name, Email, Message, etc.).
Once you enter the field settings, go to the Design tab, locate the Layout section, and then find the toggle for Make Fullwidth. Now, set it to YES for the fields you want to display in full width.
Method 2: Using Custom CSS
CSS can be utilized in situations where you want to have more control or if you want full-width functionality for all fields. This is the snippet:
selector .et_pb_contact_field{
width:100%;
}
Please copy the CSS snippet above and paste it into the Contact Form Settings (Advanced tab -> Custom CSS).
The Code Explanation:
This code selects all elements with the class .et_pb_contact_field (input fields in Divi’s Contact Form module) and sets their width to 100% of their container.
This makes the input fields stretch across the entire available space within their column.
The Bottom Line
This article shows how easily you can make all fields in the Divi Contact Form module (input and email field) full-width by using two methods. The best method depends on your comfort level with code and your desired level of customization.
Because it is more intuitive and does not cause style conflicts, we think the built-in “Make Fullwidth” option is usually the best choice. On the other hand, if greater control is required, the custom CSS approach provides it.
