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

Posted on October 4, 2022 by in Divi Resources

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

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

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

Second Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

Third Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

Fourth Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

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

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

Search for and select the Shoe Repair Contact Page layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Find Layout

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

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Use Layout

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

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

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

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

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

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

  • Fullwidth: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Inline

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

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

  • Make Fullwidth: Yes

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Fullwidth

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

Add a top margin to the button.

  • Button margin- top: 10px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Button Margin

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

Final Design

Here is the final design on desktop and mobile.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

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

Change the row layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Row Layout

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

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

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.

  • Right border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border

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

  • Right border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border Width

Set the “Contact Us” text to be centered.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Text Alignment

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

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

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

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

  • Fullwidth: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 No Fullwidth

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

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

  • Make Fullwidth: Yes

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Make Fullwidth

Customizing the Contact Form Design

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

  • Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Background

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

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

Then add a box shadow to the column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Box Shadow

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

Final Design

Here is the final design for the second layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

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

Move the address module to the right column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Address

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

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

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

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

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.

  • Right border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Border Width

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

Final Design

Here is the final design for the third layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

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

Move the address module to the right column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Move Module

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

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

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

align-items:center;

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

  • Right border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width

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

  • Right border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width 2

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

  • Text Alignment: Center

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Text Alignment

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

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

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

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

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

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

Open the section settings and add a background color.

  • Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Add Background

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

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

  • Mask Transform on Mobile: Horizontal and Rotate

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Responsive Mask Transform

Final Design

Here is the final design for the fourth layout.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

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

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

Second Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

Third Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

Fourth Layout

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

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!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi Mega Pro

Divi Plugin Highlight: Divi Mega Pro

Last Updated on December 6, 2022 in Divi Resources

Divi Mega Pro is a third-party plugin for Divi that adds the ability to create mega menus and tooltips with the Divi Builder. Since the mega menus and tooltips are created with the Divi Builder, you can use any modules you want, including third-party modules, shortcodes, and code, and style them...

View Full Post
Join To Download Today