Touch paperwork are an important a part of many internet sites. Their number one goal is being intuitive and serving to guests simply get involved. However that doesn’t imply all touch paperwork will have to glance a definite and predefined means. You’ll be able to simply mix an intuitive revel in with a lovely design. That’s precisely what we’ll do on this publish. We’re going to percentage 5 distinctive Divi touch shape module designs that you’ll be able to construct the use of Divi’s integrated choices best.

Let’s get to it!

Preview of Divi Touch Shape Module Designs

Desktop

Let’s get started off by way of having a look on the Divi touch shape module designs on desktop.

contact form module

Cellular

And that is what the Divi touch shape module designs appear to be on smaller display sizes:

contact form module

Growing Touch Shape #1

contact form module

Upload New Phase

Gradient Background

Let’s get began with the primary instance! Upload a brand new segment, cross to the background settings and upload a gradient background.

  • Colour 1: #4c00ff
  • Colour 2: #ffd400
  • Gradient Kind: Radial
  • Radial Route: Backside Left
  • Get started Place: 34%
  • Finish Place: 34%

contact form module

Spacing

Then, cross to the spacing settings and upload some customized padding values.

  • Most sensible Padding: 200px
  • Backside Padding: 200px

contact form module

Upload New Row

Column Construction

Upload a brand new row the use of the next column construction:

contact form module

Column 1 Background Colour

With out including any modules but, open the row settings and upload a column 1 gradient background.

  • Column 1 Background Colour: rgba(255,255,255,0.55)

contact form module

Column 1 Background Symbol

Upload a background symbol to the primary column as smartly.

  • Column 1 Background Symbol Repeat: No Repeat
  • Column 1 Background Symbol Mix: Display

contact form module

Column 2 Background Colour

And a white background colour to the second one column.

  • Column 2 Background Colour: #ffffff

contact form module

Sizing

Trade the sizing settings subsequent.

  • Equalize Column Heights: Sure

contact form module

Spacing

Take away all default customized padding as smartly.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

contact form module

Column Border Radius

Upload some border radius to each columns within the complicated tab.

border-radius: 10px;

contact form module

Upload Textual content Module to Column 1

Upload Content material

Time to begin including the more than a few modules! Upload a Textual content Module to the primary column with some content material of selection.

contact form module

Textual content Settings

Then, cross to the textual content settings and make some adjustments.

  • Textual content font: Fulfill
  • Textual content Colour: #333333
  • Textual content measurement: 100px
  • Textual content Line Peak: 1em
  • Textual content Orientation: Middle

contact form module

Spacing

Upload some customized padding values as smartly.

  • Most sensible Padding: 600px
  • Backside Padding: 100px

contact form module

Field Shadow

So as to add intensity to the design, use a delicate field shadow.

  • Field Shadow Blur Power: 80px
  • Field Shadow Unfold Power: -16px
  • Shadow Colour: rgba(0,0,0,0.3)

contact form module

Upload Symbol Module to Column 2

Add PNG Symbol

Proceed by way of including an Symbol Module to the second one column. Add a PNG symbol of selection.

contact form module

Sizing

Trade the sizing settings of this module.

  • Width: 25% (Desktop), 50% (Pill), 60% (Telephone)
  • Module Alignment: Middle

contact form module

Spacing

Create an overlap by way of the use of some unfavorable most sensible margin.

  • Most sensible Margin: -60%

contact form module

Upload Textual content Module #1 to Column 2

Upload Content material

Proper underneath the Symbol Module, upload a Textual content Module with some content material.

contact form module

Textual content Settings

Trade the textual content settings of this module.

  • Textual content Font: Fulfill
  • Textual content Colour: #333333
  • Textual content Measurement: 44px
  • Textual content Orientation: Middle

contact form module

Upload Textual content Module #2 to Column 2

Upload Content material

Upload some other textual content module subsequent.

contact form module

Textual content Settings

Trade the textual content settings of this module as smartly.

  • Textual content Font: Arial
  • Textual content Colour: #ffd400
  • Textual content Measurement: 18px
  • Textual content Letter Spacing: 2px
  • Textual content Orientation: Middle

