5 Unique Ways to Style Divi’s Contact Form Module

November 4, 2018

Contact forms are a vital part of many websites. Their primary purpose is being intuitive and helping visitors easily get in touch. But that doesn’t mean all contact forms should look a certain and predefined way. You can easily combine an intuitive experience with a beautiful design. That’s exactly what we’ll do in this post. We’re going to share 5 unique Divi contact form module designs that you can build using Divi’s built-in options only.

Let’s get to it!

Preview of Divi Contact Form Module Designs

Desktop

Let’s start off by taking a look at the Divi contact form module designs on desktop.

5-unique-ways-to-style-divis-contact-form-module Theme Builder Layout

Mobile

And this is what the Divi contact form module designs look like on smaller screen sizes:

5-unique-ways-to-style-divis-contact-form-module-1 Theme Builder Layout

Creating Contact Form #1

5-unique-ways-to-style-divis-contact-form-module Theme Builder Layout

Add New Section

Gradient Background

Let’s get started with the first example! Add a new section, go to the background settings and add a gradient background.

  • Color 1: #4c00ff
  • Color 2: #ffd400
  • Gradient Type: Radial
  • Radial Direction: Bottom Left
  • Start Position: 34%
  • End Position: 34%

5-unique-ways-to-style-divis-contact-form-module-2 Theme Builder Layout

Spacing

Then, go to the spacing settings and add some custom padding values.

  • Top Padding: 200px
  • Bottom Padding: 200px

5-unique-ways-to-style-divis-contact-form-module-3 Theme Builder Layout

Add New Row

Column Structure

Add a new row using the following column structure:

5-unique-ways-to-style-divis-contact-form-module-4 Theme Builder Layout

Column 1 Background Color

Without adding any modules yet, open the row settings and add a column 1 gradient background.

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

5-unique-ways-to-style-divis-contact-form-module-5 Theme Builder Layout

Column 1 Background Image

Add a background image to the first column as well.

  • Column 1 Background Image Repeat: No Repeat
  • Column 1 Background Image Blend: Screen

5-unique-ways-to-style-divis-contact-form-module-6 Theme Builder Layout

Column 2 Background Color

And a white background color to the second column.

  • Column 2 Background Color: #ffffff

5-unique-ways-to-style-divis-contact-form-module-7 Theme Builder Layout

Sizing

Change the sizing settings next.

  • Equalize Column Heights: Yes

5-unique-ways-to-style-divis-contact-form-module-8 Theme Builder Layout

Spacing

Remove all default custom padding as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

5-unique-ways-to-style-divis-contact-form-module-9 Theme Builder Layout

Column Border Radius

Add some border radius to both columns in the advanced tab.

border-radius: 10px;

5-unique-ways-to-style-divis-contact-form-module-10 Theme Builder Layout

Add Text Module to Column 1

Add Content

Time to start adding the various modules! Add a Text Module to the first column with some content of choice.

5-unique-ways-to-style-divis-contact-form-module-11 Theme Builder Layout

Text Settings

Then, go to the text settings and make some changes.

  • Text font: Satisfy
  • Text Color: #333333
  • Text size: 100px
  • Text Line Height: 1em
  • Text Orientation: Center

5-unique-ways-to-style-divis-contact-form-module-12 Theme Builder Layout

Spacing

Add some custom padding values as well.

  • Top Padding: 600px
  • Bottom Padding: 100px

5-unique-ways-to-style-divis-contact-form-module-13 Theme Builder Layout

Box Shadow

To add depth to the design, use a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -16px
  • Shadow Color: rgba(0,0,0,0.3)

5-unique-ways-to-style-divis-contact-form-module-14 Theme Builder Layout

Add Image Module to Column 2

Upload PNG Image

Continue by adding an Image Module to the second column. Upload a PNG image of choice.

5-unique-ways-to-style-divis-contact-form-module-15 Theme Builder Layout

Sizing

Change the sizing settings of this module.

  • Width: 25% (Desktop), 50% (Tablet), 60% (Phone)
  • Module Alignment: Center

5-unique-ways-to-style-divis-contact-form-module-16 Theme Builder Layout

Spacing

Create an overlap by using some negative top margin.

  • Top Margin: -60%

5-unique-ways-to-style-divis-contact-form-module-17 Theme Builder Layout

