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

2nd Format

3rd Format

Fourth Format

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.

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

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

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

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.

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

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

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

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

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.

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

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

• Fullwidth: No

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

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

• Make Fullwidth: Sure

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

Upload a height margin to the button.

• Button margin- height: 10px

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

• Inputs rounded corners: 30px

Ultimate Design

This is the overall design on desktop and cellular.

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.

Alternate the row structure.

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

• Use Customized Gutter Width: No

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

align-items:heart;

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

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

• Proper border width: 0px

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

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

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.

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

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

• Fullwidth: No

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

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

• Make Fullwidth: Sure

Customizing the Touch Shape Design

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

• Background: #DBC2B3

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

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

Then upload a field shadow to the column.

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

• Fields textual content colour: #000000

Ultimate Design

This is the overall design for the second one structure.

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.

Transfer the deal with module to the suitable column.

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

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

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

• Use Customized Gutter Width: No

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. Repeat the stairs to take away the border from column 2.

• Proper border width: 0px

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.

Ultimate Design

This is the overall design for the 3rd structure.

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.

Transfer the deal with module to the suitable column.

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

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

• Use Customized Gutter Width: No

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

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

• Proper border width: 0px

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

• Textual content Alignment: Middle

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.

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

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

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

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

Customizing the Touch Shape Design

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

• Fields Textual content Colour: #000000

Open the phase settings and upload a background colour.

• Background: #DBC2B3

In spite of everything, upload a background masks.

• Background Masks: Arch
• Masks Become: Horizontal

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

• Masks Become on Cell: Horizontal and Rotate

Ultimate Design

This is the overall design for the fourth structure.

Ultimate Consequence

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

First Format

2nd Format

3rd Format

Fourth Format

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