contact form module

Spacing

Upload some backside margin subsequent.

  • Backside Margin: 100px

contact form module

Upload Touch Shape Module to Column 2

Permit ‘Make Fullwidth’ Possibility on Identify & E-mail Box

The final module wanted is the Touch Shape Module. Sooner than you do anything, open the identify and electronic mail fields and alter the structure.

  • Make Fullwidth: Sure

contact form module

contact form module

Upload Topic Box

To create this design, we’ve added some other box for the topic.

contact form module

contact form module

contact form module

Parts

Disable the captcha choice subsequent.

  • Show Captcha: No

contact form module

Shape Box Textual content Settings

Make some adjustments to the shape box textual content settings of this Touch Shape Module.

  • Shape Box Background Colour: rgba(255,255,255,0)
  • Shape Box Font: Arial
  • Shape Box Font Weight: Mild
  • Shape Box Textual content Measurement: 16px
  • Shape Box Letter Spacing: 2px

contact form module

Button Settings

We’re enhancing the button look as smartly.

  • Use Customized Types for Button: Sure
  • Button Textual content Colour: #ffd400
  • Button Border Width: 0px
  • Button Letter Spacing: 2px
  • Button Font: Arial
  • Font Taste: Underline
  • Underline Colour: #4c00ff

contact form module

contact form module

Spacing

Upload some customized padding values subsequent.

  • Backside Padding: 100px
  • Left Padding: 50px
  • Proper Padding: 50px

contact form module

Border

And upload a delicate backside border to each and every one of the vital fields.

  • Backside Border Width: 2px
  • Backside Border Colour: #efefef

contact form module

Person Box Spacing

Remaining however now not least, upload some backside margin to each and every one of the vital particular person fields aside from for the message one.

  • Backside Margin: 20px

contact form module

contact form module

Growing Touch Shape #2

contact form module

Upload New Phase

Gradient background

Directly to the following instance! Upload a brand new segment with a gradient background.

  • Colour 1: #562fef
  • Colour 2: #ffffff
  • Gradient Kind: Linear
  • Get started Place: 50%
  • Finish Place: 50%

contact form module

Spacing

Upload some customized padding values to the spacing settings of this segment.

  • Most sensible Padding: 200px
  • Backside Padding: 200px

contact form module

Upload New Row

Column Construction

Upload a brand new row the use of the next column construction:

contact form module

Background Colour

With out including any modules but, open the row settings and upload a background colour to the row.

  • Background Colour: #ffffff

contact form module

Column 2 Gradient Background

Upload a gradient background to the second one column of the row subsequent.

  • Colour 1: #9932ff
  • Colour 2: #562fef
  • Column 2 Gradient Kind: Linear
  • Column 2 Gradient Route: 160deg

contact form module

Sizing

Trade the sizing settings of the row as smartly.

  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Equalize Column Heights: Sure

contact form module

Spacing

Then, upload some customized spacing values.

  • Most sensible Padding: 0px
  • Backside Padding: 0px
  • Column 1 Most sensible Padding: 100px
  • Column 1 Backside Padding: 50px
  • Column 1 Left Padding: 50px
  • Column 1 Proper Padding: 50px
  • Column 2 Most sensible Padding: 100px
  • Column 2 Backside Padding: 100px
  • Column 2 Left Padding: 50px
  • Column 2 Proper Padding: 50px

contact form module

Border

Upload ’20px’ to each and every one of the vital borders of the row.

contact form module

Field Shadow

Finally, upload a delicate field shadow to the row.

  • Field Shadow Blur Power: 45px
  • Field Shadow Unfold Power: -11px
  • Shadow Colour: rgba(0,0,0,0.3)

contact form module

Upload Textual content Module to Column 1

Upload Content material

Time to begin including the modules! Get started with a Textual content Module within the first column.

contact form module

Textual content Settings

Trade the textual content settings of this module.

  • Textual content Font Weight: Extremely Daring
  • Textual content Font Taste: Uppercase
  • Textual content Colour: #562fef
  • Textual content Suze: 100px (Desktop), 80px (Pill), 60px (Telephone)
  • Textual content Letter Spacing: -10px
  • Textual content Line Peak: 1em