Add Text Module #1 to Column 2

Add Content

Right below the Image Module, add a Text Module with some content.

5-unique-ways-to-style-divis-contact-form-module-18 Theme Builder Layout

Text Settings

Change the text settings of this module.

  • Text Font: Satisfy
  • Text Color: #333333
  • Text Size: 44px
  • Text Orientation: Center

5-unique-ways-to-style-divis-contact-form-module-19 Theme Builder Layout

Add Text Module #2 to Column 2

Add Content

Add another text module next.

5-unique-ways-to-style-divis-contact-form-module-20 Theme Builder Layout

Text Settings

Change the text settings of this module as well.

  • Text Font: Arial
  • Text Color: #ffd400
  • Text Size: 18px
  • Text Letter Spacing: 2px
  • Text Orientation: Center

5-unique-ways-to-style-divis-contact-form-module-21 Theme Builder Layout

Spacing

Add some bottom margin next.

  • Bottom Margin: 100px

5-unique-ways-to-style-divis-contact-form-module-22 Theme Builder Layout

Add Contact Form Module to Column 2

Enable ‘Make Fullwidth’ Option on Name & Email Field

The last module needed is the Contact Form Module. Before you do anything else, open the name and email fields and change the layout.

  • Make Fullwidth: Yes

5-unique-ways-to-style-divis-contact-form-module-23 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-24 Theme Builder Layout

Add Subject Field

To create this design, we’ve added another field for the subject.

5-unique-ways-to-style-divis-contact-form-module-25 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-26 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-27 Theme Builder Layout

Elements

Disable the captcha option next.

  • Display Captcha: No

5-unique-ways-to-style-divis-contact-form-module-28 Theme Builder Layout

Form Field Text Settings

Make some changes to the form field text settings of this Contact Form Module.

  • Form Field Background Color: rgba(255,255,255,0)
  • Form Field Font: Arial
  • Form Field Font Weight: Light
  • Form Field Text Size: 16px
  • Form Field Letter Spacing: 2px

5-unique-ways-to-style-divis-contact-form-module-29 Theme Builder Layout

Button Settings

We’re modifying the button appearance as well.

  • Use Custom Styles for Button: Yes
  • Button Text Color: #ffd400
  • Button Border Width: 0px
  • Button Letter Spacing: 2px
  • Button Font: Arial
  • Font Style: Underline
  • Underline Color: #4c00ff

5-unique-ways-to-style-divis-contact-form-module-30 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-31 Theme Builder Layout

Spacing

Add some custom padding values next.

  • Bottom Padding: 100px
  • Left Padding: 50px
  • Right Padding: 50px

5-unique-ways-to-style-divis-contact-form-module-32 Theme Builder Layout

Border

And add a subtle bottom border to each one of the fields.

  • Bottom Border Width: 2px
  • Bottom Border Color: #efefef

5-unique-ways-to-style-divis-contact-form-module-33 Theme Builder Layout

Individual Field Spacing

Last but not least, add some bottom margin to each one of the individual fields except for the message one.

  • Bottom Margin: 20px

5-unique-ways-to-style-divis-contact-form-module-34 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-35 Theme Builder Layout

Creating Contact Form #2

5-unique-ways-to-style-divis-contact-form-module-1 Theme Builder Layout

Add New Section

Gradient background

On to the next example! Add a new section with a gradient background.

  • Color 1: #562fef
  • Color 2: #ffffff
  • Gradient Type: Linear
  • Start Position: 50%
  • End Position: 50%

5-unique-ways-to-style-divis-contact-form-module-36 Theme Builder Layout

Spacing

Add some custom padding values to the spacing settings of this section.

  • Top Padding: 200px
  • Bottom Padding: 200px

5-unique-ways-to-style-divis-contact-form-module-37 Theme Builder Layout

Add New Row

Column Structure

Add a new row using the following column structure:

5-unique-ways-to-style-divis-contact-form-module-38 Theme Builder Layout

Background Color

Without adding any modules yet, open the row settings and add a background color to the row.

  • Background Color: #ffffff

5-unique-ways-to-style-divis-contact-form-module-39 Theme Builder Layout

Column 2 Gradient Background

Add a gradient background to the second column of the row next.

  • Color 1: #9932ff
  • Color 2: #562fef
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 160deg

