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

by | Oct 4, 2022 | Etcetera | 0 comments

The touch shape is crucial component to incorporate for your site if you wish to seize emails and convert your guests into shoppers. The Divi Touch Shape Module will also be simply custom designed to create sexy and fascinating touch paperwork for every type of web sites. The module comes with two width choices that may be implemented to each and every box within the shape: inline or full-width. On this instructional, we can provide 4 distinctive structure chances to your Divi touch shape the usage of inline and full-width fields.

Let’s get began!

Sneak Peek

Here’s a preview of what we can design.

First Format

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

2nd Format

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

3rd Format

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 Format

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 Want to Get Began

Ahead of we start, install and activate the Divi Theme and be sure to have the most recent model of Divi for your site.

Now, you’re ready to start out!

4 Format Chances for Your Divi Touch Shape The use of Inline & Fullwidth Fields

Make a choice the Premade Format

Each and every of the 4 designs are changed from the Shoe Restore Touch Web page structure from the Shoe Repair Layout Pack, which you’ll be able to to find within the Divi library.

Upload a brand new web page on your site and provides it a identify, then make a choice the way to Use Divi Builder.

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

We can use a premade structure from the Divi library for this case, so make a choice Browse Layouts.

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

Seek for and make a choice the Shoe Restore Touch Web page structure.

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

Make a choice Use This Format so as to add the structure on your web page.

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

Now we’re able to construct our designs.

First Format

First, transfer the row containing the touch shape module to the phase above, appropriate under the row with the blurb modules. Then you’ll be able to delete the remainder empty phase.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Move Row

Open the row settings and upload padding to the left and appropriate,

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

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

Make a choice the responsive choices and set the cellular padding.

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

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Responsive Spacing

Editing the Touch Shape Format with Inline and Fullwidth Fields

For this structure, we can create two separate fields for first identify and remaining identify. Open the touch shape module settings and alter the sector ID and Identify for the Title box to First Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rename Field

Upload a brand new box under the First Title box. Set the sector ID and Identify to Closing Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Add Field

Within the remaining identify box settings, open the Format settings and set Make Fullwidth to No.

  • Fullwidth: No

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

Subsequent, below the touch shape settings transfer the order of Topic and Telephone in order that Telephone is indexed sooner than Topic.

See also  What’s a Just right Click on Via Price? Methods to Support Your CTR

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Field Order

Open the topic box structure settings and make the sector fullwidth.

  • Make Fullwidth: Sure

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

Customizing the Touch Shape Design

Now let’s regulate a couple of settings to finish the design. Navigate to the design tab of the touch shape settings.

First, alternate the button background colour.

  • Button Background: #DBC2B3

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

Upload a height margin to the button.

  • Button margin- height: 10px

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

In spite of everything, navigate to the Border settings and upload rounded corners to the inputs.

  • Inputs rounded corners: 30px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rounded Corners

Ultimate Design

This is the overall design on desktop and cellular.

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

2nd Format

For our 2nd design, we can transfer the blurb modules to the left facet of the web page and feature the touch shape at the appropriate facet of the web page. Transfer the blurb modules to 1 column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2

Alternate the row structure.

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

Open the row design settings and switch off Use Customized Gutter Width.

  • Use Customized Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Custom Gutter Width

Upload some code to the Primary Part Customized CSS so as to vertically align the blurb modules and the touch shape.

align-items:heart;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Main Element CSS

Now we want to take away the skinny border between the columns. Open the row settings, then open the settings for column 1. Underneath the Design tab, navigate to the border settings and take away the border.

  • Proper border width: 0px

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

Subsequent, open the settings for column 2 and repeat the stairs to take away the border.

  • Proper border width: 0px

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

Set the “Touch Us” textual content to be focused.

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

Transfer the touch shape to the suitable column. Delete the empty final phase.

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

Editing the Touch Shape Format with Inline and Fullwidth Fields

This structure may also have two separate fields for first identify and remaining identify. Open the touch shape module settings and alter the sector ID and Identify for the Title box to First Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID and Title

Upload a brand new box under the First Title box. Set the sector ID and Identify to Closing Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID

Within the remaining identify box settings, open the Format settings and set Make Fullwidth to No.

  • Fullwidth: No

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

Alternate the order of the telephone and topic fields in order that telephone comes sooner than topic.

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

Open the sector settings for Electronic mail, Telephone, and Topic, and set the structure to fullwidth.

  • Make Fullwidth: Sure

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

Customizing the Touch Shape Design

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

  • Background: #DBC2B3

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

Throughout the column 2 settings, navigate to the design tab and upload 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