contact form module

Spacing

Upload some backside margin as smartly.

  • Backside Margin: 50px

contact form module

Upload Touch Shape Module to Column 1

Parts

The second one module we’ll want within the first column is a Touch Shape Module. Whenever you’ve added the module, disable the ‘Show Captcha’ choice.

  • Show Captcha: No

contact form module

Shape Box Textual content Settings

Trade the shape box background colour subsequent.

  • Shape Box Background Colour: #ffffff

contact form module

Button Settings

Mess around with the button settings as smartly to create an icon button as a substitute of 1 containing textual content.

  • Use Customized Types for Button: Sure
  • Button Textual content Measurement: 73px
  • Botton Textual content Colour: rgba(0,0,0,0)
  • Hover Button Background Colour: rgba(255,255,255,0)
  • Button Border Width: 0px
  • Button Icon Colour: #9932ff
  • Most effective Display Icon on Hover for Button: No

contact form module

contact form module

Field Shadow

Finally, upload a delicate field shadow to each and every one of the vital fields.

  • Field Shadow Blur Power: 36px
  • Field Shadow Blur Power: -14px
  • Shadow Colour: rgba(0,0,0,0.3)

contact form module

Upload Textual content Module to Column 2

Upload Content material

The primary module we’ll want in the second one column is some other Textual content Module.

contact form module

Textual content Settings

Whenever you’ve added the content material, trade the textual content settings of this module.

  • Textual content Font Weight: Extremely Daring
  • Textual content Colour: #ffffff
  • Textual content Measurement: 23px
  • Textual content Letter Spacing: -1px

contact form module

Upload Blurb Module #1 to Column 2

Upload Content material

The second one module we’ll want is a Blurb Module. Cross forward and input some touch knowledge.

contact form module

Choose Icon

Then, select an identical icon.

contact form module

Icon Settings

Trade the settings of this icon.

  • Icon Colour: #ffffff
  • Icon Placement: Left

contact form module

Identify Textual content Settings

Proceed by way of making some adjustments to the name textual content settings subsequent.

  • Identify Textual content Measurement: 15px
  • Identify Letter Spacing: -0.5px

contact form module

Spacing

And upload some most sensible margin.

  • Most sensible Margin: 120px

contact form module

Clone Blurb Module Two times

Whenever you’re finished enhancing the primary Blurb Module, you’ll be able to cross forward and clone the module two times.

contact form module

Trade Content material & Icon of Each Duplicates

Trade the content material and icons of each duplicates to percentage other forms of touch knowledge with guests.

contact form module

Trade Spacing of Each Duplicates

The highest margin of each duplicates must be altered as smartly.

  • Most sensible Margin: 30px

contact form module

Growing Touch Shape #3

contact form module

Upload New Phase

Background Colour

Directly to the 3rd instance! Upload a brand new segment with the next background colour:

  • Background Colour: #3491CE

contact form module

Spacing

Proceed by way of including some customized padding values within the spacing settings.

  • Most sensible Padding: 200px
  • Backside Padding: 200px

contact form module

Upload Row #1

Column Construction

Then, upload a brand new row the use of the next column construction:

contact form module

Upload Textual content Module

Upload Content material

Time to begin including modules! The primary module we’ll want to upload to the primary column is a Textual content Module. Input some content material of selection.

contact form module

Textual content Settings

Then, trade the textual content settings.

  • Textual content Font Weight: Extremely Daring
  • Textual content Colour: rgba(255,255,255,0.24)
  • Textual content measurement: 100px (Desktop), 86px (Pill), 60px (Telephone)
  • Textual content Line Peak: 1em
  • Textual content Orientation: Middle

contact form module

Spacing

Upload some unfavorable backside margin as smartly.

  • Backside Margin: -100px

contact form module

Upload Row #2

Column Construction

The second one row we want to whole this case incorporates the next column construction:

contact form module

Gradient Background

With out including any modules but, open the row settings and upload a gradient background.

  • Colour 1: #11CE84
  • Colour 2: #10C77F
  • Gradient Kind: Linear
  • Gradient Route: 160deg
  • Get started Place: 50%
  • Finish Place: 50%

contact form module

Sizing

Trade the sizing settings as smartly.

  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Equalize Column Heights: Sure

contact form module

Spacing

Upload some customized padding values subsequent.

  • Most sensible Padding: 150px
  • Backside Padding: 100px
  • Left Padding: 50px
  • Proper Padding: 50px

contact form module

Border

Then, cross to the border settings and upload ’20px’ to each and every one of the vital corners. Use a backside border as smartly.

  • Backside Border Width: 10px
  • Backside Border Colour: #1ba35a

contact form module

Field Shadow

Whole the row settings by way of including a delicate field shadow.

  • Field Shadow Blur Power: 80px
  • Field Shadow Unfold Power: -24px
  • Shadow Colour: rgba(0,0,0,0.3)

contact form module

Upload Touch Shape Module to Column 1

Permit ‘Make Fullwidth’ Possibility on Identify & E-mail Box

The primary module we want within the first column of the row is a Touch Shape Module. Open the identify and electronic mail box and alter the structure settings.

  • Make Fullwidth: Sure

contact form module

contact form module

Parts

Disable the captcha subsequent.

  • Show Captcha: No

contact form module

Button Settings

And alter the button settings.

  • Use Customized Types for Button: Sure
  • Button Textual content Colour: #ffffff
  • Colour 1: #3AA0E3
  • Colour 2: #3491CE
  • Gradient Kind: Linear
  • Gradient Route: 155deg
  • Get started Place: 50%
  • Finish Place: 50%
  • Button Border Width: 0px
  • Button Border Radius: 10px
  • Field Shadow Unfold Power: -2px
  • Shadow Colour: #0a60af

contact form module

contact form module

contact form module

Border

We’re additionally including ‘5px’ of rounded corners to each and every one of the vital fields.

contact form module

Upload Textual content Module to Column 2

Upload Content material

In the second one column, the primary module we’ll want is a Textual content Module. Cross forward and input some content material.

contact form module

Background Colour

Then, trade the background colour.

  • Background Colour: rgba(255,255,255,0.13)

contact form module

Textual content Settings

Mess around with the textual content settings as smartly.

  • Textual content Font Weight: Mild
  • Textual content Colour: #ffffff
  • Textual content Measurement: 15px
  • Textual content Letter Spacing: -0.5px

contact form module

Spacing

And upload some customized padding to provide the module house to respire.

  • Most sensible Padding: 12px
  • Backside Padding: 12px
  • Left Padding: 10px
  • Proper Padding: 10px

contact form module

Border

We’re additionally including ’20px’ to the highest left and backside left corners. On most sensible of that, we’ll upload a left border.

  • Left Border Width: 34px
  • Left Border Colour: #edf000

contact form module

Visibility

To make this design fit the other display sizes, we’re going to disable the Textual content Module on telephone and pill.

contact form module

Clone Textual content Module Two times

Whenever you’re finished enhancing the primary Textual content Module, cross forward and clone the module two times.

contact form module

Trade Content material of Each Duplicates

Trade the content material of each duplicates into one thing else.

contact form module

Trade Spacing of Each Duplicates

And upload some most sensible margin to make space between each and every one of the vital modules.

  • Most sensible Margin: 20px

contact form module

Trade Border of Each Duplicates

Remaining however now not least, trade the left border colour of each and every one of the vital duplicates in my opinion.

  • Colour 1: #00faff
  • Colour 2: #00f76f

contact form module

Growing Touch Shape #4

contact form module

Upload New Phase

Background Colour

Directly to the fourth instance! Upload a brand new segment the use of the next background colour:

  • Background Colour: #FFBABD

divi contact form module designs

Spacing

Take away the default padding of this segment.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

divi contact form module designs

Upload New Row

Column Construction

Proceed by way of including a brand new row the use of the next column construction:

divi contact form module designs

Gradient Background