5-unique-ways-to-style-divis-contact-form-module-40 Theme Builder Layout

Sizing

Change the sizing settings of the row as well.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-unique-ways-to-style-divis-contact-form-module-41 Theme Builder Layout

Spacing

Then, add some custom spacing values.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 100px
  • Column 1 Bottom Padding: 50px
  • Column 1 Left Padding: 50px
  • Column 1 Right Padding: 50px
  • Column 2 Top Padding: 100px
  • Column 2 Bottom Padding: 100px
  • Column 2 Left Padding: 50px
  • Column 2 Right Padding: 50px

5-unique-ways-to-style-divis-contact-form-module-42 Theme Builder Layout

Border

Add ’20px’ to each one of the borders of the row.

5-unique-ways-to-style-divis-contact-form-module-43 Theme Builder Layout

Box Shadow

Lastly, add a subtle box shadow to the row.

  • Box Shadow Blur Strength: 45px
  • Box Shadow Spread Strength: -11px
  • Shadow Color: rgba(0,0,0,0.3)

5-unique-ways-to-style-divis-contact-form-module-44 Theme Builder Layout

Add Text Module to Column 1

Add Content

Time to start adding the modules! Start with a Text Module in the first column.

5-unique-ways-to-style-divis-contact-form-module-45 Theme Builder Layout

Text Settings

Change the text settings of this module.

  • Text Font Weight: Ultra Bold
  • Text Font Style: Uppercase
  • Text Color: #562fef
  • Text Suze: 100px (Desktop), 80px (Tablet), 60px (Phone)
  • Text Letter Spacing: -10px
  • Text Line Height: 1em

5-unique-ways-to-style-divis-contact-form-module-46 Theme Builder Layout

Spacing

Add some bottom margin as well.

  • Bottom Margin: 50px

5-unique-ways-to-style-divis-contact-form-module-47 Theme Builder Layout

Add Contact Form Module to Column 1

Elements

The second module we’ll need in the first column is a Contact Form Module. Once you’ve added the module, disable the ‘Display Captcha’ option.

  • Display Captcha: No

5-unique-ways-to-style-divis-contact-form-module-48 Theme Builder Layout

Form Field Text Settings

Change the form field background color next.

  • Form Field Background Color: #ffffff

5-unique-ways-to-style-divis-contact-form-module-49 Theme Builder Layout

Button Settings

Play around with the button settings as well to create an icon button instead of one containing text.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 73px
  • Botton Text Color: rgba(0,0,0,0)
  • Hover Button Background Color: rgba(255,255,255,0)
  • Button Border Width: 0px
  • Button Icon Color: #9932ff
  • Only Show Icon on Hover for Button: No

5-unique-ways-to-style-divis-contact-form-module-50 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-51 Theme Builder Layout

Box Shadow

Lastly, add a subtle box shadow to each one of the fields.

  • Box Shadow Blur Strength: 36px
  • Box Shadow Blur Strength: -14px
  • Shadow Color: rgba(0,0,0,0.3)

5-unique-ways-to-style-divis-contact-form-module-52 Theme Builder Layout

Add Text Module to Column 2

Add Content

The first module we’ll need in the second column is another Text Module.

5-unique-ways-to-style-divis-contact-form-module-53 Theme Builder Layout

Text Settings

Once you’ve added the content, change the text settings of this module.

  • Text Font Weight: Ultra Bold
  • Text Color: #ffffff
  • Text Size: 23px
  • Text Letter Spacing: -1px

5-unique-ways-to-style-divis-contact-form-module-54 Theme Builder Layout

Add Blurb Module #1 to Column 2

Add Content

The second module we’ll need is a Blurb Module. Go ahead and enter some contact information.

5-unique-ways-to-style-divis-contact-form-module-55 Theme Builder Layout

Select Icon

Then, choose a matching icon.

5-unique-ways-to-style-divis-contact-form-module-56 Theme Builder Layout

Icon Settings

Change the settings of this icon.

  • Icon Color: #ffffff
  • Icon Placement: Left

5-unique-ways-to-style-divis-contact-form-module-57 Theme Builder Layout

Title Text Settings

Continue by making some changes to the title text settings next.

  • Title Text Size: 15px
  • Title Letter Spacing: -0.5px

5-unique-ways-to-style-divis-contact-form-module-58 Theme Builder Layout

