The contact form is an important element to include on your website if you want to capture emails and convert your visitors into customers. The Divi Contact Form Module can be easily customized to create attractive and captivating contact forms for all types of websites. The module comes with two width options that can be applied to each field in the form: inline or full-width. In this tutorial, we will present four unique layout possibilities for your Divi contact form using inline and full-width fields.

Let’s get started!

Sneak Peek

Here is a preview of what we will design.

First Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Second Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Third Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Fourth Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

4 Layout Possibilities for Your Divi Contact Form Using Inline & Fullwidth Fields

Select the Premade Layout

Each of the 4 designs are modified from the Shoe Repair Contact Page layout from the Shoe Repair Layout Pack, which you can find in the Divi library.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Use Builder
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Browse Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Search for and select the Shoe Repair Contact Page layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Find Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Select Use This Layout to add the layout to your page.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Use Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Now we are ready to build our designs.

First Layout

First, move the row containing the contact form module to the section above, right below the row with the blurb modules. Then you can delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Move Row
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row settings and add padding to the left and right,

  • Padding-left: 15%
  • Padding-right: 15%

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Padding
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Select the responsive options and set the mobile padding.

  • Padding-left: 5%
  • Padding-right: 5%

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Responsive Spacing
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Modifying the Contact Form Layout with Inline and Fullwidth Fields

For this layout, we will create two separate fields for first name and last name. Open the contact form module settings and change the field ID and Title for the Name field to First Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rename Field
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add a new field below the First Name field. Set the field ID and Title to Last Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Add Field
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

In the last name field settings, open the Layout settings and set Make Fullwidth to No.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Inline
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next, under the contact form settings switch the order of Subject and Phone so that Phone is listed before Subject.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Field Order
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the subject field layout settings and make the field fullwidth.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Fullwidth
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Customizing the Contact Form Design

Now let’s modify a few settings to complete the design. Navigate to the design tab of the contact form settings.

First, change the button background color.

  • Button Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Button Background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add a top margin to the button.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Button Margin
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Finally, navigate to the Border settings and add rounded corners to the inputs.

  • Inputs rounded corners: 30px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rounded Corners
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Design

Here is the final design on desktop and mobile.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Second Layout

For our second design, we will move the blurb modules to the left side of the page and have the contact form on the right side of the page. Move the blurb modules to one column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Change the row layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Row Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row design settings and turn off Use Custom Gutter Width.

  • Use Custom Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Custom Gutter Width
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add some code to the Main Element Custom CSS in order to vertically align the blurb modules and the contact form.

align-items:center;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Main Element CSS
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Now we need to remove the thin border between the columns. Open the row settings, then open the settings for column 1. Under the Design tab, navigate to the border settings and remove the border.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next, open the settings for column 2 and repeat the steps to remove the border.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border Width
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Set the “Contact Us” text to be centered.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Text Alignment
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Move the contact form to the right column. Delete the empty remaining section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Move Contact Form
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Modifying the Contact Form Layout with Inline and Fullwidth Fields

This layout will also have two separate fields for first name and last name. Open the contact form module settings and change the field ID and Title for the Name field to First Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID and Title
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add a new field below the First Name field. Set the field ID and Title to Last Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

In the last name field settings, open the Layout settings and set Make Fullwidth to No.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 No Fullwidth
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Change the order of the phone and subject fields so that phone comes before subject.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Reorder Fields
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the field settings for Email, Phone, and Subject, and set the layout to fullwidth.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Make Fullwidth
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Customizing the Contact Form Design

Open the row settings, then open the column 2 settings. Set the background color.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Within the column 2 settings, navigate to the design tab and add some padding.

  • Padding-top: 50px
  • Padding-bottom: 50px
  • Padding-left: 50px
  • Padding-right: 50px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Padding
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Select the mobile icon to modify the responsive settings. Set the padding for mobile.

  • Padding-top: 30px
  • Padding-bottom: 30px
  • Padding-left: 30px
  • Padding-right: 30px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Responsive Padding
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Then add a box shadow to the column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Box Shadow
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Finally, open the contact form settings and change the field text color.

  • Fields text color: #000000

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field Text Color
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Design

Here is the final design for the second layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Third Layout

For the third layout, we will have the contact form on the left and the blurb modules on the right. Let’s get started by changing the column structure of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Choose Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Move the address module to the right column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Address
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next, move the Contact Us text module to the left column, then delete the remaining empty row.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Text
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Move the contact form to the left column, below the Contact Us text module. Delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Module
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row design settings and turn off Use Custom Gutter Width.

  • Use Custom Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 No Custom Gutter Width
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add some code to the Main Element Custom CSS in order to vertically align the blurb modules and the contact form.

align-items:center;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Custom CSS
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row settings, then open the settings for column 1. Under the Design tab, navigate to the border settings and remove the border. Repeat the steps to remove the border from column 2.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Border Width
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Modifying the Contact Form Layout

We will leave the field widths as-is for the third design, however, open the contact form settings and switch the order of the phone number and subject field so that the phone comes first.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Reorder Fields
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Design

Here is the final design for the third layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Fourth Layout

For the fourth and final layout, the contact form will be on the left and the blurb modules on the right. Once again, we will start by changing the column structure of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Choose Layout
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Move the address module to the right column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Move Module
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Move the contact form to the left column. Delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Move Form
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row design settings and turn off Use Custom Gutter Width.

  • Use Custom Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Custom Gutter
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add some code to the Main Element Custom CSS in order to vertically align the blurb modules and the contact form.

align-items:center;

  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the row settings, then open the settings for column 1. Under the Design tab, navigate to the border settings and remove the border.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next, open the settings for column 2 and repeat the steps to remove the border.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width 2
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the text module settings for the Contact Us text and center the text.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Text Alignment
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Modifying the Contact Form Layout with Inline and Fullwidth Fields

For this design, all of our fields will be fullwidth. Open the contact form settings, then open the settings for each field. Under the design tab, select Layout and set Make Fullwidth to Yes.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Make Fullwidth
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Once you make each field fullwidth, the form should look something like this.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Fullwidth
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Now, change the field ID and Title for the Name field to First Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field ID
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add a new field below the First Name field. Set the field ID and Title to Last Name.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Last Name Field
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Change the order of the phone and subject fields so that phone comes before the subject.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field Order
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Customizing the Contact Form Design

In the contact form design settings, set the Fields Text Color to black.

  • Fields Text Color: #000000

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Text Color
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Open the section settings and add a background color.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Add Background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Finally, add a background mask.

  • Background Mask: Arch
  • Mask Transform: Horizontal

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Add Background Mask
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

To make the background mask work better on mobile, let’s use the responsive settings.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Responsive Background Mask
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

  • Mask Transform on Mobile: Horizontal and Rotate

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Responsive Mask Transform
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Design

Here is the final design for the fourth layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Result

Let’s take a look at all of our final designs once again.

First Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Second Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Third Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Fourth Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Final Thoughts

Having a great-looking contact form can increase your conversions and allows your visitors to connect directly with you. As we have demonstrated through this article, you can use the inline and fullwidth field options to create different looks and layouts for your form, and Divi’s built-in design options allow you to create unique and attractive designs to help the form stand out. To learn more about the different ways you can style the contact form module, check out this tutorial for creating a full-screen responsive form with zoom-in scroll animation, and this tutorial for 5 more unique styling options. How have you styled your contact form module? We would love to hear from you in the comments!

How to Combine Inline & Fullwidth Fields in Divi’s Contact Form Module