Search

How to Make the Input Field and Email Field Full-width in Divi Contact Form Module

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.

A contact form with fullwidth fields.

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.).

The gear icon to access field settings.

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.

The setting option to set the form field to fullwidth.

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).

Adding custom CSS via the settings panel of Divi Builder editor.

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.