Make a choice the cellular icon to change the responsive settings. Set the padding for cellular.

  • Padding-top: 30px
  • Padding-bottom: 30px
  • Padding-left: 30px
  • Padding-right: 30px
See also  WooCommerce Permalinks: Best Practices for Shops and Products

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

Then upload a field shadow to the column.

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

In spite of everything, open the touch shape settings and alter the sector textual content colour.

  • Fields textual content colour: #000000

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

Ultimate Design

This is the overall design for the second one structure.

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

3rd Format

For the 3rd structure, we can have the touch shape at the left and the blurb modules at the appropriate. Let’s get began by way of converting the column construction of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Choose Layout

Transfer the deal with module to the suitable column.

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

Subsequent, transfer the Touch Us textual content module to the left column, then delete the remainder empty row.

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

Transfer the touch shape to the left column, under the Touch Us textual content module. Delete the remainder empty phase.

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

Open the row design settings and switch off Use Customized Gutter Width.

  • Use Customized Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 No Custom Gutter Width

Upload some code to the Primary Part Customized CSS so as to vertically align the blurb modules and the touch shape.

align-items:heart;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Custom CSS

Open the row settings, then open the settings for column 1. Underneath the Design tab, navigate to the border settings and take away the border. Repeat the stairs to take away the border from column 2.

  • Proper border width: 0px

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

Editing the Touch Shape Format

We can depart the sector widths as-is for the 3rd design, on the other hand, open the touch shape settings and turn the order of the telephone quantity and topic box in order that the telephone comes first.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Reorder Fields

Ultimate Design

This is the overall design for the 3rd structure.

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 Format

For the fourth and ultimate structure, the touch shape might be at the left and the blurb modules at the appropriate. As soon as once more, we can get started by way of converting the column construction of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Choose Layout

Transfer the deal with module to the suitable column.

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

Transfer the touch shape to the left column. Delete the remainder empty phase.

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

Open the row design settings and switch off Use Customized Gutter Width.

  • Use Customized Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Custom Gutter

Upload some code to the Primary Part Customized CSS so as to vertically align the blurb modules and the touch shape.

align-items:heart;

Open the row settings, then open the settings for column 1. Underneath the Design tab, navigate to the border settings and take away the border.

  • Proper border width: 0px

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

Subsequent, open the settings for column 2 and repeat the stairs to take away the border.

  • Proper border width: 0px

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

Open the textual content module settings for the Touch Us textual content and heart the textual content.

  • Textual content Alignment: Middle
See also  How Do Conversion Paths Paintings? A Step-by-Step Information

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

Editing the Touch Shape Format with Inline and Fullwidth Fields

For this design, all of our fields might be fullwidth. Open the touch shape settings, then open the settings for each and every box. Underneath the design tab, make a choice Format and set Make Fullwidth to Sure.

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

As soon as you’re making each and every box fullwidth, the shape will have to glance one thing like this.

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

Now, alternate the sector ID and Identify for the Title box to First Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field ID

Upload a brand new box under the First Title box. Set the sector ID and Identify to Closing Title.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Last Name Field

Alternate the order of the telephone and topic fields in order that telephone comes sooner than the topic.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field Order

Customizing the Touch Shape Design

Within the touch shape design settings, set the Fields Textual content Colour to black.

  • Fields Textual content Colour: #000000

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

Open the phase settings and upload a background colour.

  • Background: #DBC2B3

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

In spite of everything, upload a background masks.

  • Background Masks: Arch
  • Masks Become: Horizontal

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

To make the background masks paintings higher on cellular, let’s use the responsive settings.

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

  • Masks Become on Cell: Horizontal and Rotate

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

Ultimate Design

This is the overall design for the fourth structure.

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

Ultimate Consequence

Let’s check out all of our ultimate designs as soon as once more.

First Format

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

2nd Format

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

3rd Format

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 Format

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

Ultimate Ideas

Having a great-looking touch shape can building up your conversions and lets in your guests to attach without delay with you. As we’ve got demonstrated via this text, you’ll be able to use the inline and fullwidth box choices to create other seems to be and layouts to your shape, and Divi’s integrated design choices let you create distinctive and engaging designs to lend a hand the shape stand out. To be informed extra in regards to the other ways you’ll be able to taste the touch shape module, take a look at this instructional for creating a full-screen responsive form with zoom-in scroll animation, and this instructional for 5 more unique styling options. How have you ever styled your touch shape module? We would really like to listen to from you within the feedback!

The publish How to Combine Inline & Fullwidth Fields in Divi’s Contact Form Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *