Divi theme Contact form Module | Wordpress Divi builder Documentation

Contact form module is the most useful module of the Divi theme, with the help of which you can easily get information from the client-side. The contact form of divi module is used to the contact page of all websites. If you want to get any information from Visitors, then you can use the contact form module. For a demo of the contact form module, you can see the contact page all over the websites. The Divi is a page builder that lets you create every kind of website.

Documentation of Divi theme contact form is very simple.

1. If you have wanted a website using the contact form, then you have to open the WordPress page with Divi theme (edit with Divi ). After opening the page edit with divi you have to need to insert contact form module.

3. To insert a contact form module, first, you have to insert a row or column.

4. Now you have to click on insert module and insert the contact form module.

Divi theme contact form module

 After inserting the Divi Contact form model you will have to do some settings.

Divi Contact form module Setting Documentation -


1. You will already get three fields the name, email, and message field.
2. Add new field - Here you can add more input filed contact form.

divi theme contact form module add new field

3. Title:- Define the title for the contact form module.


divi theme contact form module example

Success Message:- Here you can use the success message. A success message will show after the done.

5. Submit Button Text:- Use the text on the button like submit, register, send

6 Email:- Input the email address where messages should be sent.

7. Message Pattern: Here you can define Fields should be included in the following format - %% field_id %%. For example, if you want to include the field with id = phone, and field with id = message, then you can use the following pattern: My message is %% message %% and phone number is %% phone %%.

8. Enable Redirect URL: YES/NO Redirect users after successful form submission.

9. Background- Here you use color, image or video behind the contact form.  After setting the content you have to click the design option.

Design -

1. Text Orientation:- Here you can align the text (Left, center, right )

2. Title Text
Title Heading Level:- Which heading level you like too. (H1 H2 H3 H4 H5 H6)
Title Font Style:- Here you can choose the style for the title text.
Title Text Alignment:-Here you can alignment the title text (Left, center , right )
Title Text Color:- Use the color for title.
Title Text Size:- Set the size for the title text.

3. Form Field Text-
Form Field Background Color:- Choose the form field background color .
Form Field Font:- Which font to use for form field .
Form Field Font Style:- Here choose the style for the form field text .
Form Field Text Alignment:- Here you can aligment the form field text (Left ,center , right )
Form Field Text Color:- Choose the form field color .
Form Field Text Size:- Set the size for form filed text .
Form Field Text Shadow:- Apply the shadow on form field .

4. Button Use Custom Styles for Button

5.. Custom Margin:- Here you can use the custome margin for code module ( Top margin,right margin,bottom margin,left margin)

6. Custom Padding: Use custom padding like margin ( Top padding ,right padding,bottom padding,left padding)

7 Inputs Border Styles:- Choose the border syle for the text boxes .

8. Inputs Border Color:- You can use the border color for the input box.

9 . Box Shadow:- Which type of box-shadow you like .

10 . Animation Style:Apply the animation on contact form . Choose the animation type .
In this way, you can easily design the contact form of the Divi theme .

Divi Contact Form Module Demo -

After the Customising and Design, you have to publish the page. After publishing the page you can see the demo by going to the same page.

divi theme contact form module example
Please Share

Recommended Posts:-