Spacing

And add some top margin.

  • Top Margin: 120px

5-unique-ways-to-style-divis-contact-form-module-59 Theme Builder Layout

Clone Blurb Module Twice

Once you’re done modifying the first Blurb Module, you can go ahead and clone the module twice.

5-unique-ways-to-style-divis-contact-form-module-60 Theme Builder Layout

Change Content & Icon of Both Duplicates

Change the content and icons of both duplicates to share different kinds of contact information with visitors.

5-unique-ways-to-style-divis-contact-form-module-61 Theme Builder Layout

Change Spacing of Both Duplicates

The top margin of both duplicates needs to be altered as well.

  • Top Margin: 30px

5-unique-ways-to-style-divis-contact-form-module-62 Theme Builder Layout

Creating Contact Form #3

5-unique-ways-to-style-divis-contact-form-module-2 Theme Builder Layout

Add New Section

Background Color

On to the third example! Add a new section with the following background color:

  • Background Color: #3491CE

5-unique-ways-to-style-divis-contact-form-module-63 Theme Builder Layout

Spacing

Continue by adding some custom padding values in the spacing settings.

  • Top Padding: 200px
  • Bottom Padding: 200px

5-unique-ways-to-style-divis-contact-form-module-64 Theme Builder Layout

Add Row #1

Column Structure

Then, add a new row using the following column structure:

5-unique-ways-to-style-divis-contact-form-module-65 Theme Builder Layout

Add Text Module

Add Content

Time to start adding modules! The first module we’ll need to add to the first column is a Text Module. Enter some content of choice.

5-unique-ways-to-style-divis-contact-form-module-66 Theme Builder Layout

Text Settings

Then, change the text settings.

  • Text Font Weight: Ultra Bold
  • Text Color: rgba(255,255,255,0.24)
  • Text size: 100px (Desktop), 86px (Tablet), 60px (Phone)
  • Text Line Height: 1em
  • Text Orientation: Center

5-unique-ways-to-style-divis-contact-form-module-67 Theme Builder Layout

Spacing

Add some negative bottom margin as well.

  • Bottom Margin: -100px

5-unique-ways-to-style-divis-contact-form-module-68 Theme Builder Layout

Add Row #2

Column Structure

The second row we need to complete this example contains the following column structure:

5-unique-ways-to-style-divis-contact-form-module-69 Theme Builder Layout

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background.

  • Color 1: #11CE84
  • Color 2: #10C77F
  • Gradient Type: Linear
  • Gradient Direction: 160deg
  • Start Position: 50%
  • End Position: 50%

5-unique-ways-to-style-divis-contact-form-module-70 Theme Builder Layout

Sizing

Change the sizing settings as well.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-unique-ways-to-style-divis-contact-form-module-71 Theme Builder Layout

Spacing

Add some custom padding values next.

  • Top Padding: 150px
  • Bottom Padding: 100px
  • Left Padding: 50px
  • Right Padding: 50px

5-unique-ways-to-style-divis-contact-form-module-72 Theme Builder Layout

Border

Then, go to the border settings and add ’20px’ to each one of the corners. Use a bottom border as well.

  • Bottom Border Width: 10px
  • Bottom Border Color: #1ba35a

5-unique-ways-to-style-divis-contact-form-module-73 Theme Builder Layout

Box Shadow

Complete the row settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -24px
  • Shadow Color: rgba(0,0,0,0.3)

5-unique-ways-to-style-divis-contact-form-module-74 Theme Builder Layout

Add Contact Form Module to Column 1

Enable ‘Make Fullwidth’ Option on Name & Email Field

The first module we need in the first column of the row is a Contact Form Module. Open the name and email field and change the layout settings.

  • Make Fullwidth: Yes

5-unique-ways-to-style-divis-contact-form-module-75 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-76 Theme Builder Layout

Elements

Disable the captcha next.

  • Display Captcha: No

5-unique-ways-to-style-divis-contact-form-module-77 Theme Builder Layout

Button Settings

And change the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Color: #ffffff
  • Color 1: #3AA0E3
  • Color 2: #3491CE
  • Gradient Type: Linear
  • Gradient Direction: 155deg
  • Start Position: 50%
  • End Position: 50%
  • Button Border Width: 0px
  • Button Border Radius: 10px
  • Box Shadow Spread Strength: -2px
  • Shadow Color: #0a60af

