Divi: How to customize the "Contact Form" module

Would you like to create a Contact form to your website thanks to the module Contact Form from Divi? Here are 3 customization ideas…

The forms Contact details are an essential part of many websites. Their main goal is to be intuitive and help visitors get in touch easily.

But that does not mean that all forms contacts must have a precise and predefined appearance. You can easily combine an intuitive experience with a beautiful design. This is exactly what we are going to do in this tutorial.

We will share 3 unique design of the module Contact Form de Divi that you can create using only Divi's built-in options.

Let's go!

Overview of the designs of the Divi Contact Form module

Desktop versions

Let's start by taking a look at the desktop version of the different designs of the module Contact Form that we will design in this tutorial.

add a contact form to your website using Divi's Contact Form module

Mobile Versions

And here's what they look like on smaller screen sizes:

Download DIVI now!!!

How to customize the Divi Contact Form module: 3 examples

Read also: Divi: How to create a team members section as a carousel

Creation of the contact form #1

Add a new section

Gradient background

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

Gradient Stops
- 34%: #4c00ff
- 34%: #ffd400
Type: Round
Gradient Direction: Bottom Left

Spacing

Next, go to the Spacing option in the Design tab and change the settings as follows.

Padding (Top and Bottom): 200px

Add a new line

Structure of the column

Add a new row using the following column structure:

Column 1: Background color

Without adding any modules yet, open row settings, then column 1 settings and add the background color below

Background: rgba(255,255,255,0.55)

Column 1: Background image

Also add a background image to the first column.

Background Image Repeat: No-Repeat
Background Image Blend: Screen

Column 2: Background image

And a white background color to the second column.

Background: #ffffff

sizing

Then modify the sizing parameters.

Equalize Column Heights: YES

Spacing

Also remove all default custom paddings.

Padding (Top and Bottom): 0px

Column border radius

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

border-radius: 10px;

Add a Text module to column 1

Add content

It's time to start adding the different modules! Add a Text module to the first column with content of your choice.

Text settings

Next, go to the Design tab of the Text module and make some changes.

Text:
- Font: Satisfy
- Text Color: #333333
- Size: 100px
- Line Height: 1 em
- Alignment: Center

Spacing

Also add custom fill values.

Padding (Top): 600px
Padding (Bottom): 100px

Shadow box

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)

Add an Image module to column 2

Download Image

Continue by adding an Image module to the second column. Upload an image of your choice.

sizing

Change the sizing settings for this module.

Width: 25% (desktop), 50% (tablet), 60% (phone)
Module Alignment: Center

Spacing

Create an overlap using a negative top margin.

Margin (Top): -60%

border

Modify the borders of the image as follows:

Rounded Corners: 100px (All corners)

Add Text #1 module to column 2

Add content

Just below the Image module, add a Text module with content.

Text settings

Edit the text settings for this module.

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

Add Text #2 module to column 2

Add content

Then add another Text module.

Text settings

Also change the text settings for this module.

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

Spacing

Then add a bottom margin.

Margin (Bottom): 100px

Add the Contact Form module to column 2

Activate the "Make Fullwidth" option on the Name and email field

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

Make Fullwidth: yes

Add a subject field

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

spam Protection

Then disable the captcha option.

Use Basic Captcha: NO

Form field text settings

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

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

Button settings

We are also changing the appearance of the buttons.

Use Custom Size For Button: YES
Button:
- Text Color: #ffd400
- Border Width: 0 pixels
- Letter Spacing: 2px
- Font: Arial
- Font Style: U
- underline Color: #4c00ff

Spacing

Then add some custom padding values.

Padding (Bottom): 100px
Padding (Left and Right): 50px

Border

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

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

Spacing of individual fields

Finally, add a bottom margin to each of the individual fields except the message one.

Margin (Bottom): 20px