With out including any modules but, open the row settings and upload a gradient background.

  • Colour 1: #ffffff
  • Colour 2: rgba(41,196,169,0)
  • Gradient Kind: Radial
  • Radial Route: Middle
  • Get started Place: 38%
  • Finish Place: 38%

divi contact form module designs

Sizing

Trade the sizing settings subsequent.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

divi contact form module designs

Spacing

And upload some customized padding.

  • Most sensible Padding: 160px
  • Backside Padding: 160px

divi contact form module designs

Upload Textual content Module

Upload Content material

The primary module we want is a Textual content Module. Cross forward and input some content material.

divi contact form module designs

Textual content Settings

Trade the textual content settings accordingly:

  • Textual content Font: Abril Fatface
  • Textual content Colour: #640076
  • Textual content Measurement: 45px (Desktop), 34px (Pill), 20px (Telephone)
  • Textual content Line Peak: 1em
  • Textual content Orientation: Middle

divi contact form module designs

Spacing

Upload some customized spacing values subsequent.

  • Most sensible Margin: 300px
  • Most sensible Padding: 50px
  • Backside Padding: 50px

divi contact form module designs

Upload Touch Shape Module

Permit ‘Make Fullwidth’ Possibility on Identify & E-mail Box

The second one and final module we want is a Touch Shape Module. Open each the identify and electronic mail fields and alter the structure settings.

  • Make Fullwidth: Sure

divi contact form module designs

divi contact form module designs

Parts

Then, disable the captcha choice within the parts settings.

  • Show Captcha: No

divi contact form module designs

Shape Box Textual content Settings

Make some adjustments to the shape box textual content settings as smartly.

  • Shape Box Background Colour: #fff6f6
  • Shape Box Textual content Colour: #ff7c7c

divi contact form module designs

Button Settings

Trade the button into an icon button the use of the next settings:

  • Use Customized Types for Button: Sure
  • Button Textual content Measurement: 88px
  • Button Textual content Colour: rgba(255,255,255,0)
  • Hover Button Background Colour: rgba(255,255,255,0)
  • Button Border Width: 0px
  • Button Icon Colour: #e60085
  • Most effective Display Icon on Hover for Button: Sure

divi contact form module designs

divi contact form module designs

Sizing

And mess around with the sizing values to make the design fit all display sizes.

  • Width: 42% (Desktop), 50% (Pill), 77% (Telephone)
  • Module Alignment: Middle

divi contact form module designs

Spacing

Proceed by way of including some customized spacing values to the module.

  • Backside Margin: 200px
  • Left Padding: 50px
  • Proper Padding: 50px

divi contact form module designs

Border

And upload ’10px’ to each and every one of the vital corners.

divi contact form module designs

Button Margin

Remaining however now not least, push the icon button to the best by way of the use of the next line of CSS code within the complicated tab:

margin-right: -100px;

divi contact form module designs

Growing Touch Shape #5

contact form module

Upload New Phase

Gradient Background

Directly to the final instance! Upload a brand new segment with the next gradient background:

  • Colour 1: #4bf2d0
  • Colour 2: #ffffff
  • Gradient Kind: Radial
  • Radial Route: Left
  • Get started Place: 36%
  • Finish Place: 36%

divi contact form module designs

Spacing

Then, cross to the spacing settings and upload some customized padding.

  • Most sensible Padding: 250px
  • Backside Padding: 250px

divi contact form module designs

Upload New Row

Column Construction

Whenever you’re finished enhancing the segment settings, upload a brand new row the use of the next column construction:

divi contact form module designs

Background Colour

With out including any modules but, open the row settings and upload a background colour.

  • Background Colour: #ffffff

divi contact form module designs

Column 1 Background Colour

Upload some other background colour to the primary column.

  • Column 1 Background Colour: #f9f9f9

divi contact form module designs

Sizing

Then, trade the sizing settings of the row.

  • Use Customized Width: Sure
  • Unit: PX
  • Customized Width: 1730px
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Equalize Column Heights: Sure

divi contact form module designs

Spacing