5-unique-ways-to-style-divis-contact-form-module-78 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-79 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-80 Theme Builder Layout

Border

We’re also adding ‘5px’ of rounded corners to each one of the fields.

5-unique-ways-to-style-divis-contact-form-module-81 Theme Builder Layout

Add Text Module to Column 2

Add Content

In the second column, the first module we’ll need is a Text Module. Go ahead and enter some content.

5-unique-ways-to-style-divis-contact-form-module-82 Theme Builder Layout

Background Color

Then, change the background color.

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

5-unique-ways-to-style-divis-contact-form-module-83 Theme Builder Layout

Text Settings

Play around with the text settings as well.

  • Text Font Weight: Light
  • Text Color: #ffffff
  • Text Size: 15px
  • Text Letter Spacing: -0.5px

5-unique-ways-to-style-divis-contact-form-module-84 Theme Builder Layout

Spacing

And add some custom padding to give the module space to breathe.

  • Top Padding: 12px
  • Bottom Padding: 12px
  • Left Padding: 10px
  • Right Padding: 10px

5-unique-ways-to-style-divis-contact-form-module-85 Theme Builder Layout

Border

We’re also adding ’20px’ to the top left and bottom left corners. On top of that, we’ll add a left border.

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

5-unique-ways-to-style-divis-contact-form-module-86 Theme Builder Layout

Visibility

To make this design match the different screen sizes, we’re going to disable the Text Module on phone and tablet.

5-unique-ways-to-style-divis-contact-form-module-87 Theme Builder Layout

Clone Text Module Twice

Once you’re done modifying the first Text Module, go ahead and clone the module twice.

5-unique-ways-to-style-divis-contact-form-module-88 Theme Builder Layout

Change Content of Both Duplicates

Change the content of both duplicates into something else.

5-unique-ways-to-style-divis-contact-form-module-89 Theme Builder Layout

Change Spacing of Both Duplicates

And add some top margin to create space between each one of the modules.

  • Top Margin: 20px

5-unique-ways-to-style-divis-contact-form-module-90 Theme Builder Layout

Change Border of Both Duplicates

Last but not least, change the left border color of each one of the duplicates individually.

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

5-unique-ways-to-style-divis-contact-form-module-91 Theme Builder Layout

Creating Contact Form #4

5-unique-ways-to-style-divis-contact-form-module-3 Theme Builder Layout

Add New Section

Background Color

On to the fourth example! Add a new section using the following background color:

  • Background Color: #FFBABD

5-unique-ways-to-style-divis-contact-form-module-92 Theme Builder Layout

Spacing

Remove the default padding of this section.

  • Top Padding: 0px
  • Bottom Padding: 0px

5-unique-ways-to-style-divis-contact-form-module-93 Theme Builder Layout

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

5-unique-ways-to-style-divis-contact-form-module-94 Theme Builder Layout

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background.

  • Color 1: #ffffff
  • Color 2: rgba(41,196,169,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 38%
  • End Position: 38%

5-unique-ways-to-style-divis-contact-form-module-95 Theme Builder Layout

Sizing

Change the sizing settings next.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

5-unique-ways-to-style-divis-contact-form-module-96 Theme Builder Layout

Spacing

And add some custom padding.

  • Top Padding: 160px
  • Bottom Padding: 160px

5-unique-ways-to-style-divis-contact-form-module-97 Theme Builder Layout

Add Text Module

Add Content

The first module we need is a Text Module. Go ahead and enter some content.

5-unique-ways-to-style-divis-contact-form-module-98 Theme Builder Layout

Text Settings

Change the text settings accordingly:

  • Text Font: Abril Fatface
  • Text Color: #640076
  • Text Size: 45px (Desktop), 34px (Tablet), 20px (Phone)
  • Text Line Height: 1em
  • Text Orientation: Center

5-unique-ways-to-style-divis-contact-form-module-99 Theme Builder Layout

Spacing

Add some custom spacing values next.

  • Top Margin: 300px
  • Top Padding: 50px
  • Bottom Padding: 50px

5-unique-ways-to-style-divis-contact-form-module-100 Theme Builder Layout

Add Contact Form Module

Enable ‘Make Fullwidth’ Option on Name & Email Field

The second and last module we need is a Contact Form Module. Open both the name and email fields and change the layout settings.

  • Make Fullwidth: Yes

5-unique-ways-to-style-divis-contact-form-module-101 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-102 Theme Builder Layout

Elements

Then, disable the captcha option in the elements settings.

  • Display Captcha: No

5-unique-ways-to-style-divis-contact-form-module-103 Theme Builder Layout

Form Field Text Settings

Make some changes to the form field text settings as well.

  • Form Field Background Color: #fff6f6
  • Form Field Text Color: #ff7c7c

5-unique-ways-to-style-divis-contact-form-module-104 Theme Builder Layout

Button Settings

Change the button into an icon button using the following settings:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 88px
  • Button Text Color: rgba(255,255,255,0)
  • Hover Button Background Color: rgba(255,255,255,0)
  • Button Border Width: 0px
  • Button Icon Color: #e60085
  • Only Show Icon on Hover for Button: Yes

5-unique-ways-to-style-divis-contact-form-module-105 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-106 Theme Builder Layout

Sizing

And play around with the sizing values to make the design match all screen sizes.

  • Width: 42% (Desktop), 50% (Tablet), 77% (Phone)
  • Module Alignment: Center

5-unique-ways-to-style-divis-contact-form-module-107 Theme Builder Layout

Spacing

Continue by adding some custom spacing values to the module.

  • Bottom Margin: 200px
  • Left Padding: 50px
  • Right Padding: 50px

5-unique-ways-to-style-divis-contact-form-module-108 Theme Builder Layout

Border

And add ’10px’ to each one of the corners.

5-unique-ways-to-style-divis-contact-form-module-109 Theme Builder Layout

Button Margin

Last but not least, push the icon button to the right by using the following line of CSS code in the advanced tab:

margin-right: -100px;

5-unique-ways-to-style-divis-contact-form-module-110 Theme Builder Layout

Creating Contact Form #5

5-unique-ways-to-style-divis-contact-form-module-4 Theme Builder Layout

Add New Section

Gradient Background

On to the last example! Add a new section with the following gradient background:

  • Color 1: #4bf2d0
  • Color 2: #ffffff
  • Gradient Type: Radial
  • Radial Direction: Left
  • Start Position: 36%
  • End Position: 36%

5-unique-ways-to-style-divis-contact-form-module-111 Theme Builder Layout

Spacing

Then, go to the spacing settings and add some custom padding.

  • Top Padding: 250px
  • Bottom Padding: 250px

5-unique-ways-to-style-divis-contact-form-module-112 Theme Builder Layout

Add New Row

Column Structure

Once you’re done modifying the section settings, add a new row using the following column structure:

5-unique-ways-to-style-divis-contact-form-module-113 Theme Builder Layout

Background Color

Without adding any modules yet, open the row settings and add a background color.

  • Background Color: #ffffff

5-unique-ways-to-style-divis-contact-form-module-114 Theme Builder Layout

Column 1 Background Color

Add another background color to the first column.

  • Column 1 Background Color: #f9f9f9

5-unique-ways-to-style-divis-contact-form-module-115 Theme Builder Layout

Sizing

Then, change the sizing settings of the row.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 1730px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-unique-ways-to-style-divis-contact-form-module-116 Theme Builder Layout

Spacing

And add some custom spacing values to match all screen sizes.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 200px (Desktop), 0px (Tablet & Phone)
  • Column 1 Bottom Padding: 150px (Desktop), 0px (Tablet & Phone)
  • Column 1 Left Padding: 50px
  • Column 1 Right Padding: 50px
  • Column 2 Top Padding: 200px (Desktop), 100px (Tablet & Phone)
  • Column 2 Bottom Padding: 150px, 100px (Tablet & Phone)

5-unique-ways-to-style-divis-contact-form-module-117 Theme Builder Layout

Box Shadow

The last thing you’ll need to do in the row settings is adding a subtle box shadow.

  • Box Shadow Blur Strength: 56px
  • Box Shadow Spread Strength: -17px
  • Shadow Color: rgba(0,0,0,0.3)

5-unique-ways-to-style-divis-contact-form-module-118 Theme Builder Layout

Add Text Module to Column 1

Add Content

Time to start adding modules! Add a Text Module to the first column.

5-unique-ways-to-style-divis-contact-form-module-119 Theme Builder Layout

Text Settings

Once you’ve added the content, go to the text settings and make some changes.

  • Text Font: Cambay
  • Text Color: #000000
  • Text Size: 26px
  • Text Letter Spacing: -0.5px
  • Text Orientation: Right

5-unique-ways-to-style-divis-contact-form-module-120 Theme Builder Layout

Spacing

Add some top margin as well.

  • Top Margin: 60px

5-unique-ways-to-style-divis-contact-form-module-121 Theme Builder Layout

Visibility

And hide the module on both phone and tablet.

5-unique-ways-to-style-divis-contact-form-module-122 Theme Builder Layout

Clone Text Module Twice

Change Content of Both Duplicates

Once you’re done modifying the first Text Module, go ahead and clone the module twice. Change the content of both duplicates.

5-unique-ways-to-style-divis-contact-form-module-123 Theme Builder Layout

Change Spacing of Both Duplicates

Modify the top margin of both duplicates as well.

  • Top Margin: 80px

5-unique-ways-to-style-divis-contact-form-module-124 Theme Builder Layout

Add Contact Form Module to Column 2

Enable ‘Make Fullwidth’ Option on Name & Email Field

The only module we need in the second column is a Contact Form Module. Open the name and email fields and change the layout settings.

  • Make Fullwidth: Yes

5-unique-ways-to-style-divis-contact-form-module-125 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-126 Theme Builder Layout

Elements

Disable the captcha option next.

  • Display Captcha: Yes

5-unique-ways-to-style-divis-contact-form-module-127 Theme Builder Layout

Form Field Text Settings

Then, go to the form field text settings and make some modifications.

  • Form Field Background Color: rgba(255,255,255,0)
  • Form Field Font: Cambay

5-unique-ways-to-style-divis-contact-form-module-128 Theme Builder Layout

Button Settings

And create a unique button using the following button settings:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 64px (Desktop), 50px (Tablet), 40px (Phone)
  • Button Text Color: #000000
  • Color 1: #4bf2d0
  • Color 2: rgba(41,196,169,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 25%
  • End Position: 25%
  • Button Border Width: 0px
  • Only Show Button on Hover for Button: No

5-unique-ways-to-style-divis-contact-form-module-129 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-130 Theme Builder Layout

Spacing

Add some top margin to this module as well.

  • Top Margin: 50px

5-unique-ways-to-style-divis-contact-form-module-131 Theme Builder Layout

Border

And use a subtle bottom border for each one of the fields.

  • Bottom Border Width: 0.5px
  • Bottom Border Color: #000000

5-unique-ways-to-style-divis-contact-form-module-132 Theme Builder Layout

Individual Field Spacing

Last but not least, add the following bottom margin to each one of the fields individually and you’re done!

  • Bottom Margin: 50px

5-unique-ways-to-style-divis-contact-form-module-133 Theme Builder Layout

5-unique-ways-to-style-divis-contact-form-module-134 Theme Builder Layout

Preview

Desktop

Now that we’ve gone through all the steps, let’s take a final look at the Divi contact form module designs on desktop.

5-unique-ways-to-style-divis-contact-form-module Theme Builder Layout

Mobile

And this is what you can expect from the Divi contact form module designs on smaller screen sizes:

5-unique-ways-to-style-divis-contact-form-module-1 Theme Builder Layout

Final Thoughts

In this post, we’ve shared 5 beautiful Divi contact form module designs that you can easily use and modify for any website you create. Contact forms are a vital part of many websites out there so it’s important to make sure your design convinces your visitors to get in touch. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

review-divi-business-course-by-divi-space Theme Builder Layout

Review: Divi Business Course by Divi Space

Divi Business Course is an 8-week course that teaches how to start and run a Divi web design business and take the business to 6 figures per year. The course is dripped over the 8 weeks and includes live coaching calls, a Facebook group, and lots of documents to help...

metrilo-for-woocommerce-an-overview-and-review Theme Builder Layout

Metrilo for WooCommerce: An Overview and Review

Metrilo for WooCommerce is a growth tool for ecommerce brands that combines in-depth data with customer retention strategies. Analytics tell you all about your marketing and sales efforts, and customer engagement tools maximize the customer experience and encourage...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.