And upload some customized spacing values to compare all display sizes.

  • Most sensible Padding: 0px
  • Backside Padding: 0px
  • Column 1 Most sensible Padding: 200px (Desktop), 0px (Pill & Telephone)
  • Column 1 Backside Padding: 150px (Desktop), 0px (Pill & Telephone)
  • Column 1 Left Padding: 50px
  • Column 1 Proper Padding: 50px
  • Column 2 Most sensible Padding: 200px (Desktop), 100px (Pill & Telephone)
  • Column 2 Backside Padding: 150px, 100px (Pill & Telephone)

divi contact form module designs

Field Shadow

The very last thing you’ll want to do within the row settings is including a delicate field shadow.

  • Field Shadow Blur Power: 56px
  • Field Shadow Unfold Power: -17px
  • Shadow Colour: rgba(0,0,0,0.3)

divi contact form module designs

Upload Textual content Module to Column 1

Upload Content material

Time to begin including modules! Upload a Textual content Module to the primary column.

divi contact form module designs

Textual content Settings

Whenever you’ve added the content material, cross to the textual content settings and make some adjustments.

  • Textual content Font: Cambay
  • Textual content Colour: #000000
  • Textual content Measurement: 26px
  • Textual content Letter Spacing: -0.5px
  • Textual content Orientation: Proper

divi contact form module designs

Spacing

Upload some most sensible margin as smartly.

  • Most sensible Margin: 60px

divi contact form module designs

Visibility

And conceal the module on each telephone and pill.

divi contact form module designs

Clone Textual content Module Two times

Trade Content material of Each Duplicates

Whenever you’re finished enhancing the primary Textual content Module, cross forward and clone the module two times. Trade the content material of each duplicates.

divi contact form module designs

Trade Spacing of Each Duplicates

Alter the highest margin of each duplicates as smartly.

  • Most sensible Margin: 80px

divi contact form module designs

Upload Touch Shape Module to Column 2

Permit ‘Make Fullwidth’ Possibility on Identify & E-mail Box

The one module we want in the second one column is a Touch Shape Module. Open the identify and electronic mail fields and alter the structure settings.

  • Make Fullwidth: Sure

divi contact form module designs

divi contact form module designs

Parts

Disable the captcha choice subsequent.

  • Show Captcha: Sure

divi contact form module designs

Shape Box Textual content Settings

Then, cross to the shape box textual content settings and make some changes.

  • Shape Box Background Colour: rgba(255,255,255,0)
  • Shape Box Font: Cambay

divi contact form module designs

Button Settings

And create a singular button the use of the next button settings:

  • Use Customized Types for Button: Sure
  • Button Textual content Measurement: 64px (Desktop), 50px (Pill), 40px (Telephone)
  • Button Textual content Colour: #000000
  • Colour 1: #4bf2d0
  • Colour 2: rgba(41,196,169,0)
  • Gradient Kind: Radial
  • Radial Route: Middle
  • Get started Place: 25%
  • Finish Place: 25%
  • Button Border Width: 0px
  • Most effective Display Button on Hover for Button: No

divi contact form module designs

divi contact form module designs

Spacing

Upload some most sensible margin to this module as smartly.

  • Most sensible Margin: 50px

divi contact form module designs

Border

And use a delicate backside border for each and every one of the vital fields.

  • Backside Border Width: 0.5px
  • Backside Border Colour: #000000

divi contact form module designs

Person Box Spacing

Remaining however now not least, upload the next backside margin to each and every one of the vital fields in my opinion and also you’re finished!

  • Backside Margin: 50px

divi contact form module designs

divi contact form module designs

Preview

Desktop

Now that we’ve long past thru all of the steps, let’s take a last take a look at the Divi touch shape module designs on desktop.

contact form module

Cellular

And that is what you’ll be able to be expecting from the Divi touch shape module designs on smaller display sizes:

contact form module

Ultimate Ideas

On this publish, we’ve shared 5 stunning Divi touch shape module designs that you’ll be able to simply use and regulate for any site you create. Touch paperwork are an important a part of many internet sites in the market so it’s essential to ensure your design convinces your guests to get involved. In case you have any questions or tips, be sure you go away a remark within the remark segment underneath!

The publish 5 Unique Ways to Style Divi’s Contact Form Module seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]